HEX, RGB, HSL, CMYK: что означают коды цветов и как их правильно читать
Если вы когда-либо пользовались пипеткой для определения цвета, то замечали, что результат может отображаться в разных форматах: странный набор символов #FF5733, или цифры (255, 87, 51), или проценты. Разбираемся, что означают эти аббревиатуры, чем отличаются цветовые модели и какую из них выбрать для печати, а какую - для сайта.
HEX-коды - стандарт для веб-дизайна
HEX (шестнадцатеричный код) - самый популярный формат в веб-разработке. Он выглядит как решетка и шесть символов: #RRGGBB.
- RR (Red) - красный канал.
- GG (Green) - зеленый канал.
- BB (Blue) - синий канал.
Значения варьируются от 00 до 255 в десятичной системе, но в HEX используются символы от 0 до F. Например, чистый красный - #FF0000.
Где использовать: CSS-стили, HTML-верстка, графические редакторы.
RGB - цифровое смешение света
Модель RGB (Red, Green, Blue) основана на физике свечения экрана. Каждый цвет задается тремя числами от 0 до 255. Это аддитивная модель: чем больше значение каждого канала, тем ближе цвет к белому (255,255,255 - белый, 0,0,0 - черный).
Где использовать: мониторы, телевизоры, мобильные экраны. Если вы делаете баннер для сайта - работайте в RGB.
CMYK - подготовка к печати
Модель CMYK (Cyan, Magenta, Yellow, Key/Black) - полная противоположность RGB. Это субтрактивная модель, используемая в полиграфии. Цвета задаются в процентах краски.
Важно: экран не может точно передать CMYK, так как он светится, а не отражает свет. Поэтому если вы готовите макет для типографии, конвертируйте цвета заранее, иначе напечатанный результат может отличаться от того, что вы видите на мониторе.
HSL - интуитивно понятная модель
HSL (Hue, Saturation, Lightness) - то, что нужно дизайнерам для ручной подборки оттенков.
Здесь:
- Hue (Оттенок): положение на цветовом круге (0° - красный, 120° - зеленый, 240° - синий).
- Saturation (Насыщенность): интенсивность цвета (от серого до яркого).
- Lightness (Светлота): близость к белому или черному.
Эта модель удобна для создания градиентов и теней.
Таблица соответствия форматов
| Цвет | HEX | RGB | CMYK |
|---|---|---|---|
| Красный | #FF0000 | 255,0,0 | 0%,100%,100%,0% |
| Зеленый | #00FF00 | 0,255,0 | 100%,0%,100%,0% |
| Синий | #0000FF | 0,0,255 | 100%,100%,0%,0% |
| Черный | #000000 | 0,0,0 | 0%,0%,0%,100% |
Как переводить цвета между форматами
Вручную считать HEX в RGB сложно, поэтому используйте автоматические конвертеры. Наш сервис «Пипетка онлайн - Picksee» показывает цвет сразу во всех популярных форматах: достаточно навести пипетку на пиксель, и вы увидите HEX, RGB и HSL. Это экономит время и исключает ошибки округления.
Заключение
Понимание цветовых моделей помогает избежать типичных ошибок: не отправить в печать яркую RGB-картинку и не использовать CMYK для фона сайта. Сохраняйте шпаргалку и пользуйтесь умными инструментами для работы с цветом.