Конвертер цветов: HEX, RGB, HSL, OKLCH и контраст

Переводите цвет между HEX, RGB, HSL, HSV, CMYK и OKLCH и проверяйте контраст с белым и чёрным по WCAG.

Цвет (HEX, rgb(), hsl() или oklch())

HEX

#3451d1

RGB

rgb(52 81 209)

HSL

hsl(229 63% 51%)

HSV

hsv(229, 75%, 82%)

CMYK

cmyk(75%, 61%, 0%, 18%)

OKLCH

oklch(49.5% 0.199 268.2)

Контраст текста по WCAG

AaНа белом: 6,47:1 — подходит для обычного текста (AA)

AaНа чёрном: 3,24:1 — только для крупного текста (AA)

AaНа фоне #fff4e5: 5,95:1 — подходит для обычного текста (AA)

Свой фон для проверки контраста

Как пользоваться

Введите цвет в любом формате — #3451d1, rgb(52 81 209), hsl(229 63% 51%) или oklch(51% 0.2 268) — либо выберите его в палитре. Калькулятор покажет тот же цвет во всех форматах и проверит, хорошо ли он читается на белом и чёрном фоне.

Форматы

HEX — стандарт для веба и дизайна; можно с прозрачностью: #3451d180.
RGB — красный, зелёный, синий от 0 до 255.
HSL и HSV — тон (0–360°), насыщенность и светлота (или яркость): удобно подбирать оттенки.
CMYK — для печати. Перевод здесь упрощённый, без цветового профиля: для типографии берите значения из профиля печати.
OKLCH — современный формат CSS: светлота в нём соответствует тому, как воспринимает глаз, поэтому палитры получаются ровнее.

Контраст по WCAG

Для доступности текст должен заметно отличаться от фона. По стандарту WCAG 2.x:

4,5:1 — минимум для обычного текста (уровень AA);
3:1 — для крупного текста (от 24 px или 19 px жирным);
7:1 — повышенный уровень AAA.

Чтобы проверить контраст на своём фоне (например, текст на цветной плашке), введите цвет фона в поле под проверками или выберите его пипеткой.

Например, #777777 на белом — 4,48:1: этого чуть-чуть не хватает для обычного текста.

Частые вопросы

Почему цвет из OKLCH иногда меняется при переводе в HEX? Часть цветов OKLCH не помещается в цветовой охват sRGB: такие цвета приводятся к ближайшему возможному.