Конвертер цветов онлайн — HEX, RGB, HSL, OKLCH
Перевод HEX, RGB, HSL и OKLCH с превью и проверкой контраста WCAG
Работает в браузере · файлы никуда не загружаются
Цвет распознан: #1e90ff
#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)oklch(0.652 0.1901 253.21)Контраст WCAG
3.24:1
- AA, обычный текст (4.5)Не проходит
- AA, крупный текст (3)Проходит
- AAA, обычный текст (7)Не проходит
- AAA, крупный текст (4.5)Не проходит
6.49:1
- AA, обычный текст (4.5)Проходит
- AA, крупный текст (3)Проходит
- AAA, обычный текст (7)Не проходит
- AAA, крупный текст (4.5)Проходит
Что это за инструмент
HEX в таблице стилей, RGB в графическом редакторе, HSL или OKLCH в палитре — цвет постоянно меняет форму записи. Введите цвет в любом из этих форматов, и инструмент покажет HEX, RGB, HSL и OKLCH вместе, выведет превью и проверит контраст на белом и черном фоне.
Как пользоваться
- Введите цвет или воспользуйтесь пипеткой рядом с полем. Примеры:
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(0.65 0.19 250). - Посмотрите значения HEX, RGB, HSL и OKLCH ниже и скопируйте нужное.
- В разделе контраста смотрите коэффициент на белом и черном фоне и проходит ли цвет уровни AA и AAA. Если в вашем дизайне другой фон, введите его в поле Цвет фона, чтобы проверить именно эту пару.
- Цвет с прозрачностью выводится как 8-значный HEX,
rgba(),hsla()и в форме/ alpha.
Как это работает
- На вход принимаются HEX (3, 4, 6 или 8 цифр,
#необязателен), 148 имен цветов CSS Color 4 (tomato,rebeccapurple, в любом регистре) иtransparent,rgb()/rgba()(синтаксис с запятыми или пробелами, допускаются проценты),hsl()/hsla()иoklch(). - OKLCH вычисляется по стандартным матрицам из определения OKLab Бьёрна Оттоссона (2020). sRGB линеаризуется, проходит через кубические корни LMS, и получаются L, a и b; C — длина вектора (a, b), H — его угол.
- Точность вывода: один знак после запятой для HSL, четыре для L и C в OKLCH и два для H — этого достаточно, чтобы обратный перевод в HEX дал точно исходное значение.
- Ввод OKLCH вне охвата sRGB обрезается по каждому каналу до 0-255, и показывается уведомление.
- Контраст считается по относительной яркости WCAG 2.x. Отображаемый коэффициент округляется до двух знаков, но решение «проходит/не проходит» принимается по неокругленному значению, поэтому 4.499 никогда не покажется проходным 4.5.
Примеры
| Ввод | Результат |
|---|---|
#ffffff на черном |
21:1, проходит все уровни |
#777777 на белом |
около 4.48:1, не проходит AA для обычного текста, проходит для крупного |
#ff0000 |
oklch(0.628 0.2577 29.23) |
#ffffff |
oklch(1 0 0) |
Полезно знать
- Для основного текста считайте минимумом AA для обычного текста (4.5:1). Крупному тексту — от 18pt или от 14pt полужирным — для AA достаточно 3:1.
- Не передавайте смысл одним только цветом, добавляйте значок или подпись. Проверка контраста измеряет лишь разницу светлоты текста и фона.
Частые вопросы
Зачем нужен OKLCH?
В HSL два цвета с одинаковой светлотой могут выглядеть совсем по-разному по яркости, из-за чего подбирать палитру неудобно. OKLCH основан на цветовом пространстве OKLab, построенном с учетом человеческого восприятия, поэтому изменение L (светлота), C (насыщенность) или H (тон) дает довольно равномерные видимые шаги. CSS принимает его напрямую через oklch().
Что будет, если значение OKLCH выходит за пределы охвата sRGB?
Если экран в sRGB не может его показать, каждый канал RGB обрезается до диапазона 0-255 и берется ближайший цвет, о чем выводится уведомление. Это простое обрезание, а не gamut mapping с постепенным снижением насыщенности, поэтому результат может немного отличаться от задуманного.
Как вычисляется коэффициент контраста?
По формуле относительной яркости WCAG 2.x — (яркость светлого + 0.05), деленная на (яркость темного + 0.05). Значение лежит в пределах от 1:1 до 21:1. Для обычного текста нужно 4.5:1 для AA и 7:1 для AAA, для крупного — 3:1 и 4.5:1.
Как учитываются полупрозрачные цвета при расчете контраста?
Сначала они накладываются на выбранный фон (белый или черный). Черный с прозрачностью 50% на белом выглядит серым, поэтому контраст считается для этого серого.
