Color Palette Generator
Generujte komplementární, analogické, triádické a tetrádické barevné palety z libovolné základní barvy
Základní barva
Barevné schéma
Vygenerovaná paleta
Co je barevná paleta?
Barevná paleta je pevně daná sada barev zvolených tak, aby v návrhu dobře fungovaly společně. Když pro značku, web nebo ilustraci vyberete jednu základní barvu, potřebujete k ní doprovodné barvy, které se k ní hodí. Generování barevných palet tento výběr automatizuje pomocí pravidel z teorie barev — konkrétně geometrických vztahů na standardním barevném kole HSL.
Barevné kolo HSL (Hue, Saturation, Lightness) rozmísťuje odstíny na 360stupňové kružnici. Červená leží na 0 stupních, zelená na 120 a modrá na 240. Každé schéma barevné harmonie funguje tak, že vybírá odstíny ve specifických úhlových vzdálenostech od základní barvy. Komplementární dvojice například používá dvě barvy vzdálené od sebe přesně 180 stupňů. Analogická sada vybírá barvy do 30 stupňů na každé straně. Tato geometrická pravidla dávají vyvážené kombinace, protože vybrané odstíny jsou rozprostřeny po celém kole, nikoli nakupeny v jedné oblasti.
Tento nástroj přijímá libovolnou barvu v hex formátu, převede ji do HSL, otočí odstín o úhly definované vybraným schématem a výsledky převede zpět do hex. Podporuje šest schémat: komplementární, analogické, triádické, split-komplementární, tetrádické a monochromatické. Každé schéma produkuje různý počet výstupních barev — od 2 do 5.
Proč používat tento generátor barevných palet?
Výběr barev, které spolu fungují, metodou pokus-omyl je pomalý a nespolehlivý. Generátor palet aplikuje pravidla teorie barev okamžitě a poskytuje matematicky vyvážené výsledky z jakéhokoli výchozího bodu.
Případy použití generátoru barevných palet
Srovnání schémat barevné harmonie
Každé schéma harmonie vybírá barvy na základě úhlů otočení odstínu od základní barvy na kole HSL. Níže uvedená tabulka uvádí každé schéma, počet produkovaných barev, úhly otočení a designový kontext, ve kterém funguje nejlépe.
| Schéma | Barvy | Úhly odstínu | Nejlepší pro |
|---|---|---|---|
| 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 |
Jak funguje otočení barevného kola HSL
Veškeré generování palet v tomto nástroji spoléhá na barevný model HSL. Pochopení jeho tří os vám pomůže předvídat, jak se základní barva transformuje pod jednotlivými schématy.
Příklady kódu
Generujte barevné palety programově pomocí konverze HSL a otočení odstínu.
// 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
}