Генератор цветовых палитр онлайн
Создавайте гармоничные палитры из 5 цветов: монохром, аналогичная, комплементарная, триада, тетрада. HEX/RGB/HSL, UI-превью, экспорт в CSS, Tailwind и JSON.
Совет: нажмите Пробел, чтобы получить новую палитру. Закройте замок ⛓ — цвет не изменится при следующей генерации.
:root {
}Как работает подбор цветовой палитры
В основе нашего генератора лежит геометрия цветового круга. Каждый цвет представляется в цветовой модели, определяющей тон через угол в градусах от нуля до трехсот шестидесяти. Гармоничные сочетания рассчитываются путем прибавления или вычитания фиксированных углов сдвига от тона базового цвета.
- — цветовой тон базового цвета в градусах от 0 до 360;
- — углы тонов первого и второго цвета в комплементарной схеме;
- — угловой сдвиг противоположного цвета на круге.
Для аналогичной схемы подбираются цвета с шагом в тридцать градусов в обе стороны от базового тона, а для триады строится равносторонний треугольник с шагом в сто двадцать градусов.
Основные схемы цветовой гармонии
Использование проверенных геометрических правил позволяет создавать приятные для глаза сочетания:
- Комплементарная схема — два противоположных цвета, создающих максимальный контраст.
- Аналогичная схема — три или пять соседних цветов для мягких переходов.
- Триада — три цвета на равном расстоянии друг от друга для сбалансированной яркости.
- Тетрада — четыре цвета, образующие две комплементарные пары.
Часто задаваемые вопросы
Источники и нормативная база
- WCAG 2.1 — Contrast (Minimum)W3C
- Color Theory — Itten's Color WheelInteraction Design Foundation
- Tailwind CSS — Customizing ColorsTailwind Labs
- Coolors — Color Schemes GeneratorCoolors (для сравнения)
Расчёты выполняются на основе указанных нормативных и справочных источников. Ссылки открываются в новой вкладке.
Похожие инструменты
Переводите цвета между HEX, RGB и HSL, выбирайте оттенок в палитре и получайте ориентировочный CMYK для печати.
Сгенерируйте случайный цвет или палитру из 5 оттенков с фильтрами: светлый, тёмный, пастельный, яркий, тёплый, холодный. HEX, RGB, HSL — копируются в один клик.
Создавайте linear, radial и conic градиенты с живым превью. Экспортируйте результат как CSS, Tailwind или raw-значение.