Палитра цветов с кодами HEX, RGB и OKLCH

Пипетка на главной странице начинает с фотографии: вы открываете изображение и снимаете с него пиксели. Эта страница начинает со значения цвета. Она нужна, когда HEX уже известен — из брендбука, со скриншота или от коллеги — и требуются преобразования, вариации, проверки доступности и фрагменты кода, которые к нему прилагаются.

HEX из трёх, четырёх, шести или восьми знаков, с решёткой и без; rgb() и rgba() через запятые или пробелы; hsl() и hsla(); и любое из 148 ключевых слов цвета CSS, например rebeccapurple или cornflowerblue. Если значение не распознано, текущий цвет остаётся прежним, а не сбрасывается.

HSL не перцептивно равномерно: два цвета с одинаковой светлотой по HSL могут выглядеть совершенно по-разному по яркости, и именно поэтому палитры, построенные в HSL, выходят неровными. OKLCH это исправляет и поддерживается всеми актуальными браузерами. Вариации, гармонии и подсказка доступного цвета на этой странице по этой причине считаются в OKLCH.

Это стандартная некалиброванная формула — та же, что в большинстве веб-инструментов, — и для общего представления её достаточно. Это не преобразование с управлением цветом: настоящей печати нужен профиль ICC под конкретную машину и бумагу. Считайте здешний CMYK отправной точкой для разговора с типографией, а не окончательной спецификацией.

Это расстояние CIEDE2000 между двумя цветами, мера того, насколько по-разному они выглядят. Меньше 1 разницу не видит никто. Около 2 внимательный зритель заметит её, если поставить цвета рядом. Больше 10 это уже разные цвета. Эта мера отражает восприятие гораздо лучше, чем сравнение значений RGB.

По формуле WCAG 2.1: относительная яркость каждого цвета в линейном свете, затем (светлее + 0,05) / (темнее + 0,05). Для AA нужно 4,5:1 для основного текста и 3:1 для крупного текста или элементов интерфейса; для AAA — 7:1 и 4,5:1. Коэффициент полностью игнорирует тон, поэтому два цвета могут выглядеть очень разными и всё равно не пройти.

Нет. Расчёты цвета загружаются вместе со страницей в виде JavaScript и выполняются целиком в вашем браузере. При смене цвета не происходит ни одного обращения к серверу, ничего не записывается в журнал, и после загрузки страница работает с отключённой сетью.

Да. Значение цвета не охраняется авторским правом, и никакой лицензии здесь ни на чём нет. Построенные шкалы, гармонии и фрагменты кода — ваши, для любого проекта. Стоит помнить только, что конкретный цвет в сочетании с определённым логотипом или категорией товаров может охраняться как часть зарегистрированного товарного знака, так что копирование точного фирменного цвета конкурента — вопрос скорее юридический, чем технический.

Вставьте HEX-код в поле вверху страницы: строка RGB сразу покажет результат, а ниже появятся ещё 33 формата. Вручную это тоже просто: разбейте код на три пары и переведите каждую из шестнадцатеричной системы в десятичную. Например, #10A99B: 10 → 16, A9 → 169, 9B → 155, то есть rgb(16, 169, 155).

По WCAG 2.1 основной текст должен контрастировать с фоном не меньше чем 4,5:1 (уровень AA), а крупный текст — от 24 px или от 18,66 px полужирным — и элементы интерфейса не меньше чем 3:1. Для уровня AAA нужно 7:1 и 4,5:1. Чёрный на белом даёт максимум, 21:1; если пара не проходит, проверка контраста предложит ближайший подходящий цвет текста.

Откройте раздел «Симулятор дальтонизма»: он показывает, как выглядит цвет при протанопии, дейтеранопии, тританопии и ахроматопсии, и для каждого типа зрения считает расстояние ΔE2000 до дополнительного цвета. Если оно ниже примерно 10, не делайте цвет единственным сигналом: добавьте значок, форму или подпись. Особенно это касается пары «красный — зелёный».