Пренасянето на печатна палитра в уеб е по-лесно в HSL: щом сместа мастила е изразена като нюанс, насищане и светлота, можеш да изграждаш hover състояния, тонове и сенки за секунди.
Как работи преобразуването от CMYK към HSL
- Преобразувай CMYK процентите в RGB канали между 0 и 255.
- Раздели каналите на 255 и вземи техния максимум и минимум.
- Средното между максимум и минимум е светлотата L, а разликата им определя насищането S.
- Каналът, който държи максимума, определя нюанса H в градуси на цветовото колело.
Работещ пример
Стъпката CMYK → RGB вече е приближение и HSL стойностите се закръгляват до цели числа. Резултатът е много близък, но не е цветово-мениджвано преобразуване.
CMYK и HSL обяснени
Какво е CMYK?
CMYK е моделът с четири мастила, използван в печата: cyan, magenta, yellow и key (black), всеки като процент от 0 до 100. Мастилото изважда светлина, вместо да я излъчва, затова CMYK покрива по-малко цветове от екрана — затова ярките екранни цветове често изглеждат по-матови при печат.
- Синтаксис:
- cmyk(C%, M%, Y%, K%)
- Обхват:
- 0–100% за мастило
- Подходящо за:
- печат, опаковки, готови за преса файлове
Какво е HSL?
HSL разделя цвета на hue (0–360° на цветното колело), saturation (насколько е наситен, 0–100%) и lightness (колко е светъл, 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%) |