Точная опорная ступень
Отображаемое шестизначное резервное значение sRGB занимает ближайшую целевую светлоту и сохраняется без изменений.
Назад к каталогу цветов
Перцептивная шкала UI
Превратите один цвет в рабочую систему.
Введите HEX, RGB, HSL, HWB, OKLCH или имя CSS-цвета. Hexees сохранит исходный цвет как ближайшую опорную ступень и построит вокруг него шкалу 50–950 в OKLCH.
01 / 11 измеренных ступеней
Шкала, которую можно проверить, а не только рассматривать.
Каждая строка показывает отображаемое значение sRGB, формулу OKLCH и контраст чёрного или белого текста. Исходное резервное значение сохраняется без скрытой подмены.
02 / Макет интерфейса
Посмотрите, как система работает в UI.
Макет назначает ступени холсту, поверхности, границе, тексту, приглушённому содержимому и одному действию. Это начальная композиция, а не гарантия доступности.
COLOR SYSTEM / #663399
Цвет с ясной иерархией.
Полезная шкала отделяет структуру от акцента ещё до появления декоративных деталей.
Проверить систему03 / CSS
Скопируйте все одиннадцать CSS-токенов.
Экспорт использует стабильные имена 50–950 и шестизначные резервные значения sRGB для широкой поддержки браузерами.
:root {
--color-brand-50: #F9F1FF;
--color-brand-100: #EFE0FF;
--color-brand-200: #DDC3FF;
--color-brand-300: #C19DF1;
--color-brand-400: #A579DB;
--color-brand-500: #8957C0;
--color-brand-600: #663399;
--color-brand-700: #552283;
--color-brand-800: #3D0D65;
--color-brand-900: #270045;
--color-brand-950: #120026;
}04 / Метод и ограничения
Измеримо, детерминированно и честно о цветовом охвате.
Шаги в OKLCH
Целевые ступени светлоты сохраняют тон опорного цвета, а цветность меняется по огибающей светлоты. Значения вне охвата sRGB преобразуются по алгоритму CSS Color 4 и помечаются.
Проверка пар, не сертификация
Для каждого отображаемого значения рассчитывается контраст с чёрным и белым. Готовый компонент всё равно нужно проверить по тексту, графике, состояниям и индикаторам клавиатурного фокуса.