Конвертер цветов (HEX, RGB, CMYK)
Частые вопросы
Есть ли у цветов общепринятые названия?
У части оттенков есть – в CSS их около 140 (crimson, teal, coral), в системе RAL названия привязаны к номерам вееров для краски, в Pantone – к каталогу для печати. Одно и то же название в разных системах означает разные оттенки, поэтому для точной передачи цвета между дизайнером, типографией и вёрсткой надёжнее указывать код, а не имя.
Как проверить контраст текста и фона на сайте?
Контрастность текста и фона – не только вопрос эстетики, но и требование доступности: слишком близкие по яркости цвета плохо читаются людьми с пониженным зрением и на экранах при ярком солнце. При подборе пары «текст – фон» стоит сверять не только оттенок, но и разницу в светлоте – третье значение в HSL.
Почему цвет на экране и после печати выглядит по-разному?
RGB описывает цвет как свет, который излучает экран, смешивая красный, зелёный и синий лучи. CMYK описывает цвет как краску на бумаге, которая, наоборот, поглощает часть спектра. Диапазон цветов, доступных в RGB, шире, чем диапазон, который физически можно получить смешением реальных типографских красок, – поэтому часть ярких экранных оттенков в принципе не имеет точного аналога в печати, и конвертер показывает ближайшее возможное приближение, а не точное соответствие. Поэтому перевод цвета из RGB в CMYK всегда остаётся приближением, а итоговый оттенок на бумаге дополнительно зависит от принтера и типа бумаги.
Что означают буквы в HSL?
H – оттенок (hue), задаёт сам цвет по кругу от 0 до 360 градусов. S – насыщенность (saturation) в процентах. L – светлота (lightness) в процентах: 0% даёт чёрный, 100% – белый, независимо от первых двух значений.
Можно ли ввести название цвета словом, а не кодом?
Ограниченный набор именованных цветов (например, red, white) поддерживается в CSS-стандарте, но для точного и предсказуемого результата надёжнее вводить конкретный код – HEX или RGB.
Одинаковый ли HEX-код в разных графических редакторах даёт одинаковый цвет?
Код один и тот же, но фактическое отображение зависит от калибровки и цветового профиля монитора – на разных экранах один HEX может выглядеть чуть теплее или холоднее.
Строит ли инструмент готовую палитру автоматически?
Нет, форма принимает и пересчитывает один цвет – она не строит готовую палитру цветов с названиями автоматически и не подбирает контрастную пару. Взять точный цвет с изображения, а не вводить код вручную, поможет пипетка цвета.
Введите цвет в любом формате – инструмент пересчитает его в остальные распространённые системы: HEX, RGB, HSL, CMYK и другие. Поле принимает значение сразу при вводе.
Форматы записи цвета
| Формат | Пример | Где используется |
|---|---|---|
| HEX | #3A7BD5 | CSS, вёрстка сайтов |
| RGB | rgb(58, 123, 213) | CSS, программирование, работа с прозрачностью (RGBA) |
| HSL | hsl(214, 64%, 53%) | Подбор оттенков одного тона по яркости и насыщенности |
| CMYK | 73%, 42%, 0%, 16% | Полиграфия и печать, где смешиваются краски, а не свет |
HEX, RGB и HSL описывают свет экрана и взаимно пересчитываются без потерь. CMYK устроен иначе – он про краску на бумаге, поэтому пересчёт из RGB в CMYK всегда приблизительный: точный цвет печати зависит ещё и от принтера, бумаги и калибровки.
Как подобрать сочетание цветов
Введённый цвет – это отправная точка, а не готовая палитра. Классический подход к сочетаниям строится на цветовом круге:
- Монохромное сочетание – один тон, разная яркость и насыщенность. В формате HSL для этого достаточно менять только второе и третье значение, оставляя первое (оттенок) неизменным.
- Контрастное сочетание – цвета с противоположных сторон круга, для акцентов и высокой заметности.
- Аналоговое сочетание – соседние на круге цвета, для спокойной и однородной палитры.
Смежный инструмент
Если исходный цвет нужно не ввести вручную, а определить с готового изображения или скриншота, используйте пипетку цвета – она выдаёт HEX, RGB и HSL сразу по клику на пиксель.