Color Palette Generator
Komplementäre, analoge, triadische und tetradische Farbpaletten aus einer beliebigen Basisfarbe generieren
Basisfarbe
Farbschema
Generierte Palette
Was ist eine Farbpalette?
Eine Farbpalette ist eine festgelegte Auswahl von Farben, die in einem Design harmonisch zusammenwirken. Wenn man eine einzelne Basisfarbe für eine Marke, eine Website oder eine Illustration wählt, benötigt man Begleitfarben, die gut dazu passen. Die Farbpaletten-Generierung automatisiert diese Auswahl, indem sie Regeln der Farbtheorie anwendet — konkret die geometrischen Beziehungen auf dem HSL-Farbkreis.
Der HSL-Farbkreis (Hue, Saturation, Lightness) ordnet Farbtöne auf einem 360-Grad-Kreis an. Rot liegt bei 0 Grad, Grün bei 120 Grad und Blau bei 240 Grad. Jedes Farbharmonie-Schema funktioniert, indem es Farbtöne in bestimmten Winkelabständen zur Basisfarbe auswählt. Ein komplementäres Paar verwendet beispielsweise zwei Farben, die 180 Grad voneinander entfernt sind. Ein analoges Set wählt Farben innerhalb von 30 Grad auf beiden Seiten. Diese geometrischen Regeln erzeugen ausgewogene Kombinationen, weil die gewählten Farbtöne gleichmäßig über den Farbkreis verteilt sind, anstatt sich in einem Bereich zu häufen.
Dieses Tool nimmt einen beliebigen Hex-Farbwert als Eingabe, wandelt ihn in HSL um, dreht den Farbton um die durch das gewählte Schema definierten Winkel und konvertiert die Ergebnisse zurück in Hex. Es unterstützt sechs Schemata: komplementär, analog, triadisch, split-komplementär, tetradisch und monochromatisch. Jedes Schema erzeugt zwischen 2 und 5 Ausgabefarben.
Warum diesen Color Palette Generator verwenden?
Farben durch Ausprobieren aufeinander abzustimmen ist langsam und inkonsistent. Ein Paletten-Generator wendet Farbtheorie-Regeln sofort an und liefert mathematisch ausgewogene Ergebnisse aus jedem Ausgangspunkt.
Anwendungsfälle für den Color Palette Generator
Vergleich der Farbharmonie-Schemata
Jedes Harmonie-Schema wählt Farben anhand von Farbton-Rotationswinkeln zur Basisfarbe auf dem HSL-Farbkreis aus. Die folgende Tabelle listet jedes Schema, die Anzahl der erzeugten Farben, die Rotationswinkel und den Designkontext auf, in dem es am besten funktioniert.
| Schema | Farben | Farbtonwinkel | Eignet sich für |
|---|---|---|---|
| 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 |
Wie die HSL-Farbkreisrotation funktioniert
Die gesamte Paletten-Generierung in diesem Tool basiert auf dem HSL-Farbmodell. Die drei Achsen zu verstehen hilft dabei vorherzusagen, wie eine Basisfarbe unter jedem Schema transformiert wird.
Code-Beispiele
Farbpaletten programmatisch generieren mithilfe von HSL-Konvertierung und Farbtonrotation.
// 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
}