Пакет цветовых токенов бренда — шкала HEX HSL OKLCH
Соберите пакет цветовых токенов бренда из одного базового цвета в браузере. Шаги: выберите базу (HEX или пипетка), посмотрите HEX/RGB/HSL/OKLCH, постройте шкалу 50–950 с парами чёрного/белого текста на каждом шаге, затем скопируйте CSS‑переменные или JSON. При открытии загружается пример синего #2563eb — ничего не отправляется.
Как это работает
Введите или выберите один базовый цвет бренда. Страница показывает HEX, RGB, HSL и OKLCH, затем строит 11‑шаговую шкалу (50–950) с превью UI. На каждом образце — рекомендуемый чёрный или белый текст и коэффициент контраста. Скопируйте CSS‑переменные или JSON, когда ramp подходит — всё локально.
Правила, которые стоит знать
Чего ожидать от шкалы, цветовых пространств, подсказок контраста и конфиденциальности.
- Шаг 500 — ваша база. Ниже осветление смешением с белым, выше — затемнение с чёрным (линейное смешение в sRGB).
- Блок базы перечисляет HEX, RGB, HSL и OKLCH одного цвета. OKLCH через sRGB → linear → OKLab для сопоставления с современным CSS.
- Каждый образец рекомендует чёрный или белый текст — тот, что даёт больший контраст на фоне. Коэффициенты по относительной яркости WCAG; метки AA лишь ориентир.
- Конфиденциальность: генерация, превью и копирование локально в этой вкладке — цвета бренда не загружаются.
Пример
Загрузите пример (#2563EB). Блок пространств показывает HEX, RGB, HSL и OKLCH базы; сетка шкалы 50–950 с рекомендуемым чёрным или белым текстом и коэффициентом контраста. Копировать CSS даёт :root { --color-50: …; … --color-950: …; } для вашей таблицы стилей.
Когда подходит
- Design system: от одного HEX бренда — согласованная ramp 50–950 и CSS‑переменные для компонентов.
- Тёмная тема: светлые шаги (50–300) для поверхностей, глубокие (700–950) для текста на фирменном цвете.
- Передача разработчикам: JSON‑токены или CSS custom properties вместо переписывания HEX со скриншота.
Frequently asked questions
Покидает ли мой цвет браузер?
Нет. Расчёт и экспорт выполняются в этой вкладке — цвета не уходят на сервер.
Как строится шкала 50–950?
Шаг 500 совпадает с вашим базовым цветом. Более светлые (50–400) смешиваются с белым, более тёмные (600–950) — с чёрным. Смешение линейное в sRGB, чтобы оттенок оставался стабильным.
Что означают колонки контраста?
Каждый образец сравнивает чёрный и белый текст на этом фоне и выбирает больший контраст WCAG. Подписи показывают коэффициент и вероятное соответствие AA для обычного текста (4,5:1) или крупного (3:1).
Что входит в Копировать CSS и JSON?
Копировать CSS выводит пользовательские свойства :root (--color-50 … --color-950). Копировать JSON — ту же шкалу плюс пространства базы в структурированном виде для design tokens.
Когда нужна проверка контраста?
Это быстрые подсказки чёрный/белый на каждом шаге. Для своих пар foreground/background или точных уровней WCAG откройте проверку контраста WCAG и вставьте HEX любого образца.
Related tools
Вопросы и отзывы
Что-то неясно, сломано или отсутствует? Напишите сообщение ниже — мы читаем каждую заметку об этих инструментах.