Пренасянето на печатна палитра в уеб е по-лесно в HSL: щом сместа мастила е изразена като нюанс, насищане и светлота, можеш да изграждаш hover състояния, тонове и сенки за секунди.
Как работи преобразуването от CMYK към HSL
- Превърни CMYK процентите в sRGB канали между 0 и 255 с профила Coated FOGRA39.
- Раздели каналите на 255 и вземи техния максимум и минимум.
- Средното между максимум и минимум е светлотата L, а разликата им определя насищането S.
- Каналът, който държи максимума, определя нюанса H в градуси на цветовото колело.
Работещ пример
Стъпката CMYK към RGB използва стандартния профил Coated FOGRA39, затова други CMYK профили (например от твоята печатница) дават различни числа. 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(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |