Перенести друковану палітру в інтернет легше через HSL: коли твій мікс фарб виражений як hue, saturation і lightness, ти за секунди можеш побудувати hover-стани, тоні та відтінки.
Як працює конвертація CMYK у HSL
- Перетвори відсотки CMYK у канали sRGB від 0 до 255 з профілем Coated FOGRA39.
- Поділи канали на 255 і знайди їхній максимум та мінімум.
- Середнє між максимумом і мінімумом — це світлість L, а їхня різниця визначає насиченість S.
- Канал з максимумом визначає hue H у градусах на кольоровому колі.
Приклад роботи
Крок від CMYK до RGB використовує стандартний профіль Coated FOGRA39, тому інші профілі CMYK (наприклад, від твоєї друкарні) дають інші числа. Значення 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(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%) |