Выберите цвет и мгновенно получите его значения HEX, RGB, CMYK, HSV и HSL

Палитра цветов — бесплатный онлайн-инструмент, который позволяет выбрать цвет и мгновенно увидеть его значение в пяти форматах: HEX, RGB, CMYK, HSV и HSL. Выберите цвет на палитре или вставьте значение HEX или RGB и скопируйте нужный формат одним кликом. Есть и проверка контраста WCAG: протестируйте цвет текста на цвете фона и убедитесь, что сочетание доступно. Всё работает в браузере, бесплатно и без регистрации.

HEX

RGB

CMYK

HSV

HSL

Color

WCAG contrast checker

Check that a text color is readable on a background color. WCAG 2.1 requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.

Text color (HEX)

Background color (HEX)

Contrast ratio

Sample text: check how readable this is

AA normal text (4.5:1)
AA large text (3:1)
AAA normal text (7:1)
AAA large text (4.5:1)

Как пользоваться палитрой цветов

Выберите цвет на палитре или введите значение HEX или RGB, чтобы увидеть соответствующий цвет.
Скопируйте любой из пяти форматов кнопкой копирования рядом с ним.
Прокрутите до проверки контраста, чтобы протестировать цвет текста на цвете фона и увидеть, каким уровням WCAG он соответствует.

Какой формат цвета выбрать?

Формат	Лучше всего для	Пример
HEX	Сайты, CSS, инструменты дизайна	#f4ae00
RGB	Экраны, CSS с прозрачностью (rgba)	rgb(244, 174, 0)
CMYK	Печать: брошюры, упаковка, визитки	0%, 29%, 100%, 4%
HSV	Палитры в графических программах	hsv(43°, 100%, 96%)
HSL	CSS-палитры: светлее и темнее в пределах одного оттенка	hsl(43°, 100%, 45%)

Частые сценарии

Подобрать фирменный цвет, когда от дизайнера есть только HEX-код.
Перевести веб-цвет в CMYK перед отправкой файлов в печать.
Проверить, что текст кнопок и основной текст соответствуют требованию контраста WCAG 2.1 в 4.5:1.
Собрать CSS-палитру: сохраняйте оттенок и насыщенность, меняйте только светлоту HSL.

Вопросы и ответы о палитре цветов

Палитра цветов бесплатная?

Да, палитра цветов и проверка контраста полностью бесплатны, без регистрации и без ограничений.

Чем отличаются HEX, RGB, CMYK, HSV и HSL?

HEX и RGB описывают одни и те же экранные цвета в разной записи: HEX — компактная форма для CSS и инструментов дизайна, RGB перечисляет значения красного, зелёного и синего. CMYK описывает покрытие краской для печати. HSV и HSL описывают цвет через оттенок, что удобно для построения палитр и настройки яркости.

Как перевести HEX в RGB?

Вставьте значение HEX в поле HEX — значение RGB сразу появится в поле RGB. Конвертация работает и в обратную сторону: введите значение RGB и получите HEX-код.

Какой коэффициент контраста нужен для доступности?

Уровень AA WCAG 2.1 требует коэффициента не ниже 4.5:1 для обычного текста и 3:1 для крупного (от 18pt, или 14pt жирным). Уровень AAA требует 7:1 для обычного текста. Проверка контраста на этой странице показывает, каким уровням соответствует ваша пара цветов.

Можно ли перевести экранный цвет в печатный?

Да, инструмент показывает значение CMYK любого выбранного цвета. Учтите, что конвертация в CMYK приблизительна: итоговый печатный цвет зависит ещё от профиля принтера и бумаги, поэтому для критичных фирменных цветов всегда запрашивайте печатную пробу.

Палитра цветов