Çap palitrasını vebə gətirmək HSL-də daha asandı: mürəkkəb qarışığı hue, saturation və lightness kimi ifadə olunduqdan sonra ondan hover vəziyyətləri, tints və shades saniyələr içində yarada bilərsən.
Necə işləyir: CMYK-dən HSL-ya çevirmə
- CMYK faizlərini 0–255 arası RGB kanallarına çevir.
- Kanalları 255-ə böl və onların maksimum və minimumunu götür.
- Maksimum və minimumun ortalaması lightness L-dir, aralarındakı fərq isə saturation-u idarə edir.
- Maksimumu tutan kanal rəng dairəsində hue H-i dərəcə ilə müəyyən edir.
İş nümunəsi
CMYK-dan RGB-yə addımı artıq bir yaxınlaşmadır və HSL dəyərləri tam ədədlərə yuvarlaqlaşdırılır. Nəticə çox yaxın uyğunluqdur, color-managed çevirmə deyil.
CMYK və HSL izahı
CMYK nədir?
CMYK çapda istifadə olunan dörd mürəkkəb modelidir: cyan, magenta, yellow və key (qara), hər biri 0–100% intervalında. Mürekkeb işığı əks etdirmək əvəzinə əlir, ona görə CMYK ekranın əhatə etdiyi rənglərin bir qismini göstərə bilir — buna görə də parlaq ekran rəngləri çap edildikdə solğun görünə bilər.
- Sintaksis:
- cmyk(C%, M%, Y%, K%)
- Aralıq:
- Hər mürəkkəb üçün 0–100%
- Ən yaxşı üçün:
- çap, qablaşdırma, çap üçün hazır artwork
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
CMYK-dən HSL-ya istinad cədvəli
Ən çox istifadə olunan CSS rəngləri, CMYK-dən HSL-ya çevrilib.
| Rəng | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |