Generator Palet Kolorów
Generuj komplementarne, analogiczne, triadyczne i tetradyczne palety kolorów z dowolnego koloru bazowego
Kolor bazowy
Schemat kolorów
Wygenerowana paleta
Czym jest paleta kolorów?
Paleta kolorów to zestaw barw dobranych tak, aby harmonijnie współpracowały w projekcie. Kiedy wybierasz jeden kolor bazowy dla marki, strony internetowej lub ilustracji, potrzebujesz kolorów towarzyszących, które dobrze wyglądają obok niego. Generowanie palet kolorów automatyzuje ten wybór, stosując reguły teorii koloru — konkretnie geometryczne zależności na standardowym kole barw HSL.
Koło barw HSL (Hue, Saturation, Lightness) rozmieszcza odcienie w okręgu o 360 stopniach. Czerwony leży przy 0 stopniach, zielony przy 120, a niebieski przy 240. Każdy schemat harmonii kolorów działa przez wybranie odcieni w określonych odległościach kątowych od koloru bazowego. Para komplementarna na przykład używa dwóch kolorów oddalonych o 180 stopni. Schemat analogiczny wybiera kolory w zakresie 30 stopni po każdej stronie. Te geometryczne reguły dają zrównoważone kombinacje, ponieważ wybrane odcienie rozkładają się na kole zamiast skupiać w jednym obszarze.
Narzędzie przyjmuje dowolny kolor w formacie hex, przekształca go do HSL, obraca odcień o kąty określone przez wybrany schemat i przelicza wyniki z powrotem do hex. Obsługuje sześć schematów: komplementarny, analogiczny, triadyczny, split-komplementarny, tetradyczny i monochromatyczny. Każdy schemat generuje od 2 do 5 kolorów wyjściowych.
Dlaczego warto używać tego generatora palet?
Dobieranie kolorów metodą prób i błędów jest powolne i niespójne. Generator palet natychmiast stosuje reguły teorii koloru, dając matematycznie zrównoważone wyniki z dowolnego punktu startowego.
Zastosowania generatora palet kolorów
Porównanie schematów harmonii kolorów
Każdy schemat harmonii dobiera kolory na podstawie kątów obrotu odcienia od koloru bazowego na kole HSL. Poniższa tabela zawiera każdy schemat, liczbę generowanych kolorów, kąty obrotu odcienia oraz kontekst projektowy, w którym sprawdza się najlepiej.
| Schemat | Kolory | Kąty odcienia | Najlepsze do |
|---|---|---|---|
| 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 działa obrót na kole barw HSL
Całe generowanie palet w tym narzędziu opiera się na modelu kolorów HSL. Zrozumienie jego trzech osi pomaga przewidzieć, jak kolor bazowy przekształci się w każdym schemacie.
Przykłady kodu
Generuj palety kolorów programowo, używając konwersji HSL i obrotu odcienia.
// 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
}