Color Palette Generator

Генерируйте дополнительные, аналогичные, триадные и тетрадные цветовые палитры из любого базового цвета

Попробовать пример

Базовый цвет

Цветовая схема

Сгенерированная палитра

Что такое цветовая палитра?

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

Цветовой круг HSL (оттенок, насыщенность, светлота) располагает оттенки по окружности в 360 градусов. Красный находится на 0 градусах, зелёный — на 120, синий — на 240. Каждая схема цветовой гармонии строится на выборе оттенков на определённых угловых расстояниях от базового цвета. Дополнительная пара, например, использует два цвета в 180 градусах друг от друга. Аналогичная схема берёт цвета в пределах 30 градусов с каждой стороны. Эти геометрические правила дают сбалансированные сочетания, поскольку выбранные оттенки распределяются по кругу, а не концентрируются в одной области.

Инструмент принимает любой hex-цвет, конвертирует его в HSL, поворачивает оттенок на углы, заданные выбранной схемой, и возвращает результаты обратно в hex. Поддерживаются шесть схем: дополнительная, аналогичная, триадная, раздельно-дополнительная, тетрадная и монохроматическая. Каждая схема даёт от 2 до 5 цветов.

Зачем использовать этот генератор цветовых палитр?

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

Мгновенная генерация палитры
Выберите базовый цвет и тип схемы — палитра появится немедленно. Никаких форм для отправки, никаких экранов загрузки. Измените базовый цвет — результат обновится в реальном времени.
🎨
Шесть схем гармонии
Выбирайте из дополнительной, аналогичной, триадной, раздельно-дополнительной, тетрадной или монохроматической схемы. Каждая даёт разный визуальный эффект: от высококонтрастных пар до тонких градиентов одного оттенка.
🔒
Обработка данных в браузере
Все вычисления цветов выполняются в вашем браузере. Никакие данные о цветах не передаются на сервер. Инструмент работает офлайн после загрузки страницы.
📋
Экспорт в один клик
Копируйте отдельные hex-коды или всю палитру целиком одним кликом. Вставляйте напрямую в CSS, Figma, конфигурацию Tailwind или любой дизайн-инструмент, принимающий hex-значения.

Сценарии использования

Создание темы интерфейса
Разработчики, создающие новое приложение, могут взять цвет бренда и сгенерировать полную палитру для токенов primary, secondary и accent. Триадная или тетрадная схема даёт достаточно разнообразия для кнопок, ссылок, уведомлений и фонов.
Цветовые токены дизайн-системы
Инженеры дизайн-систем используют монохроматические палитры для формирования шкалы светлоты одного фирменного оттенка, сопоставляя каждый шаг с именованным токеном (например, blue-100 до blue-900).
Визуализация данных
Дата-инженерам и аналитикам нужны различимые цвета для рядов данных в графиках, которые не конфликтуют между собой. Аналогичная или триадная палитра обеспечивает достаточное разграничение для 3–6 рядов при сохранении визуальной целостности.
Маркетинговые лендинги
Дизайнеры, создающие страницы для кампаний, берут основной цвет бренда и используют раздельно-дополнительную схему для подбора акцентных цветов кнопок CTA и выделенных секций, не вступая в конфликт с логотипом.
Проверка доступности
QA-инженеры, тестирующие соответствие WCAG, сопоставляют цвета из сгенерированной палитры и проверяют их через инструмент контрастности. Дополнительная или раздельно-дополнительная схема нередко даёт пары с высоким контрастом яркости.
Изучение теории цвета
Студенты, изучающие дизайн, могут переключаться между всеми шестью схемами на одном базовом цвете и наглядно видеть, как каждая геометрия распределяет оттенки по кругу. Визуальный результат делает абстрактные углы ощутимыми.

Сравнение схем цветовой гармонии

Каждая схема гармонии выбирает цвета на основе углов поворота оттенка от базового цвета на круге HSL. В таблице ниже указаны схема, количество цветов, углы поворота и контекст, в котором она работает лучше всего.

СхемаЦветовУглы оттенкаЛучше всего для
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

Как работает поворот оттенка на цветовом круге HSL

Вся генерация палитр в этом инструменте основана на цветовой модели HSL. Понимание её трёх осей помогает предсказать, как базовый цвет изменится при каждой схеме.

Оттенок (0–360)
Положение на цветовом круге в градусах. 0 — красный, 60 — жёлтый, 120 — зелёный, 180 — голубой, 240 — синий, 300 — пурпурный. Схемы палитры поворачивают это значение, сохраняя насыщенность и светлоту неизменными.
Насыщенность (0–100%)
Насколько насыщен цвет. 100% — полная насыщенность, 0% — оттенок серого. Схемы палитры сохраняют базовую насыщенность, так что все сгенерированные цвета имеют одинаковую интенсивность.
Светлота (0–100%)
Насколько яркий цвет. 0% — чёрный, 50% — чистый оттенок, 100% — белый. Монохроматические схемы варьируют светлоту для создания тональной шкалы; все остальные схемы держат светлоту постоянной.

Примеры кода

Генерация цветовых палитр программным способом с использованием конвертации HSL и поворота оттенка.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

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

В чём разница между дополнительной и раздельно-дополнительной схемой?
Дополнительная схема использует два цвета ровно в 180 градусах друг от друга на цветовом круге, обеспечивая максимальный контраст оттенков. Раздельно-дополнительная заменяет прямой противоположный цвет двумя цветами на 150 и 210 градусах от базового, давая сильный контраст с меньшим визуальным напряжением. Раздельно-дополнительная схема удобнее в UI-дизайне, поскольку ни один из акцентных цветов не противостоит базовому напрямую.
Сколько цветов должна содержать палитра интерфейса?
Большинство дизайн-систем используют 3–5 базовых оттенков: primary, secondary, neutral и один-два акцентных. Для каждого базового оттенка затем строится шкала светлоты (100–900). Начните с триадной или тетрадной схемы для базовых оттенков, затем создайте монохроматические шкалы для каждого.
Можно ли использовать эти палитры с Tailwind CSS?
Да. Скопируйте hex-значения и добавьте их в объект colors в файле tailwind.config.js или tailwind.config.ts. Для монохроматической шкалы сопоставьте каждый оттенок с числовым ключом (50, 100, 200 и т. д.) в соответствии с соглашением об именовании Tailwind.
Почему некоторые сгенерированные цвета выглядят тусклыми или грязными?
Если базовый цвет имеет низкую насыщенность или экстремальную светлоту (очень близкую к 0% или 100%), повёрнутые оттенки тоже будут выглядеть приглушёнными. Генератор сохраняет значения насыщенности и светлоты базового цвета. Для ярких палитр выбирайте базовый цвет с насыщенностью выше 50% и светлотой от 30% до 70%.
В чём разница между HSL и HSV/HSB?
HSL и HSV используют оттенок как круговую ось, но по-разному определяют яркость. В HSL светлота 50% соответствует чистому оттенку, а 100% — белому. В HSV (также называемом HSB) значение 100% — это чистый оттенок, и достичь белого невозможно без снижения насыщенности. Большинство генераторов палитр используют HSL, поскольку его ось светлоты интуитивнее соответствует тому, как мы воспринимаем яркость цвета.
Как схемы цветовой гармонии соотносятся с требованиями доступности?
Цветовая гармония и контрастность по WCAG — это отдельные понятия. Дополнительная пара имеет максимальный контраст оттенков, но это не гарантирует достаточного контраста яркости для читаемости текста. После генерации палитры проверяйте каждую пару «передний план / фон» по критерию WCAG AA (соотношение 4,5:1 для обычного текста). Цвета с близкой светлотой не пройдут проверку вне зависимости от их взаимного расположения на цветовом круге.
Идентична ли HSL функции CSS hsl()?
Да. Функция CSS hsl() принимает три аргумента: оттенок в градусах (0–360), насыщенность в процентах и светлоту в процентах. CSS Color Level 4 также поддерживает значение прозрачности через слэш: hsl(240 60% 50% / 0.8). Модель HSL, используемая этим генератором, полностью соответствует спецификации CSS, поэтому значения оттенка, насыщенности и светлоты можно напрямую вставлять в таблицы стилей.