Как пользоваться конвертером цветов
Когда вы верстаете веб-страницу, пишете CSS или работаете по макету, перевод между цветовыми форматами — постоянная рутина. Графический редактор выдаёт HEX; в CSS удобнее HSL, чтобы легко осветлять и затемнять; для печати нужен CMYK; а фронтенд-фреймворки предпочитают переменные в RGB. Вручную это медленно и чревато ошибками, поэтому здесь все распространённые форматы собраны на одной странице: измените один — остальные подтянутся.
Что представляют собой пять форматов
- HEX (шестнадцатеричный): самая универсальная запись в вебе и графических редакторах, выглядит как
#3b82f6. По два символа на цвет, в порядке красный, зелёный, синий, каждый от 00 до ff. Первый выбор для CSS. - RGB (красный зелёный синий): разбивает цвет на три канальных значения от 0 до 255, отражая то, как экран излучает свет. CSS принимает и
rgb(59, 130, 246). - HSL (тон / насыщенность / светлота): тон — угол на цветовом круге от 0 до 360, насыщенность — яркость цвета от 0 до 100 %, светлота — от 0 до 100 %. Для задачи «сделать этот синий темнее, но сохранить тон» HSL удобнее всего: просто меняете светлоту.
- HSV / HSB (тон / насыщенность / яркость): по духу близок к HSL, но с другим определением яркости. Это тот самый «HSB», который виден в Photoshop и Sketch.
- CMYK (голубой / пурпурный / жёлтый / ключевой): субтрактивная модель печати. Излучающий RGB напечатать нельзя, типография хочет CMYK. Учтите, что значения здесь — формульный пересчёт; реальная печать зависит ещё от бумаги и краски, так что воспринимайте их как ориентир.
Несколько ловушек, в которые попадают
Светлота 50 % в HSL — это не «нормальный» цвет. Многие думают, что при светлоте 50 % получится исходный цвет, но в HSL L=50 % — это просто самая насыщенная точка для данного тона. Чистый красный #ff0000 — это hsl(0, 100%, 50%), а чистый белый — hsl(0, 0%, 100%). Чтобы построить шкалу от светлого к тёмному внутри одного тона, изменение L — самый действенный рычаг.
Обратный перевод CMYK в RGB даёт сдвиг. CMYK — четырёхканальная субтрактивная модель, RGB — трёхканальная аддитивная, их охваты не совпадают. Такие цвета CMYK, как чистый голубой и чистый пурпурный, на экране просто не отобразить, и точно так же насыщенный зелёный с экрана нельзя напечатать. Для дизайна берите за исходник экранную версию, а перед сдачей попросите типографию подтвердить цветовой сдвиг.
У короткого HEX есть условие. #fff — сокращение для #ffffff, и оно работает только когда каждая пара символов удвоена. #3b82f6 до трёх знаков не сократить.
Не забудьте про альфу. HEX бывает восьмизначным (например, #3b82f680), где последние два знака — альфа-канал; в CSS это rgba(59,130,246,0.5). Этот инструмент работает с шестизначным HEX без прозрачности; непрозрачность задавайте отдельно.
Почему важен контраст
WCAG (Руководство по обеспечению доступности веб-контента) задаёт чёткие требования к контрасту текста: обычный основной текст должен достигать минимум 4,5:1, крупный текст (от 18pt или 14pt полужирный) — минимум 3:1. Недостаточный контраст делает контент нечитаемым для людей со слабым зрением и для всех, кто смотрит в телефон при ярком солнце, а также вредит оценке доступности страницы и её поисковым показателям. Этот инструмент считает контраст между цветом текста и фона и сообщает, проходит ли он.
Частые вопросы
Почему проценты CMYK не складываются в 100 %?
Теоретически четыре канала должны давать в сумме около 100 % (это субтрактивная модель: четыре наложенные краски поглощают весь свет и дают чёрный), но на практике сумма уходит выше или ниже. Одна причина — реальные краски не идеально чистые; другая — в отрасли применяют алгоритмы вроде GCR/UCR (замена серой составляющей), чтобы оптимизировать чёрную пластину, сэкономить краску и улучшить качество печати. Этот инструмент даёт чистый формульный пересчёт, без таких технологических поправок.
В чём именно разница между HSL и HSV?
Ключевое отличие — в определении «светлоты» и «яркости». В HSL параметр L идёт от чёрного (0 %) через насыщенный цвет (50 %) к белому (100 %); в HSV параметр V идёт от чёрного (0 %) сразу к самому насыщенному цвету (100 %), без отрезка «в сторону белого». Поэтому один и тот же цвет в двух моделях даёт разные числа — проверьте, какую использует ваш софт. H, S и B в цветовом выборе Photoshop — это HSV.
Как строится цветовая шкала?
Инструмент равномерно проходит по светлоте от 95 % до 5 % в модели HSL, сохраняя тон и насыщенность, а затем переводит обратно в HEX. Получается шкала внутри одного тона от светлого к тёмному, подходящая для состояний наведения кнопок, слоёных фонов карточек и градиентов диаграмм. Если у базового цвета очень низкая насыщенность (близко к серому), шаги будут менее заметны.
Что означает коэффициент контраста 21:1?
Это теоретический максимум, достигаемый чистым чёрным на чистом белом (#000000 на #ffffff). Считается как отношение относительной яркости: (светлее + 0,05) / (темнее + 0,05). Чем выше отношение, тем сильнее контраст. Для повседневной веб-работы стремитесь к 7:1 или лучше для основного текста и как минимум к 4,5:1 для текста на кнопках.
#0000ff и #0000FF — это разное?
Нет — шестнадцатеричные цветовые коды нечувствительны к регистру. Просто команды обычно договариваются писать строчными, чтобы линтеры стилей были довольны.