У каждого цвета своя страница с шестью форматами — HEX, RGB, HSL, HSV, OKLCH и CMYK, — а также контрастом по WCAG к чёрному и белому, шкалой оттенков и тонов и гармониями: комплементарной, аналоговой и триадной. Это самый быстрый путь от одного фирменного цвета к рабочему набору.

Как выбрать цвет, который реально читается

WCAG 2.1 требует контраст не ниже 4,5:1 для основного текста, 3:1 для крупного текста и 3:1 для границ и иконок интерфейса. На каждой странице показан контраст и к чёрному, и к белому — сразу видно, годится ли цвет для текста, для фона или только для декора.

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

Чем HEX отличается от OKLCH?

HEX — это тройка sRGB в шестнадцатеричной записи: удобно машине, но два кода с одинаковым числовым расстоянием могут выглядеть совершенно по-разному. OKLCH описывает цвет так, как его воспринимает человек: светлота, насыщенность, тон. Светлота вынесена отдельно, поэтому цвет можно затемнить, не «уводя» оттенок — именно поэтому OKLCH гораздо удобнее для построения шкал.

Можно ли посмотреть цвет, которого нет в списке?

Да. Список — это подобранная отправная точка, но работает любой корректный шестизначный HEX: откройте /color/ и код, например /color/3b82f6.

Что такое оттенок, тень и тон?

Оттенок (tint) — цвет, смешанный с белым, тень (shade) — с чёрным, тон (tone) — с серым. Шкалы, построенные так, сохраняют видимое родство цветов, и именно это делает интерфейс целостным.

Можно ли использовать эти цвета в коммерческих проектах?

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