Генератор цветовых палитр

Генерируйте гармоничные цветовые палитры на основе базового цвета — комплементарные, аналоговые, триадные и расщеплённо-комплементарные схемы. Инструмент поможет быстро подобрать цветовую гамму для проекта.

Студия · нейтральное окружение

Базовый цвет

Гармония

Цвета

Возможности

Дополнительные цвета

Аналогичные цвета

Триадная схема

Раздельно-дополнительная схема

Экспорт в CSS-переменные

Как использовать

1. Выберите базовый цвет и схему гармонии — рабочая область заполнится палитрой.

2. Нажимайте Пробел (или «Перемешать») для вариантов. Наведите на колонку, чтобы скопировать, отредактировать, раскрыть шкалу оттенков или закрепить цвет.

3. Переключайте фон рабочей области (белый / серый / тёмный / шахматный), чтобы проверить палитру в разном окружении, затем экспортируйте в CSS, Tailwind, JSON, SVG или PNG.

Об этом инструменте

Хорошие палитры редко бывают случайными: большинство из них следуют отношениям на цветовом круге. Отталкиваясь от одного базового цвета, генератор строит палитры из шести цветов по классическим гармониям: аналоговая (соседние тона для спокойного дизайна), монохромная (один тон разной светлоты), комплементарная (противоположные тона для сильного контраста), расщеплённо-комплементарная, триадная и тетрадная. В каждой колонке показаны значение и примерное название цвета; его можно скопировать, изменить, открыть шкалу более светлых и тёмных оттенков или закрепить, чтобы он оставался на месте, пока вы перемешиваете остальные. Посмотрите палитру на белом, сером, тёмном или прозрачном фоне и экспортируйте её в виде CSS-переменных, конфигурации цветов Tailwind, JSON, SVG или PNG-листа с образцами.

Часто задаваемые вопросы

Чем отличаются схемы гармонии?

Аналоговая использует соседние тона, монохромная сохраняет один тон и меняет светлоту, комплементарная сочетает противоположные тона, расщеплённо-комплементарная берёт два тона рядом с дополнительным, триадная расставляет три тона через 120°, а тетрадная использует четыре тона через 90°.

Какая схема лучше подходит для сайта?

С аналоговыми и монохромными палитрами проще всего работать в интерфейсах, потому что они выглядят спокойно. Комплементарные и триадные схемы дают яркие акценты, поэтому часто берут один основной цвет, один вспомогательный и немного дополнительного цвета для призывов к действию.

Как работают закреплённые цвета?

Закреплённая колонка сохраняет свой цвет, когда вы нажимаете пробел или «Перемешать», чтобы получить новые варианты. Это полезно, когда фирменный цвет задан и нужно подобрать к нему остальные.

Доступны ли сгенерированные палитры?

Гармония не гарантирует читаемого контраста. Прежде чем использовать два цвета палитры для текста и фона, проверьте пару в инструменте проверки контраста по WCAG AA (4,5:1 для основного текста).

В каких форматах можно экспортировать?

Пользовательские CSS-свойства, фрагмент theme.extend.colors для Tailwind, JSON-массив значений HEX, SVG-файл с образцами и PNG размером 1500 × 900 со значениями, напечатанными на каждой колонке.

Генератор цветовых палитр

Возможности

Как использовать

Об этом инструменте

Часто задаваемые вопросы

Похожие инструменты