RGB ekrana nə qədər işıq vermək lazım olduğunu deyir; HSL isə rəngin necə göründüyünü bildirir. Üç kanalı ton, doygunluq və işıqlığa çevirmək rəngi əl ilə tənzimləməyi asanlaşdırır.
Necə işləyir: RGB-dən HSL-ya çevirmə
- R, G və B-ni 255-ə böl ki, hər dəyər 0 ilə 1 arasında olsun.
- Üçünün maksimumunu və minimumunu götür — onların ortası işıqlıq L-dir.
- Əgər maksimum və minimum bərabərdirsə, rəng bozdur: ton və doygunluq hər ikisi 0-dır.
- Yoxsa S-i maksimum və minimum arasındakı fərqdən çıxar və H-i hansı kanal maksimumdursa ondan oxu.
İş nümunəsi
Prinzipcə dəqiqdir. H, S və L adətən yuvarlaqlaşdırılmış tam ədədlər kimi göstərildiyi üçün, geri çevirmə bir kanalı bir-iki addım dəyişə bilər.
RGB və HSL izahı
RGB nədir?
RGB bir rəngi üç işıq kanalında təsvir edir — qırmızı, yaşıl və mavi — hər biri 0–255 intervalında. Bu, ekranların faktiki işini əks etdirir: hamısı 255 olduqda ağ, hamısı 0 olduqda qara alınır. RGB rənglə hesablamalar aparanda düzgün seçimdir, və rgba() şəffaflıq əlavə edir.
- Sintaksis:
- rgb(R, G, B)
- Aralıq:
- Hər kanal üçün 0–255
- Ən yaxşı üçün:
- kod, canvas, rgba() ilə şəffaflıq
HSL nədir?
HSL rəngi üç hissəyə bölür: rəng tonu (0–360° rəng çarxında), doymalıq (rəngliliyi, 0–100%) və işıqlandırma (parlaqlıq, 0–100%). Hər hissə insanların rəngi təsvir etmə tərzinə uyğun olduğundan, HSL əl ilə və ya kodda tonlar, kölgələr və uyğun palitralar yaratmaq üçün ən asan formattır.
- Sintaksis:
- hsl(H, S%, L%)
- Aralıq:
- 0–360°, 0–100%, 0–100%
- Ən yaxşı üçün:
- palitralar, tonlar və kölgələr, mövzulaşdırma
RGB-dən HSL-ya istinad cədvəli
Ən çox istifadə olunan CSS rəngləri, RGB-dən HSL-ya çevrilib.
| Rəng | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |