HSL rəngi insanların danışdığı şəkildə təsvir edir: hansı ton, nə qədər rəngarəng, nə qədər işıqlı. HEX kodunu HSL-ə çevirmək rəngi düzəldə biləcəyin formaya — onu yüngülləşdirmək, söndürmək və ya ondan tam bir miqyas qurmaq — tez çevirir.
Necə işləyir: HEX-dən HSL-ya çevirmə
- HEX kodunu RGB-yə çevir və hər kanalı 255-ə böl, beləliklə hər üçü 0 ilə 1 arasında olacaq.
- Üç dəyərin ən böyüyünü və ən kiçiyini tap. Onların ortası işıqlıq L-dir.
- Onlar arasındakı fərq doymasını S ilə müəyyən edir: açıq rənglər üçün onu (2 − max − min)-ə, qaralar üçün isə (max + min)-ə böl.
- Maksimumu saxlayan kanal ton H-ı müəyyən edir — qırmızı 0°, yaşıl 120°, mavi 240° — və digər iki kanal tonu o seqment daxilində yerləşdirir.
İş nümunəsi
Riyaziyyat dəqiqdir, amma HSL dəyərləri adətən dərəcələrə və faizlərə yuvarlaqlaşdırılır. Yenidən çevirmə nəticəsində orijinala bir-iki RGB addımı uzaq düşə bilər — praktikada görünməzdir, amma rəngləri təkrar-təkrar round-trip edirsənsə bunu bilmək faydalıdır.
HEX və HSL izahı
HEX nədir?
HEX kodu qabaqcıl # ilə başlayan, qırmızı, yaşıl və mavi kanalları saxlayan altı simvollu onaltılıq ədəddir. Hər cüt simvol bir kanalı təmsil edir, 00 (heç biri) dən FF (tam) qəədər, bu da RGB ilə eyni 16.7 milyon rəngi daha qısa notasiya ilə verir. HEX CSS-də, dizayn alətlərində və brend qaydalarında standartdır.
- Sintaksis:
- #RRGGBB
- Aralıq:
- Hər kanal üçün 00–FF
- Ən yaxşı üçün:
- CSS, dizaynın təhvil verilməsi, brend qaydaları
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
HEX-dən HSL-ya istinad cədvəli
Ən çox istifadə olunan CSS rəngləri, HEX-dən HSL-ya çevrilib.
| Rəng | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |