Color Palette Generator
Genereer complementaire, analoge, triadische en tetradische kleurpaletten vanuit elke basiskleur
Basiskleur
Kleurenschema
Gegenereerd palet
Wat is een kleurenpalet?
Een kleurenpalet is een vaste set kleuren die samenwerken in een ontwerp. Als je één basiskleur kiest voor een merk, website of illustratie, heb je aanvullende kleuren nodig die er goed naast staan. Kleurpaletgeneratie automatiseert die keuze door regels uit de kleurtheorie toe te passen — specifiek de geometrische relaties op het standaard HSL-kleurenwiel.
Het HSL-kleurenwiel (Hue, Saturation, Lightness) rangschikt tinten in een cirkel van 360 graden. Rood staat op 0 graden, groen op 120 graden en blauw op 240 graden. Elk kleurharmonieschema werkt door tinten te selecteren op specifieke hoekafstanden van de basiskleur. Een complementair paar gebruikt bijvoorbeeld twee kleuren die 180 graden uit elkaar liggen. Een analoge set pikt kleuren binnen 30 graden aan weerszijden. Deze geometrische regels produceren evenwichtige combinaties omdat de geselecteerde tinten verspreid zijn over het wiel in plaats van geclusterd in één gebied.
Dit hulpmiddel neemt elke hex-kleur als invoer, zet deze om naar HSL, roteert de tint over de hoeken die door het geselecteerde schema zijn gedefinieerd, en zet de resultaten terug naar hex. Het ondersteunt zes schema's: complementair, analoog, triadisch, gesplitst-complementair, tetradisch en monochromatisch. Elk schema produceert een ander aantal uitvoerkleuren, van 2 tot 5.
Waarom deze Color Palette Generator gebruiken?
Kleuren die samenwerken vinden via trial-and-error is traag en inconsistent. Een paletgenerator past kleurtheorieregels direct toe en geeft wiskundig evenwichtige resultaten vanuit elk startpunt.
Toepassingen van de Color Palette Generator
Vergelijking van kleurharmonieschema's
Elk harmonischema selecteert kleuren op basis van tintrotatiehoeken vanuit de basiskleur op het HSL-wiel. De tabel hieronder toont elk schema, het aantal kleuren dat het produceert, de rotatiehoeken en de ontwerpcontext waarvoor het het best geschikt is.
| Schema | Kleuren | Tinthoeken | Beste voor |
|---|---|---|---|
| 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 |
Hoe HSL-kleurwielrotatie werkt
Alle paletgeneratie in dit hulpmiddel is gebaseerd op het HSL-kleurmodel. Inzicht in de drie assen helpt je te voorspellen hoe een basiskleur transformeert onder elk schema.
Codevoorbeelden
Genereer kleurenpaletten programmatisch met HSL-conversie en tintrotatie.
// 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
}