Color Palette Generator

Genereer complementaire, analoge, triadische en tetradische kleurpaletten vanuit elke basiskleur

Probeer een voorbeeld

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.

Direct paletgeneratie
Selecteer een basiskleur en een schematype, en het palet verschijnt onmiddellijk. Geen formulierverzendingen, geen laadschermen. Wijzig de basiskleur en de uitvoer wordt direct bijgewerkt.
🎨
Zes harmonischema's
Kies uit complementair, analoog, triadisch, gesplitst-complementair, tetradisch of monochromatisch. Elk schema produceert een ander visueel effect, van hoog-contrast paren tot subtiele enkelvoudige tintverlopen.
🔒
Privacy-first verwerking
Alle kleurberekeningen worden in je browser uitgevoerd. Er worden geen kleurgegevens naar een server verzonden. Het hulpmiddel werkt offline nadat de pagina is geladen.
📋
Export met één klik
Kopieer individuele hex-codes of het volledige palet met één klik. Plak direct in CSS, Figma, Tailwind-configuratie of elk ontwerphulpmiddel dat hex-waarden accepteert.

Toepassingen van de Color Palette Generator

UI-thema's maken
Frontend-ontwikkelaars die een nieuwe app bouwen, kunnen beginnen met een merkkleur en een volledig palet genereren voor primaire, secundaire en accent-tokens. Triadische of tetradische schema's produceren voldoende variatie voor knoppen, links, meldingen en achtergronden.
Kleurtokens voor ontwerpsystemen
Ontwerpsysteem-engineers gebruiken monochromatische paletten om een helderheidschaal te genereren voor één merktint, en koppelen vervolgens elke stap aan een benoemd token (bijv. blauw-100 tot en met blauw-900).
Datavisualisatie
Data-engineers en analisten hebben onderscheidende kleuren nodig voor grafiekeries die niet botsen. Een analoog of triadisch palet biedt voldoende scheiding voor 3 tot 6 reeksen, terwijl de grafiek visueel samenhangend blijft.
Marketing-landingspagina's
Ontwerpers die campagnepagina's bouwen, starten vanuit de primaire kleur van het merk en gebruiken een gesplitst-complementair schema om accentkleuren te vinden voor CTA-knoppen en uitgelichte secties zonder te botsen met het logo.
Toegankelijkheidsparingen
QA-engineers die WCAG-conformiteit testen, koppelen gegenereerde paletkleuren en laten ze door een contrastcontrole lopen. Uitgaan van een complementair of gesplitst-complementair schema levert vaak paren op met hoog luminantiecontrast.
Kleurtheorie leren
Studenten die ontwerp studeren, kunnen schakelen tussen alle zes schema's op dezelfde basiskleur en zien hoe elke geometrie tinten verdeelt over het wiel. De visuele uitvoer maakt de abstracte hoeken tastbaar.

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.

SchemaKleurenTinthoekenBeste voor
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, 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.

Hue (0–360)
De positie op het kleurenwiel in graden. 0 is rood, 60 is geel, 120 is groen, 180 is cyaan, 240 is blauw, 300 is magenta. Paletschema's roteren deze waarde terwijl verzadiging en helderheid gelijk blijven.
Saturation (0–100%)
Hoe levendig de kleur is. 100% is volledig verzadigd; 0% is een grijstint. Paletschema's bewaren de basisverzadiging zodat alle gegenereerde kleuren dezelfde intensiteit delen.
Lightness (0–100%)
Hoe helder de kleur is. 0% is zwart, 50% is de zuivere tint en 100% is wit. Monochromatische schema's variëren de helderheid om een tonale schaal te maken; alle andere schema's houden de helderheid constant.

Codevoorbeelden

Genereer kleurenpaletten programmatisch met HSL-conversie en tintrotatie.

JavaScript
// 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"
Python
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']
Go
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
}

Veelgestelde vragen

Wat is het verschil tussen complementair en gesplitst-complementair?
Complementair gebruikt twee kleuren die exact 180 graden uit elkaar liggen op het kleurenwiel, wat maximaal tintcontrast oplevert. Gesplitst-complementair vervangt het directe tegendeel door twee kleuren op 150 en 210 graden van de basiskleur, wat sterk contrast geeft met minder visuele spanning. Gesplitst-complementair is eenvoudiger te gebruiken in UI-ontwerp omdat geen van de accentkleuren rechtstreeks tegenover de basiskleur staat.
Hoeveel kleuren moet een UI-palet hebben?
De meeste ontwerpsystemen gebruiken 3 tot 5 kerntinten: een primaire, een secundaire, een neutrale en één of twee accenten. Elke kerntint heeft dan een helderheidschaal (100 tot en met 900). Begin met een triadisch of tetradisch schema voor de kerntinten en genereer vervolgens monochromatische schalen voor elk.
Kan ik deze paletten gebruiken met Tailwind CSS?
Ja. Kopieer de hex-waarden en voeg ze toe aan het colors-object in je tailwind.config.js of tailwind.config.ts. Voor een monochromatische schaal koppel je elke tint aan een genummerde sleutel (50, 100, 200, enzovoort) om aan te sluiten bij de naamgevingsconventie van Tailwind.
Waarom zien sommige gegenereerde kleuren er dof of modderig uit?
Als je basiskleur een lage verzadiging heeft of een extreme helderheid (zeer dicht bij 0% of 100%), zullen de geroteerde tinten ook gedempd overkomen. De generator behoudt de verzadigings- en helderheidswaarden van de basiskleur. Kies voor levendige paletten een basiskleur met een verzadiging boven 50% en een helderheid tussen 30% en 70%.
Wat is het verschil tussen HSL en HSV/HSB?
HSL en HSV gebruiken allebei tint als cirkelvormige as, maar ze definiëren helderheid anders. In HSL is lightness 50% de zuivere tint en 100% wit. In HSV (ook wel HSB genoemd) is value 100% de zuivere tint en is er geen manier om wit te bereiken zonder de verzadiging te verlagen. De meeste paletgeneratoren gebruiken HSL omdat de lichtjas intuïtiever overeenkomt met hoe we kleurhelderheid waarnemen.
Hoe verhouden kleurharmonieschema's zich tot toegankelijkheid?
Kleurharmonie en WCAG-contrast zijn afzonderlijke vraagstukken. Een complementair paar heeft maximaal tintcontrast, maar dat garandeert geen voldoende luminantiecontrast voor leesbaarheid van tekst. Nadat je een palet hebt gegenereerd, test je elk voor- en achtergrondpaar aan de hand van WCAG AA (4,5:1 verhouding voor normale tekst). Kleuren met vergelijkbare helderheid zakken hiervoor ongeacht hun tintrelatie.
Is HSL hetzelfde als de CSS hsl()-functie?
Ja. De CSS hsl()-functie neemt drie argumenten: tint in graden (0–360), verzadiging als percentage en helderheid als percentage. CSS Color Level 4 accepteert ook een alfawaarde gescheiden door een schuine streep: hsl(240 60% 50% / 0.8). Het HSL-model dat door deze generator wordt gebruikt, komt exact overeen met de CSS-specificatie, zodat je tint-, verzadigings- en helderheidswaarden direct in je stylesheets kunt plakken.