Инструмент
Конвертер цветов
Переводит цвет между HEX, RGB, HSL, HSV и OKLCH и проверяет контрастность текста по WCAG 2. Понимает любую CSS-запись, включая названия цветов.
Работает в браузере, данные никуда не отправляются
Текст на белом
Текст на чёрном
Пример текста 16 px
Какую запись выбрать
- HEX
#0a7556— коротко, понятно любому инструменту. Восемь цифр (#0a755680) добавляют прозрачность. - HSL — тон, насыщенность, светлота. Удобно делать оттенки, но «одинаковая» светлота разных тонов на глаз совсем не одинаковая: жёлтый при
50%кажется гораздо светлее синего. - OKLCH — светлота, хрома и тон в перцептивно равномерном пространстве OKLab. Если поменять только тон, видимая яркость почти не изменится. Поддерживается всеми современными браузерами, хорошо подходит для палитр и тем.
Контраст по WCAG
Отношение считается по относительной яркости двух цветов: (L1 + 0.05) / (L2 + 0.05), от 1:1 до 21:1.
| Уровень | Обычный текст | Крупный текст (от 24 px или 18,66 px жирным) |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Для элементов интерфейса и значимой графики, например рамок полей и иконок, нужно не меньше 3:1.