Kleurkiezer (HEX, RGB, HSL, OKLCH)
Kies een kleur op het saturatie-helderheidsvlak of typ HEX, RGB, HSL of OKLCH. Alle formaten blijven synchroon, met een tint/shade-schaal, eyedropper (Chromium) en export naar CSS en JSON.
Kleuren kiezen en exporteren
1. Sleep over het vlak en de huesschuif, of plak HEX/RGB/HSL/OKLCH.
2. Lees gesynchroniseerde HEX, RGB, HSL en OKLCH in de balk.
3. Klik een schaduw of harmonie-swatch om verwante kleuren te verkennen.
4. Kopieer een waarde, een ?hex=-link of exporteer CSS-variabelen / JSON.
Voorbeelden van de kleurkiezer
Merk-terracotta #8F665E
De HSV-kiezer houdt de hue vast terwijl je donkerder gaat voor hover. Exporteer --color en --shade-* als CSS-variabelen.
Analoog dashboardpalet
Kies Analoog voor hues ±30° en ±60°. Kopieer de strook als custom properties voor kaarten en grafieken.
OKLCH voor gelijkmatige stappen
De ramp varieert OKLCH-lichtheid, gelijkmatiger dan HEX met wit mengen. Gebruik oklch() in moderne CSS.
Wanneer dit hulpmiddel te gebruiken
• Wanneer je UI-kleuren kiest en HEX, RGB, HSL en OKLCH tegelijk nodig hebt.
• Wanneer je hover/muted-tinten afleidt van één merkhue.
• Wanneer je een klein palet (harmonie + ramp) als CSS-variabelen exporteert.
Harmonieën voor UI-paletten
Complementair ligt 180° uit elkaar — sterk contrast, spaarzaam voor CTA’s. Analoog (±30–60°) voelt samenhangend in dashboards. Triade en tetrade geven meer variatie; verlaag de saturatie van extra’s zodat primary leidt. Check tekst met de WCAG-contrastchecker.
Veelgestelde vragen
HEX vs RGB vs HSL vs OKLCH?
HEX en RGB zijn dezelfde sRGB-kleur. HSL is handig voor hue/lichtheid. OKLCH is perceptueel: vergelijkbare L-stappen ogen gelijkmatiger, en oklch() is geldige moderne CSS.
Werkt de eyedropper in elke browser?
De EyeDropper-API zit in Chromium (Chrome, Edge). Elders typ je een waarde of gebruik je de visuele kiezer.
Kan ik een kleur delen?
Ja. De URL krijgt ?hex=RRGGBB. Kopieer de link om dezelfde kleur te openen.
Gaan kleuren naar een server?
Nee. Conversie, harmonieën en export draaien lokaal in de browser.