Баспа палитрасы вебке әкелінгенде HSL қолдану оңай: сия қоспасын hue, saturation және lightness-пен білдірген соң, одан hover күйлерін, tint пен shade-тарды бірнеше секундта құра аласың.
CMYK-тан HSL-қа түрлендіру қалай жұмыс істейді
- CMYK пайыздарын 0–255 аралығындағы RGB арналарға түрлендір.
- Арналарды 255-ке бөліп, олардың максимумы мен минимумын ал.
- Максимум мен минимумның ортасы lightness L болады, олардың айырмасы saturation S-ты анықтайды.
- Максимумды ұстайтын арна түс дөңгелегіндегі hue H-ты градуспен анықтайды.
Жұмыс істейтін мысал
CMYK-дан RGB-ға өту қазірдің өзінде жуықтау және HSL мәндері бүтінге дөңгелектеледі. Нәтиже өте жақын сәйкес келеді, бірақ түсті басқару профилі арқылы жасалған түрлендіру емес.
CMYK және HSL түсініктемесі
CMYK деген не?
CMYK баспада қолданылатын төрт сия моделін білдіреді: cyan, magenta, yellow және key (қара), әрқайсысы 0–100% аралығында көрсетіледі. Сия жарықты шығару орнына салады (шығарады емес), сондықтан CMYK экранға қарағанда азырақ түсті қамтиды — соның нәтижесінде экрандағы ашық түстер басылғанда күңгірт көрінуі мүмкін.
- Синтаксис:
- cmyk(C%, M%, Y%, K%)
- Ауқымы:
- Сия бойынша 0–100%
- Үшін ең жақсы:
- баспа, орау, баспаға дайын өнер туындылары
HSL деген не?
HSL түсті үшке бөледі: рең (түс дөңгелегінде 0–360°), қанықтылық (қаншалықты түсті, 0–100%) және жарықтық (қаншалықты жарық, 0–100%). Әр бөлік адамдар түс туралы сипаттауымен сәйкес келетіндіктен, HSL масштабтар, реңк‑түстер және бірізді палитра жасау үшін ең ыңғайлы формат — қолмен немесе кодта.
- Синтаксис:
- hsl(H, S%, L%)
- Ауқымы:
- 0–360°, 0–100%, 0–100%
- Үшін ең жақсы:
- палитралар, реңктер мен көлеңкелер, тақырыптау
CMYK-тан HSL-қа анықтама кестесі
Ең жиі қолданылатын CSS түстері, CMYK-тан HSL-қа түрлендірілді.
| Түс | 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%) |