Почему OKLCH выглядит ровнее?
Эта модель лучше отражает визуальное восприятие цвета человеком, поэтому шаги палитры обычно получаются спокойнее и логичнее, чем в HSL.
Работает прямо в браузере
Генератор цветовых палитр для интерфейсов
Подбирайте палитры в OKLCH, HSL и HSV, правьте каждый оттенок вручную, проверяйте контраст и экспортируйте результат в Tailwind или CSS-переменные.
5.0 /5 (Оценок: 125)
Базовый цвет
Введите HEX или выберите базовый цвет. Генератор построит шкалу 50–950 и сразу покажет её в интерфейсе.
L
C
H
Цветовая модель
OKLCH даёт более ровную визуальную шкалу и подходит для продуктовых интерфейсов.
Параметры генерации
Диапазон светлоты98% → 10%
Множитель насыщенности1.00×
Количество оттенков11
от 3 до 11
Предпросмотр палитры
Переключайте вкладки и смотрите, как оттенки ведут себя в реальных интерфейсных сценариях.
OKLCH • 11 оттенков
Шаблоны:
50
#eef9ff
L 98 / C 0.066
Тёмный текст
100
#e2f1ff
L 96 / C 0.120
Тёмный текст
200
#c0dbff
L 89 / C 0.161
Тёмный текст
300
#8fbaff
L 79 / C 0.191
Тёмный текст
400
#518eff
L 67 / C 0.209
Тёмный текст
500
#2361e9
L 54 / C 0.215
Белый текст
600
#0036b9
L 41 / C 0.209
Белый текст
700
#000b88
L 29 / C 0.191
Белый текст
800
#000058
L 19 / C 0.161
Белый текст
900
#000030
L 12 / C 0.120
Белый текст
950
#000019
L 10 / C 0.066
Белый текст
Вертикальная лента
Как палитра выглядит в плотном UI
50#eef9ff
100#e2f1ff
200#c0dbff
300#8fbaff
400#518eff
500#2361e9
600#0036b9
700#000b88
800#000058
900#000030
950#000019
Экспорт для Tailwind
Скопируйте объект палитры и вставьте его в tailwind.config.js.
theme: {
extend: {
colors: {
brand: {
50: '#eef9ff',
100: '#e2f1ff',
200: '#c0dbff',
300: '#8fbaff',
400: '#518eff',
500: '#2361e9',
600: '#0036b9',
700: '#000b88',
800: '#000058',
900: '#000030',
950: '#000019',
},
},
},
}CSS-переменные
Скопируйте токены для :root или любого контейнера темы.
:root {
--color-50: #eef9ff;
--color-100: #e2f1ff;
--color-200: #c0dbff;
--color-300: #8fbaff;
--color-400: #518eff;
--color-500: #2361e9;
--color-600: #0036b9;
--color-700: #000b88;
--color-800: #000058;
--color-900: #000030;
--color-950: #000019;
}Как пользоваться генератором
Начните с базового цвета, настройте характер шкалы и доведите оттенки вручную там, где это действительно нужно.
1. Выберите базовый цвет
Введите HEX-код или воспользуйтесь цветовым полем. Генератор сразу построит шкалу 50–950.
2. Настройте модель и кривые
Сравните OKLCH, HSL и HSV, затем скорректируйте светлоту крайних шагов и общую насыщенность палитры.
3. Проверьте и экспортируйте
Оцените палитру в интерфейсном превью и матрице контрастов, после чего заберите цвета в Tailwind или CSS.
Зачем использовать генератор палитр для интерфейсов
Хорошая палитра нужна не только для красоты. Она влияет на читаемость, иерархию элементов, узнаваемость продукта и скорость принятия решений в интерфейсе.
Единая логика оттенков
Когда у вас есть шаги 50–950, проще проектировать кнопки, бейджи, фоны, состояния и графики без хаоса в цветах.
Контраст и доступность
Матрица контрастов и автоматический выбор текста помогают сразу увидеть проблемные пары и не уводить палитру в нечитаемые состояния.
Быстрый перенос в проект
Экспорт в Tailwind и CSS-переменные сокращает время между подбором цветов и внедрением их в реальный интерфейс.
Что важно в хорошей палитре для продукта
Генератор палитр полезен не только дизайнерам. Он помогает быстрее собрать системные цвета для сайта, SaaS-интерфейса, маркетингового лендинга или внутреннего B2B-сервиса.
Ровная светлота
Если оттенки прыгают по светлоте, интерфейс выглядит неаккуратно: кнопки спорят с карточками, акценты теряют приоритет, а состояния становятся неочевидными.
Поэтому в генераторе есть отдельная настройка светлого и тёмного края шкалы, а также более ровная модель OKLCH.
Системность вместо ручного набора случайных цветов
В реальном проекте палитра почти никогда не состоит из одного красивого оттенка. Нужны фоны, hover-состояния, границы, графики, теги, сообщения об ошибках, вторичные акценты и цвет текста на разном фоне.
- Шаги 50–200 удобно использовать для фонов, мягких бейджей и светлых состояний.
- Шаги 400–600 чаще всего становятся основным акцентом: кнопки, ссылки, активные вкладки, прогресс-бары.
- Шаги 700–950 подходят для плотных акцентов, тёмных подложек, текста поверх насыщенных поверхностей и data-visualization.
Когда полезна ручная правка каждого шага
Автоматическая шкала закрывает большую часть задач, но в бренд-системах почти всегда нужен ручной контроль. Например, хочется сделать 500 чуть плотнее для CTA, 100 чище для светлой карточки, а 900 спокойнее для тёмной панели. Поэтому в инструменте есть индивидуальное редактирование каждого оттенка без потери общей структуры палитры.
Частые вопросы о генерации палитр
Короткие ответы на вопросы, которые чаще всего возникают при подборе палитры для сайта или интерфейса.
Нужно ли редактировать каждый оттенок?
Не обязательно. Обычно достаточно настроить модель и диапазон светлоты, а вручную подправить только несколько ключевых шагов.
Зачем нужна матрица контрастов?
Она помогает быстро увидеть, какие пары оттенков подходят для текста, карточек, тегов, графиков и статусов, а какие лучше не использовать вместе.
Когда выбрать HSL или HSV?
Если нужен более привычный веб-подход или быстрый яркий прототип, HSL и HSV удобны для сравнения. Для продуктовой системы чаще выигрывает OKLCH.
Подходит ли генератор для Tailwind?
Да. Можно сразу скопировать объект палитры и вставить его в конфиг проекта, а также использовать CSS-переменные в любой вёрстке.
Это инструмент только для дизайнеров?
Нет. Он полезен и разработчикам, и маркетологам, и владельцам продукта, которым нужно быстро собрать аккуратную палитру для нового интерфейса или лендинга.
Собираете новый интерфейс или лендинг?
Используйте генератор палитр как рабочий этап перед дизайном и вёрсткой: сначала соберите цветовую систему, затем переходите к UI-kit, маркетинговой странице или продукту. Для других визуальных задач рядом есть и WebP-оптимизатор.
Смотреть все инструменты раздела