Конвертер цветов: HEX, RGB, HSL, CMYK, OKLCH

Записи цвета и когда какую использовать

HEX

#rrggbb или #rrggbbaa с альфа-каналом. В короткой форме #rgb каждая цифра удваивается. Стандарт в дизайн-инструментах и CSS.

RGB

Красный, зелёный и синий от 0 до 255. Современный CSS пишет rgb(42 157 143 / 50%); старая запись rgba(42, 157, 143, 0.5) по-прежнему работает везде.

HSL

Тон в градусах, насыщенность и светлота в процентах. Легко править вручную, но светлота 50% выглядит по-разному для разных тонов: жёлтый кажется намного светлее синего.

HSV / HSB

Тон, насыщенность и значение (или яркость). Модель, на которой построены палитры в Photoshop, Figma и большинстве дизайн-программ. В CSS недопустима.

HWB

Тон плюс доля белого и чёрного в смеси. Допустим в CSS начиная с Color Level 4 и удобен для пастельных или приглушённых вариантов.

CMYK

Проценты голубой, пурпурной, жёлтой и чёрной (key) краски для печати. Значения здесь рассчитываются по стандартной аппаратно-независимой формуле; реальный цвет на печати зависит от бумаги и цветового профиля принтера.

OKLCH

Светлота, хроматичность и тон в перцептивно равномерном пространстве. Одинаковая светлота выглядит одинаково светлой для всех тонов, поэтому это лучший выбор для цветовых шкал и доступных палитр. Поддерживается всеми современными браузерами.

Имена CSS

148 ключевых слов вроде tomato, rebeccapurple и slategray. Конвертер показывает ближайшее и отмечает, если совпадение точное.

HEX в RGB вручную

Цвет HEX — это три пары шестнадцатеричных цифр. Разбейте #2a9d8f на 2a, 9d и 8f и переведите каждую пару: 2a = 2 × 16 + 10 = 42, 9d = 9 × 16 + 13 = 157, 8f = 8 × 16 + 15 = 143, то есть цвет равен rgb(42, 157, 143). В обратную сторону разделите каждый канал на 16: частное даёт первую цифру, остаток — вторую. 8-значный HEX добавляет четвёртую пару для альфа-канала, где ff означает полную непрозрачность, а 80 примерно 50%.

Преобразования между HEX, RGB, HSL, HSV и HWB точны с точностью до округления. CMYK по своей природе приблизителен, а цвета OKLCH, выходящие за пределы диапазона sRGB, который может показать экран, возвращаются в него снижением хроматичности при сохранении заданных светлоты и тона.

Какую запись использовать в CSS?

Все современные браузеры понимают HEX, rgb(), hsl(), hwb() и oklch(), так что выбор сводится к тому, что проще читать и поддерживать. HEX компактен и именно его передают дизайнеры, поэтому он остаётся надёжным выбором для разовых значений. HSL удобен, когда цвет нужно слегка подправить вручную, например сделать чуть светлее для состояния hover.

Для дизайн-системы всё чаще лучше подходит OKLCH. Его светлота перцептивна, поэтому набор фирменных цветов с одинаковым значением L действительно выглядит одинаково светлым, а целую шкалу можно получить, меняя одно число. Он также описывает более яркие цвета широкого охвата экранов P3, чего не умеют HEX и rgb(). Учтите, что HSV, HSB и CMYK недопустимы в CSS: они здесь для переноса значений между дизайн-инструментами и печатью.

Светлые, тёмные и приглушённые оттенки и гармонии

Светлый оттенок (tint) смешивает цвет с белым, тёмный (shade) — с чёрным, а приглушённый (tone) — с серым. Три ряда отходят от исходного цвета шагами по 10%, что даёт состояния hover, рамки и фоны, которые явно сочетаются.

Гармонии поворачивают тон по цветовому кругу: комплементарный — противоположный тон, аналогичные — соседние на 30° в обе стороны, триада — три тона через 120°, расщеплённая комплементарная — два тона рядом с противоположным, тетрада — четыре тона через 90°. Это отправная точка для акцентов, а не правило: всегда проверяйте цвета текста в проверке контрастности. Чтобы составить палитру по фотографии, используйте генератор цветовой палитры.