Kleurenpalet generator
Voer de basiskleur in als HEX, RGB of HSL of kies hem met de kleurkiezer, en selecteer daarna de kleurharmonie. De generator draait de tint op het HSL-kleurenwiel en toont elke kleur als staal met HEX-, RGB- en HSL-waarde, klaar om te kopiëren.
Zo wordt het berekend
Zo ontstaan de kleurharmonieën
De generator rekent de basiskleur om naar het HSL-model (tint H in graden, verzadiging S en helderheid L in procenten, volgens CSS Color Module Level 4). Bij elke harmonie wordt alleen de tint gedraaid; verzadiging en helderheid blijven gelijk. Daarna wordt elke kleur teruggerekend naar sRGB en afgerond op gehele waarden van 0 tot 255.
| Harmonie | Draaiing van de tint | Kleuren |
|---|---|---|
| Complementair | 0°, 180° | 2 |
| Analoog | −30°, 0°, +30° | 3 |
| Triadisch | 0°, 120°, 240° | 3 |
| Gesplitst complementair | 0°, 150°, 210° | 3 |
| Tetradisch (rechthoek) | 0°, 60°, 180°, 240° | 4 |
| Vierkant | 0°, 90°, 180°, 270° | 4 |
| Monochroom | geen draaiing; helderheid in 5 niveaus | 5 |
Voorbeeld: zuiver rood #FF0000 heeft H = 0°, S = 100%, L = 50%. Gedraaid over 180° ontstaat H = 180° – dat is cyaan #00FFFF, de complementaire kleur. Bij triadisch komen daar 120° (groen #00FF00) en 240° (blauw #0000FF) bij.
Monochroom palet
Bij "Monochroom" blijft de tint gelijk. De helderheid verandert in twee gelijke stappen richting zwart en in twee stappen richting wit. Bij de standaardkleur #3B82F6 (L ≈ 60%) liggen de niveaus rond 20%, 40%, 60%, 73% en 87%.
Leesbare tekst op de kleurstalen
Het label op elk kleurstaal is zwart of wit, afhankelijk van wat volgens de WCAG-formule voor relatieve luminantie het meeste contrast geeft. Zo haalt de tekst altijd minstens 4,58:1. Of twee kleuren uit je palet werken als tekst- en achtergrondkleur, controleer je met de contrastchecker.
Beperkingen
HSL is een eenvoudig geometrisch model, geen perceptueel gelijkmatig model: bij gelijke L oogt geel veel lichter dan blauw. De berekende harmonieën zijn dus een startpunt; op het oog kun je bijstellen. Grijstinten hebben geen tint: draaien levert dan steeds dezelfde kleur op.
Veelgestelde vragen
Wat is de complementaire kleur van blauw?
Op het HSL-kleurenwiel ligt die er 180° tegenover. Voor blauw #0000FF (H = 240°) is dat geel #FFFF00 (H = 60°); voor #3B82F6 (H ≈ 217°) een oranje rond #F6AF3B.
Welke invoerformaten begrijpt de generator?
HEX met 3, 4, 6 of 8 tekens (met of zonder #), rgb() en rgba(), hsl() en hsla(), hsv()/hsb(), hwb() en ook drie losse getallen zoals "59, 130, 246" (gelezen als RGB). Zowel de komma- als de spatienotatie van CSS Color 4 werkt.
Hoe gebruik ik de kleuren in CSS of een ontwerpprogramma?
Elk kleurstaal heeft een kopieerknop voor de HEX-waarde. "Kopiëren als CSS-variabelen" zet een :root-blok met --farbe-1, --farbe-2 … op het klembord. RGB- en HSL-waarden staan in de tabel eronder.
Waarom ogen sommige harmonieën onevenwichtig?
HSL meet helderheid zuiver rekenkundig. Bij dezelfde L-waarde ogen geel en cyaan veel lichter dan blauw of paars. Pas zo nodig de helderheid van losse kleuren aan of kies een minder verzadigde basiskleur.
Hoe kies ik kleuren die bij elkaar passen?
Analoge en monochrome paletten zijn het veiligst: de kleuren liggen dicht bij elkaar op het wiel. Complementair en triadisch geven meer contrast; dan domineert meestal één kleur en dienen de andere als accent.
Bronnen en wettelijke basis
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Bijgewerkt op:
Vergelijkbare tools
- Kleurconverter: HEX, RGB, HSL, HSV, CMYKZet kleuren om: HEX naar RGB, RGB naar HEX, HSL, HSV, HWB en CMYK. Typ elk formaat in of gebruik de kleurkiezer en kopieer het resultaat, in je browser.
- Contrast checker: kleurcontrast controleren (WCAG 2.2)Controleer het contrast tussen tekst- en achtergrondkleur: contrastverhouding volgens WCAG 2.2 met AA/AAA-oordeel voor normale tekst, grote tekst en UI.
- Kleur uit afbeelding halen (pipet)Haal kleurcodes uit elke afbeelding: open een foto, klik op een plek en kopieer HEX, RGB of HSL, plus de hoofdkleuren. Geen upload, alles in je browser.
- One Rep Max (1RM) berekenenSchat je one rep max op basis van gewicht en herhalingen met de formules van Epley en Brzycki, met een %1RM-tabel voor 1 tot 10 herhalingen. Werkt in kg of lb.
- Basaal metabolisme en energiebehoefte berekenenBereken je basaal metabolisme met de formule van Mifflin-St Jeor en je totale energiebehoefte per dag met de activiteitsniveaus (PAL) van FAO/WHO in kcal en kJ.
- BMI berekenen volgens de WHOBereken je BMI op basis van lengte en gewicht in cm en kg. Bekijk je WHO-categorie, van ondergewicht tot obesitas klasse III, en je gezonde gewicht.