Термины
Hueplot
Foundation: color generator
CSS.Land
OKLCH Color Picker & Converter
Atmos
Pallete App
ColorBox
Hueton
Есть набор рабочих инструментов для работы с колористикой: часть из них — достаточно простые, часть — могут показаться на первый взгляд сложными. Я постараюсь в этой статье сделать начало работы с инстументами чуть проще, чтобы ты смог быстрее разобраться и главное — постарался применить их в своей работе, чтобы работать с цветом стало проще, быстрее и качественнее.
Этот набор инструментов будет полезен дизайнерам, потому что превращает работу с цветом из «на глаз» в системный процесс. Также часть из этих инструментов могут работать с OKLCH и помогать в сборке палитры, пока Фигма нам даёт только расширенный гамут в виде переключателя на P-3, но не обзавелась переключателем на OKLCH внутри окна цветовой палитры.
Термины
Чтобы было проще понимать настройки в инструментарии, разберёмся с базовым нэймигом. В разных моделях могут встречаться разные названия опций, которые будут обозначать разные параметры.
Hue — это оттенок цвета или проще: ответ на примитивный вопрос «какой это цвет?». Также hue может в каких-то моделях отвечать за положение цвета в цветовом круге.
Chroma — это про чистый цвет, без примесей, в том числе без примеси серого. Хрома отвечает за чистоту и интенсивность цвета. Хрома используется в цветовых моделях, ориентированных на восприятие человеком, например, OKLCH.
Lightness — это светлота цвета, то есть насколько цвет воспринимается светлым или тёмным. Например, L в HSL неперцептивный, а в OKLCH перцептивный и современный.
Brightness или Value (работает в HSV) — показывает, насколько цвет яркий или тусклый. Если он равен 100%, то будет максимальной яркий цвет выбранного оттенка, если начинает уменьшаться, то цвет тускнеет, но остаётся насыщенным, если увести в ноль, то станет чёрным. Brightness управляет общей интенсивностью RGB-каналов и даёт физическую яркость сигнала.
Saturation (работает в HSL и HSV) — это про насыщенность цвета, то есть насколько цвет сочный по отношению к серому. Когда мы уменьшаем сатурацию, то цвет постепенно смешивается с серым, хотя оттенок (hue) сохраняется. Если увести в ноль, то станет чистым серым.
REC.2020 (или BT.2020) — это стандарт цветового пространства для видео высокой чёткости и сверхвысокой чёткости (UHD/4K и 8K). Он задаёт три ключевых характеристики:
1. Гамма и цветовая система — включает широкий диапазон яркости и контрастности для HDR.
2. Цветовой охват — намного шире, чем у sRGB или Rec.709, охватывает почти весь видимый спектр, позволяя точнее передавать насыщенные цвета.
3. Глубина цвета — обычно 10 или 12 бит на канал для плавных градиентов без полос.
Проще говоря, REC.2020 — это современный стандарт, который позволяет отображать больше цветов и деталей в видео, делая изображение ярким, реалистичным и пригодным для HDR-контента.
Hueplot
Чем полезен
Про Hueplot я писала ещё в первой части цикла. Это инструмент, который сделал Алексей Ардов. Будет полезен тем, кто хочет наконец разобраться в цветовых моделях и понять, как они работают. В Hueplot можно подробно рассмотреть разные цветовые модели и понять, как цвет внутри них живёт и взаимодействует. На каждую модель можно навести курсор и, зажав, ротировать её, чтобы лучше рассмотреть переходы различных цветов и выход Hue в белый и чёрный. Hueplot — это профессиональный диагностический инструмент, который помогает дизайнерам изучать модели, но он не подойдёт для генерации палитр.
Как работать
1. Пройдись по моделям, поиузучай их внимательно, чтобы понять, как цвет распределяется внутри модели. По ишкам можно посмотреть краткие описания.
2. Можно пройтись по моделям, используя гамуты.
3. Можно посмотреть или проверить конкретный градиент (укажи его через стандартный появляющийся колорпикер).
Особенности
Ниже моделей есть настройки, где можно включить цветовой круг или даже выгрузить картинку изучаемой модели и того, что ты в ней накрутил.
Foundation: color generator
Чем полезен
Плагин Foundation: Color Generator — инструмент для быстрого создания гармоничных цветовых палитр в дизайн-системах. Он автоматически генерирует оттенки, тона и состояния от базового цвета, упрощая построение цветовых шкал и обеспечивая консистентность интерфейса. Если создатели плагина не врут, то Foundation строит системные цветовые шкалы на основе perceptual-подхода через модели LAB и LCH. Но в той же Фигме, когда растяжка сгенерирована, ты можешь достраивать её через среднее математическое, переключившись в RGB.
Как работать
1. Установи плагин и запусти.
2. Используй тот core-цвет, для которого планируешь строить растяжку.
3. Выбери Профиль, в котором будешь тянуть. Я, например, могу использовать Atlassian Neutral, чтобы построить большое количество тонов с выходом в белый.
4. Сгенерируй растяжку. Получив основную сборку тонов, обязательно проверяем их на коэффициент контрастности и на плавность перехода. Если есть проблемы, дотюниваем руками через rgb/hsl значения.
5. Дотягиваем растяжку в чёрный с помощью дополнительных генераций в плагине или донастраиваем отдельные тона руками по усредненным значениям rgb/hsl. При этом, обязательно смотрим, чтобы цвета проходили по коэффициентам контрастности, так же плавно, как и в светлых оттенках растяжки. Помним, что растяжка нам нужна не менее, чем на 25-30 тонов, чтобы в дальнейшем нормально масштабировать колористику в продукте и сам продукт визуально.
Особенности
Плагин умеет создавать растяжки просто палеткой на канву, может сгенерировать растяжку в стили или в variables — выбери, как тебе удобно выгрузить тона из используемого Профиля.
Очень удобно отображает коэффициент контрастности к белому и к чёрному.
Удобно прописывать нэйминг в каждой ячейке цвета.
CSS.Land
Чем полезен
Это один из четырёх мини-инструментов в пространстве для дизайнеров и разработчиков, где можно визуально исследовать пространство LCH. Можно регулировать оттенок, насыщенность и яркость, мгновенно видеть изменения и получать готовый CSS-код.
Как работать
1. Можно импортнуть любой цвет или внести руками.
2. Через ползунки получить желаемый результат.
3. Забрать и использовать в своём КИТе или ДС.
Особенности
Создательница — Lea Verou, PhD, которая, как я понимаю, оказала помощь в создании другого инструмента — Hueton.
CSS.Land работает с LCH, RGB, P-3 и REC-2020.
При импорте можно указать для RGB HEX.
OKLCH Color Picker & Converter
Чем полезен
Прекрасный инструмент от Злых марсиан (спасибо им за это) с огромным количеством полезностей для дизайнера, если внимательно изучить содержимое сервиса. Самое главное — работает именно с OKLCH моделью, но можно использовать и LCH. Можно включать P-3, чтобы видеть надстройку расширенного гамута над графами базового диапазона цвета. Кроме исследования конкретного цвета в чекере, можно перейти в режим построения палитры, создать столько цветов, сколько хочешь, и в каждом цвете накинуть необходимое количество тонов, а потом выгрузить это всё в нужном формате.
Как работать
1. Заходим в построение растяжек.
2. Набираем нужное количество цветов и тонов, нэймим их.
3. Выбираем необходимые настройки для набора растяжек: APCA к бэкграунду или к тексту, либо включаем WCAG. А также настраиваем P-3.
4. Кликнув на нужный тон в любой растяжке, переходим в чекер и там уже работаем с цветом, настраивая его, как нам нужно.
5. Когда палетка готова — выгружаем её через нужный формат и работаем уже в Фигме или передаём в разработку.
Особенности
Можно включить или выключить в графиках 3D и отображение REC2020.
Прочитать статью о том, почему же OKLCH всё же лучше других цветовых моделей, которую ребята заботливо сделали отдельной кнопкой.
И даже посмотреть туториал по построению тоновых растяжек на Ютубе.
Не хватает / Неудобно
В окне построения растяжек фоновое разделение на белый и чёрный фон сейчас сделано не совсем верно — оно не соответствует распределению цветов по темам. Было бы классно, если бы марсиане добавили свитч для переключения расположение фона.
Atmos
Чем полезен
Атмос — это платформа с продвинутым набором инструментов для создания и управления цветовыми палитрами. Атмос ориентирован на дизайнеров интерфейсов и командные дизайн‑системы и предлагает: генераторы гармоничных цветов и оттенков, колесо цвета, инструменты для работы в пространствах LCH/OKLCH, проверку контрастности по стандартам WCAG 2 и WCAG 3, симулятор восприятия цвета и многое другое. Платформа позволяет импортировать и экспортировать палитры в Figma и код (CSS, Tailwind, JavaScript), делиться ими с командой, работать с историей версий.
Как работать
1. Перейди на сайт. Выбери генератор палитр и задай базовый цвет или настройку оттенка. Сервис автоматически предложит гармоничные цвета (комплементарные, аналогичные, триады).
2. Переключись в нужную цветовую модель и работай с hue, chroma, lightness и другими параметрами, подбирая цвета и тона.
3. Для каждого цвета проверяй доступность текста и фона через встроенный WCAG‑тестер.
4. Используй симулятор зрительных патологий, чтобы убедиться, что палитра подходит для всех пользователей.
5. Экспортируй собранную палитру в удобном дизайну и разработке формате.
Особенности
Широкий набор мини-инструментов для работы с цветом.
Есть история версий, через которые можно возвращаться к предыдущим сборкам.
Pallete App
Чем полезен
Небольшой моно-инструмент для калибровки тонов в растяжках. Позволяет загрузить растяжку и доработать её по разным параметрам, чтобы она стала плавнее и консистентнее.
Как работать
1. По кнопке Import скопируй json шаблон, который можно вставить в любой базовый текстовый редактор, где уже пропиши в шаблоне нейминг и HEX значения тонов. При заполнении шаблона следи за разметкой: расставляй правильно все запятые и кавычки, чтобы шаблон был провалидирован при импорте.
2. Из редактора скопируй всё в окно импорта и загрузи в инструмент свою растяжку.
3. Она автоматически загрузится и ты сможешь увидеть, как послойно выглядят тона. Можно их откалибровать, как считаешь нужным, через ряд параметров.
4. Экспортировать получившийся результат также можно через разные форматы.
Особенности
Инструмент сложноват при загрузке и выгрузке, но в целом удобен, потому что все остальные действия производятся через передвижение точек (узлов) в тонах руками.
Есть тёмная тема.
И даже есть How to use в правом верхнем углу, где подробно расписаны фичи и функции.
Не хватает / Неудобно
Нет возможности сделать Undo или, как дизайнеры любят Ctrl+Z / CMD+Z — если изменил положение точки (узла) в тоне, то это уже не отменишь.
ColorBox
Чем полезен
Колористический инструмент, который помогает создавать системные цветовые палитры с учётом perceptual-баланса и WCAG. Сервис позволяет гибко управлять различными параметрами, в том числе, используя кривые и направления, генерировать оттенки, проверять контраст и экспортировать токены для дизайн-систем. ColorBox буквально перед 2026-м годом обновился и стал намного удобнее.
В апдейте появились моды — теперь можно собирать растяжки в OKLCH, а также можно выбрать гамут (я рассказывала про P-3 в первой части). Появилось управление разметкой на канве и можно складывать растяжки так, как тебе комфортно. Появилась функция Present и отсматривать результат созданной растяжки — одно удовольствие: есть, как послойка (горизонтальная и вертикальная), так и в фигурах, и даже на круге.
Загрузить свою растяжку можно опять же через json или Tailwind, а вот выгрузить результаты своей работы можно через различные варианты, в том числе Фигма-плагин. Вообще, после обновления сервис стал намного удобнее и теперь входит в ТОП-3 моих любимых инструментов.
Как работать
1. Загрузи свою растяжку или создай новую с нуля на канве.
2. Кликни на канву и в правой панеле, в блоке Show details укажи те параметры, что тебе важно видеть на растяжке.
3. Если создаёшь с нуля, то кликни на саму растяжку и в правой панели проскролль в��из, чтобы увидеть блок Steps. В нём вставь в поле Lock HEX своего core-цвета через появившееся окно выбора цвета. После этого проскролль правую панель наверх и убедись, что HUE в позициях Start и End имеют одно значение.
4. После проверки лок-цвета нужно снова вернуться в Steps и задать нужное количество тонов для растяжки (не менее 25-30 тонов). Если в позиции Major потянуть ползунок, то ColorBox выдаст тебе всего 23 тона, но есть лайфхак — введи нужное количество тонов руками в инпут количества и задай нужное тебе число.
5. Теперь растяжка готова к настройке. Используй параметры в правой панели относительно того мода и гамута, что ты задал изначально. Попробуй поработать с параметрами Curve и Direction — они помогут добиться более плавного перехода между тонами в растяжке.
6. Не забудь проверить свою растяжку через опцию Present.
7. Теперь можно выгрузить любым удобном тебе способом растяжку через Export.
Особенности
Много разных настроек, появился OKLCH, можно задать большое количество тонов в растяжке, можно работать сразу с несколькими растяжками на канве.
Есть тёмная тема, чтобы оценить тона относительно тёмного фона.
Есть презентационный режим, в котором хорошо видны проблемы в тонах.
Hueton
Чем полезен
И снова это инструмент Алексея Ардова. Как и ColorBox, он имеет большое количество функций. Позволяет создать свой профиль и собрать в него все тоновые растяжки, а также прав��ть их руками в кривых на графиках нужных параметров. Показывает contrast ratio для полного анализа взаимодействия выбранного тона: как он используется в тексте или в фоне.
Как работать
1. Создай новый профиль.
2. В нём создай по вертикали столько core-цветов, сколько нужно, проименуй их.
3. В каждом core-цвете по горизонтали создай столько тонов, сколько нужно, проименуй их.
4. В каждой растяжке выбери в середине номер тона, куда встанет кор-цвет и от него уже можно строить всю растяжку. Либо ты уже создал тоновые растяжки, например, в том же ColorBox, поэтому в Hueton можно просто занести цвета, чтобы их провалидировать и донастроить.
5. Выгружай палитру любым способом, либо просто кидай ссылку на профиль с палитрой коллегам.
Особенности
Есть тёмная тема и можно комфортно посмотреть палитру в тёмных оттенках.
Есть набор хоткеев, что ускоряет работу.
Выгрузить можно через плагин Token Studio или через копирование CSS переменных. Либо в самом низу в окне просто скопипастить руками данные из окна.
Позволяет смотреть коэф-т контрастности в WCAG, в APCA или видеть дельту — это отображается на тонах в растяжках в том числе.
Заносить цвет можно, как в HEX формате, так и через параметры LCH.
Не хватает / Неудобно
Мне с самого начала не хватает опции увеличения любого графика, потому что когда я хочу отрегулировать точку в графе, то чувствую себя дискомфортно и каждое микро-движение воспринимается, как огромное — нужно прилагать много когнитивных усилий, чтобы выставить точки наилучшим образом.
Закончу статью благодарностью, потому что Алексей Ардов — крутой специалист, благодаря ему у нас есть Hueplot и Hueton. К тому же, они бесплатные, а самое главное — они эффективные. Лёша, если читаешь этот материал — спасибо.
В следующей статье разберу подходы и алгоритмы построения тоновых растяжек для продукта. В том, числе, с использованием некоторых инструментов, про которые рассказала в этой части.
