Color Palette Generator
Генеруйте додаткові, аналогічні, триадні та тетрадні кольорові схеми з будь-якого базового кольору
Базовий колір
Кольорова схема
Згенерована палітра
Що таке кольорова палітра?
Кольорова палітра — це фіксований набір кольорів, підібраних для спільного використання в дизайні. Якщо ви обираєте один базовий колір для бренду, сайту або ілюстрації, вам потрібні супутні кольори, що органічно поєднуються з ним. Генерація кольорової палітри автоматизує цей вибір, застосовуючи правила теорії кольору — зокрема геометричні співвідношення на стандартному колірному колі HSL.
Колірне коло HSL (Hue, Saturation, Lightness) розміщує відтінки по колу 360 градусів. Червоний знаходиться на 0 градусах, зелений — на 120, синій — на 240. Кожна схема колірної гармонії працює шляхом вибору відтінків на певних кутових відстанях від базового кольору. Наприклад, додаткова пара використовує два кольори на відстані 180 градусів один від одного. Аналогічний набір обирає кольори в межах 30 градусів з кожного боку. Ці геометричні правила дають збалансовані поєднання, оскільки обрані відтінки розподіляються по всьому колу, а не концентруються в одній ділянці.
Цей інструмент приймає будь-який hex-колір як вхідні дані, перетворює його на HSL, повертає відтінок на кути, визначені обраною схемою, і конвертує результати назад у hex. Підтримується шість схем: додаткова, аналогічна, триадна, спліт-додаткова, тетрадна та монохроматична. Кожна схема генерує різну кількість вихідних кольорів — від 2 до 5.
Чому варто використовувати цей Color Palette Generator?
Підбирати кольори, що добре поєднуються, методом спроб і помилок — повільно і ненадійно. Генератор палітр миттєво застосовує правила теорії кольору й видає математично збалансований результат з будь-якої відправної точки.
Випадки використання Color Palette Generator
Порівняння схем колірної гармонії
Кожна схема гармонії обирає кольори на основі кутів повороту відтінку від базового кольору на колі 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
}