HSL-də rəng seçmək rahatdır, amma stillər, dizayn təhvil vermələri və brend sənədləri hələ də HEX üzərində işləyir. Bu çevirici o boşluğu doldurur və hər hansı ton, doygunluq və işıqlıq kombinasiyası üçün altı rəqəmli kodu verir.
Necə işləyir: HSL-dən HEX-ya çevirmə
- Doyğunluğu və işıqlığı kəsrə çevir: 60% 0.6 olur.
- Xromanı hesabla C = (1 − |2L − 1|) × S — bu rəngin bozdan nə qədər uzaqda olduğunu göstərir.
- Tonu istifadə edərək xromanı qırmızı, yaşıl və mavi kanallara yerləşdir, sonra bütün üç kanalı L − C/2 ilə sürüşdür.
- Hər kanalı 255-ə vur, yuvarlaqlaşdır və iki onaltılıq rəqəm kimi yaz.
İş nümunəsi
Yuvarlaqlaşdırma son addımda, hər kanal 0–255 tam dəyərə çəkildikdə baş verir. Nəticə sənin HSL girişinə ən yaxın HEX kodudur və adətən dizayn alətinin göstərdiyi ilə eynidir.
HSL və HEX izahı
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 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-dən HEX-ya istinad cədvəli
Ən çox istifadə olunan CSS rəngləri, HSL-dən HEX-ya çevrilib.
| Rəng | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |