Приложение Endel

https://sidorkin.dev/treem – гайд по продуктовым метрикам

Продуктовая колористика — инструментарий

Термины
Hue — оттенок, «какой это цвет», положение на цветовом круге
Chroma — чистота/интенсивность цвета без примеси серого (используется в OKLCH)
Lightness — светлота; в HSL неперцептивная(т.е изменения параметров неравномерно воспринимаются глазом), в OKLCH перцептивная
Brightness/Value (HSV) — насколько цвет яркий или тусклый. При 100% — максимально яркий оттенок, при уменьшении тускнеет но остаётся насыщенным, при 0 → чёрный
Saturation (HSL/HSV) — насыщенность относительно серого; при 0 → чистый серый
REC.2020 — стандарт для UHD/4K/8K, охват почти всего видимого спектра, 10/12 бит на канал

Инструменты
Hueplot — диагностический, не для генерации палитр
• Наглядно показывает, как цвет живёт внутри разных моделей
• Можно ротировать модели, смотреть градиенты, сравнивать гамуты(color gamut — диапазон цветов, который способно воспроизвести конкретное устройство или отобразить определённое цветовое пространство)
• Можно экспортировать картинку изучаемой модели

Foundation: Color Generator — Figma-плагин
• Строит растяжки через LAB/LCH (perceptual-подход)
• Профили генерации — например, Atlassian Neutral для длинной растяжки с выходом в белый
• После генерации: проверить контрастность → дотюнить руками → дотянуть в чёрный
• Показывает contrast ratio к белому и к чёрному прямо в интерфейсе
• Выгружает в стили или variables, можно сразу нэймить ячейки

CSS.Land LCH — мини-инструмент, работает с LCH, RGB, P3, REC-2020
• Ползунки → мгновенный результат → готовый CSS-код
• Удобен для точечной работы с конкретным цветом

OKLCH Color Picker — один из самых мощных
• Работает с OKLCH и LCH, можно включить P3
• Режим построения палитры: несколько цветов × несколько тонов, нэйминг, выгрузка в нужном формате
• Проверка через WCAG или APCA (к бэкграунду или к тексту)
• Есть 3D-графики, туториал на YouTube, статья про OKLCH

Минус: фоновое разделение на светлую/тёмную тему в режиме растяжек сделано некорректно

Atmos — платформа для командной работы
• Генератор гармоничных цветов (комплементарные, аналоговые, триады)
• Работает в LCH/OKLCH, проверка WCAG 2 и WCAG 3
• Симулятор зрительных патологий
• Экспорт в Figma, CSS, Tailwind, JavaScript
• История версий — можно откатиться к предыдущим сборкам

Pallete App — калибровка готовых растяжек
• Загрузка через JSON (шаблон), доработка через ручное перемещение узлов
• Показывает тона послойно, помогает сделать переходы плавнее

Минус: нет Undo — каждое изменение необратимо

ColorBox
• Поддержка OKLCH и выбор гамута (sRGB / P3)
• Управление кривыми (Curve) и Direction — помогают добиться плавного перехода
• Лайфхак: количество тонов вводить руками в инпут, а не ползунком (ползунок даёт максимум 23)
• Lock HEX — фиксирует core-цвет в середине растяжки
• Режим Present: послойка горизонтально/вертикально, в фигурах, на круге
• Импорт через JSON или Tailwind, экспорт через Figma-плагин
• Есть тёмная тема

Hueton — для финальной валидации и хранения
• Профили: все растяжки в одном месте, правка через кривые на графиках
• Показывает contrast ratio в WCAG, APCA, или дельту — прямо на тонах в растяжке
• Ввод цвета: HEX или LCH-параметры
• Экспорт через Token Studio или CSS-переменные
• Есть хоткеи

Минус: нет зума на графиках — точное редактирование точек некомфортно

_источник