Брендовые палитры на основе OKLCH. Выберите базу, получите все классические гармонии плюс тональную шкалу 50–950. Фиксируйте, пересчитывайте, экспортируйте как CSS / Tailwind v4 / SCSS / JSON.
Брендовые палитры на основе OKLCH. Выберите базу, получите все классические гармонии плюс тональную шкалу 50–950. Фиксируйте, пересчитывайте, экспортируйте как CSS / Tailwind v4 / SCSS / JSON.
Наш Color Picker & Converter работает с одним цветом за раз — выбрать / конвертировать / скопировать. Этот инструмент — для палитр: подставьте базовый цвет и получите целую готовую к бренду систему (гармонии + тональная шкала) одним махом. Это разница между покупкой одной рубашки и получением целого гардероба.
HSL распределяет оттенки неравномерно (жёлтый на 60° кажется значительно ярче синего на 240° даже при одинаковом значении светлоты). В триадной палитре HSL один образец заметно ярче или тусклее остальных. OKLCH перцептивно равномерен — три образца на одинаковой светлоте OKLCH выглядят одинаково яркими. Именно поэтому каждая современная дизайн-система (Apple HI, Tailwind v4, IBM Carbon) переходит на OKLCH для гармоний и шкал.
Ваши брендовые цвета никогда не покидают устройство. Откройте DevTools → Network и увидите ноль исходящих запросов при любой операции.
Подсказка: нажмите Space, чтобы пересчитать незафиксированные образцы.
OKLCH-гармонии, тональные шкалы, фиксация и пересчёт, экспорт design tokens — и несколько мелочей, которые делают работу действительно приятной.
Комплементарная, аналоговая, триадная, тетрадная, расщеплённо-комплементарная, монохромная — всё рассчитывается в OKLCH, поэтому триадная палитра из трёх насыщенных ярких цветов остаётся равномерно яркой. Никакой мутности HSL.
Подставьте свой брендовый цвет — получите тональную шкалу формы Tailwind 50, 100, 200, … 900, 950, сгенерированную проходом светлоты по кривой OKLCH. Цветность сжимается на крайних значениях, чтобы цвета оставались в гамуте sRGB.
Закрепите любой образец (иконка замка) и нажмите Пересчитать (или просто Space), чтобы изменить остальные в рамках выбранной гармонии. Быстро итерируйте, сохраняйте то, что нравится.
CSS custom properties (--brand-500), Tailwind v4 @theme block, SCSS map и JSON design tokens, готовые для Style Dictionary / Figma Tokens. Плюс PNG-полоса образцов 1200×200.
Каждый образец показывает свой WCAG-коэффициент контраста относительно более подходящего из чёрного или белого, со значком AA / AAA / fail. Замечайте проблемы доступности до релиза.
Каждый байт остаётся на вашем устройстве. Расчёты OKLCH, генерация гармоний, построение шкал, экспорт PNG — всё работает как JavaScript локально. Откройте DevTools → Network и убедитесь: ноль исходящих запросов.
Четыре шага от одного базового цвета до полной палитры, готовой как design tokens.
Кликните по цветовому полю, вставьте HEX или нажмите Случайная база для вдохновения. Инструмент строит всю палитру вокруг этого цвета — и образцы гармонии, и 11-шаговую тональную шкалу.
По умолчанию — Аналоговая: три цвета в пределах 30° от базового, идеальна для спокойных брендовых палитр. Комплементарная — для контрастных акцентов. Триадная / Тетрадная — для редакционных и игривых брендов. Монохромная — для тональных систем одного оттенка. Всё рассчитывается в OKLCH, поэтому остаётся равномерно ярким.
Нажмите иконку замка на любом образце, который хотите сохранить, затем нажмите Space (или Пересчитать), чтобы изменить остальные в рамках гармонии. Быстро итерируйте. Редактируйте любой образец напрямую, кликнув по его HEX-полю, если хотите задать точное значение.
Скопируйте вывод CSS (custom properties), Tailwind v4 (блок @theme), SCSS map или JSON design tokens. Или нажмите Скачать PNG, чтобы получить полосу образцов 1200×200, готовую для дизайн-брифа.
Четыре типичных сценария, в которых инструмент палитр на OKLCH с приоритетом приватности обходит ручную правку HEX-кодов в Figma.
У вас есть брендовый цвет, нужна система вокруг него. Подставьте HEX, выберите Аналоговую, пересчитывайте, пока два поддерживающих цвета не зазвучат, зафиксируйте все три. Переключитесь на представление тональной шкалы, скопируйте блок Tailwind @theme, вставьте в app.css нового проекта. Общее время: 5 минут.
Дефолтный indigo Tailwind — не ваш бренд. Ваш бренд — #5B3FCD. Подставьте его, получите 11-шаговую тональную шкалу, идеально повторяющую структуру Tailwind. Скопируйте блок @theme — каждый bg-brand-500 / text-brand-700 просто работает.
Каждый образец показывает свой WCAG-коэффициент контраста + значок AA/AAA. Проверьте, что brand-500 достигает AA на белом, а brand-100 остаётся читаемым как фоновый оттенок с текстом brand-900. Чините проблемные образцы, пересчитывая их по отдельности.
Агентства и мульти-брендовые компании поддерживают N параллельных дизайн-систем, каждая с одинаковой структурой, но своим брендовым оттенком. Используйте один и тот же воркфлоу гармонии + тональной шкалы для каждого бренда, экспортируйте каждый как JSON tokens, подключайте в Style Dictionary. Единая структура, разная идентичность.
Ваши брендовые цвета никогда не покидают устройство. Откройте DevTools → Network и увидите ноль исходящих запросов при любой операции.
canvas; изображение образцов целиком создаётся в памяти браузера и скачивается как Blob — ничто не уходит в сеть.
Подобранные материалы об OKLCH-палитрах, брендовых цветовых системах и design tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Наш Color Picker & Converter работает с одним цветом за раз — выбрать / конвертировать / скопировать. Этот инструмент — для палитр: подставьте базовый цвет и получите целую готовую к бренду систему (гармонии + тональная шкала) одним махом. Это разница между покупкой одной рубашки и получением целого гардероба.
HSL распределяет оттенки неравномерно (жёлтый на 60° кажется значительно ярче синего на 240° даже при одинаковом значении светлоты). В триадной палитре HSL один образец заметно ярче или тусклее остальных. OKLCH перцептивно равномерен — три образца на одинаковой светлоте OKLCH выглядят одинаково яркими. Именно поэтому каждая современная дизайн-система (Apple HI, Tailwind v4, IBM Carbon) переходит на OKLCH для гармоний и шкал.
Это брендовая цветовая шкала в стиле Tailwind: indigo-50 (самый светлый), indigo-100, indigo-200, … indigo-900, indigo-950 (самый тёмный). Подставьте свой брендовый цвет, и инструмент автоматически сгенерирует все 11 шагов, проходом светлоты OKLCH по фиксированной кривой. Результат — drop-in замена для любого токена палитры Tailwind в вашем брендовом оттенке.
Нажмите иконку замка в левом верхнем углу любого образца — он останется на месте. Затем нажмите Пересчитать или клавишу Space, чтобы изменить каждый незафиксированный образец в рамках выбранной гармонии. Так и находят отличную палитру: закрепите брендовый цвет, который уже выбран, и исследуйте варианты вокруг него.
Нет. Расчёты OKLCH, генерация гармоний, построение тональной шкалы, вычисление коэффициентов контраста, экспорт PNG, каждое копирование в буфер — всё работает на JavaScript на вашем устройстве. Откройте DevTools → Network и увидите ноль исходящих запросов. Вставляйте брендовые цвета, внутренние design tokens, палитры под NDA — ничего не покидает ваш ноутбук.