Color Palette Generator
Генерируйте дополнительные, аналогичные, триадные и тетрадные цветовые палитры из любого базового цвета
Базовый цвет
Цветовая схема
Сгенерированная палитра
Что такое цветовая палитра?
Цветовая палитра — это фиксированный набор цветов, подобранных для совместного использования в дизайне. Когда вы выбираете один базовый цвет для бренда, сайта или иллюстрации, вам нужны сопутствующие цвета, которые органично смотрятся рядом. Генератор цветовых палитр автоматизирует этот выбор, применяя правила теории цвета — а именно геометрические соотношения на стандартном цветовом круге HSL.
Цветовой круг HSL (оттенок, насыщенность, светлота) располагает оттенки по окружности в 360 градусов. Красный находится на 0 градусах, зелёный — на 120, синий — на 240. Каждая схема цветовой гармонии строится на выборе оттенков на определённых угловых расстояниях от базового цвета. Дополнительная пара, например, использует два цвета в 180 градусах друг от друга. Аналогичная схема берёт цвета в пределах 30 градусов с каждой стороны. Эти геометрические правила дают сбалансированные сочетания, поскольку выбранные оттенки распределяются по кругу, а не концентрируются в одной области.
Инструмент принимает любой hex-цвет, конвертирует его в HSL, поворачивает оттенок на углы, заданные выбранной схемой, и возвращает результаты обратно в hex. Поддерживаются шесть схем: дополнительная, аналогичная, триадная, раздельно-дополнительная, тетрадная и монохроматическая. Каждая схема даёт от 2 до 5 цветов.
Зачем использовать этот генератор цветовых палитр?
Подбирать сочетающиеся цвета методом проб и ошибок — медленно и непоследовательно. Генератор мгновенно применяет правила теории цвета и выдаёт математически сбалансированный результат из любой отправной точки.
Сценарии использования
Сравнение схем цветовой гармонии
Каждая схема гармонии выбирает цвета на основе углов поворота оттенка от базового цвета на круге HSL. В таблице ниже указаны схема, количество цветов, углы поворота и контекст, в котором она работает лучше всего.
| Схема | Цветов | Углы оттенка | Лучше всего для |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, single-brand pages |
Как работает поворот оттенка на цветовом круге HSL
Вся генерация палитр в этом инструменте основана на цветовой модели HSL. Понимание её трёх осей помогает предсказать, как базовый цвет изменится при каждой схеме.
Примеры кода
Генерация цветовых палитр программным способом с использованием конвертации HSL и поворота оттенка.
// 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"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']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
}