Генератор цветовых палитр — гармоничные цвета из одного
Введите корректный HEX-цвет, например #3b82f6 или #f80.
Выберите базовый цвет и получите палитру по классическим правилам гармонии цветового круга: комплементарную, аналоговую, триадную, тетрадную или монохромную. У каждого образца — коды HEX, RGB и HSL, любой копируется одним кликом. Всё работает в браузере, ничего никуда не загружается.
Как это работает
- 1 Выберите базовый цвет Используйте палитру-пипетку или введите HEX-код (например, #3b82f6). Короткая запись из трёх символов вроде #f80 тоже подходит.
- 2 Выберите правило гармонии Комплементарная, аналоговая, триадная, тетрадная или монохромная схема — палитра перестраивается мгновенно при переключении.
- 3 Скопируйте коды Клик по образцу копирует HEX-значение, а по строкам RGB и HSL под ним — соответствующие форматы.
Ваши данные защищены
Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.
Часто задаваемые вопросы
- Что означают правила гармонии?
- Это позиции на цветовом круге. Комплементарная схема берёт оттенок напротив базового (через 180°). Аналоговая — соседей в 30° с каждой стороны. Триадная расставляет три оттенка через 120°, тетрадная — четыре через 90°, а монохромная сохраняет оттенок и меняет только светлоту.
- Какую схему выбрать для сайта?
- Рабочий подход: строить интерфейс на одном доминирующем цвете с монохромными или аналоговыми вариациями, а комплементарный цвет использовать точечно — для кнопок и акцентов. Триадные и тетрадные схемы подходят иллюстрациям и дашбордам, где нужно несколько различимых, но сбалансированных оттенков.
- Какие форматы цвета можно скопировать?
- У каждого образца есть HEX (#3b82f6), RGB (rgb(59, 130, 246)) и HSL (hsl(217, 91%, 60%)) — три формата, которые CSS принимает везде. Клик по коду отправляет его в буфер обмена.
- Почему некоторые цвета палитры выглядят блёклыми?
- Правила гармонии поворачивают оттенок, но сохраняют насыщенность и светлоту базового цвета. Если база приглушённая, все производные цвета тоже будут приглушёнными. Начните с достаточно насыщенного базового цвета, а мягкие тона получайте, меняя светлоту.
- Отправляются ли данные на сервер?
- Нет. Вся математика палитры — несколько поворотов в HSL, посчитанных в вашем браузере. После загрузки страница работает офлайн, выбранные цвета никуда не передаются.
Из блога
Гармония цветового круга: палитры, которые работают Что на самом деле значат комплементарные, аналоговые и триадные схемы и как превратить один фирменный цвет в полную палитру интерфейса. Читать статью →Похожие инструменты
Конвертер цветов Конвертация цветов между форматами HEX, RGB, HSL и HSV. Проверка контрастности Проверка контраста текста и фона по стандартам WCAG AA и AAA. Генератор CSS-градиентов Визуальный конструктор линейных и радиальных CSS-градиентов. Генератор CSS-теней Визуальный конструктор с готовым кодом CSS box-shadow.