Hex-kleurkiezer en -converter (RGB, HSL, HSV, CMYK, OKLCH)
Converteer elke kleur naar HEX, RGB, HSL, HSV, CMYK en OKLCH, controleer contrast, kopieer harmoniestaaltjes en exporteer CSS of JSON—direct in uw browser.
Voer hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() of een CSS-kleurnaam in. Ongeldige waarden behouden de laatste geldige conversie.
Dichtstbijzijnde CSS-naam: royalblue
Conversies
Op witte achtergrond
3.68:1
Voldoet aan WCAG AA (alleen grote tekst)
Op zwarte achtergrond
5.71:1
Voldoet aan WCAG AA (normale tekst)
Staaltjes exporteren
Kies of plak elk kleurformaat, converteer naar HEX, RGB, HSL, HSV, CMYK en OKLCH, controleer WCAG-contrast, genereer harmoniestaaltjes, kopieer waarden en exporteer CSS of JSON. Gratis, snel en draait volledig in uw browser.
Hoe u deze kleurenkiezer gebruikt
Typ of plak een ondersteund kleurformaat, pas de dekking aan of gebruik de native kiezer. De pagina converteert direct naar HEX, RGB, HSL, HSV, CMYK en OKLCH, toont WCAG-contrast op wit en zwart, genereert harmoniestaaltjes en een tint/schaduwstrook, en houdt alles kopieerklaar. Deel uw instelling via de URL—de status wordt opgeslagen in de queryreeks.
HEX-, RGB-, HSL-, HSV-, CMYK- en OKLCH-referentie
Hex is een compacte RGB-codering. RGB beschrijft rood/groen/blauw-kanalen. HSL drukt tint, verzadiging en lichtheid uit; HSV gebruikt tint, verzadiging en waarde (helderheid). CMYK modelleert drukinktpercentages. OKLCH is een perceptueel uniforme CSS-kleurruimte. Deze tool gebruikt deterministische berekeningen in uw browser—geen uploads en geen externe API's.
Complementair, analoog, triadisch, split-complementair, tetradisch en monochromatisch
Complementair draait de tint 180°. Analoog stapt de tint in vaste hoeken rond de basis. Triadisch gebruikt 120°-offsets. Split-complementair voegt twee tinten nabij het complement toe. Tetradisch gebruikt 90°-rechthoekoffsets. Monochromatisch behoudt de tint en varieert de lichtheid. Telcontroles gelden voor analoge en monochrome modi.
CSS-variabelen en JSON-export
Export produceert :root-eigenschappen met stabiele namen (bijvoorbeeld --color-base, --color-analogous-1) en JSON met baseHex, alpha, namedColor, harmoniemodus, contrastverhoudingen en staallijsten voor scripts of designtokens.
WCAG-contrastcontrole
Het contrastverhouding wordt berekend uit relatieve luminantie volgens WCAG 2.x. AA vereist 4,5:1 voor normale tekst en 3:1 voor grote tekst; AAA vereist 7:1. Gebruik de voorbeelden bij het kiezen van tekst- of UI-kleuren op lichte of donkere achtergronden.
Veelgestelde vragen
Welke kleurformaten kan ik invoeren?
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() en alle standaard CSS-kleurnamen zoals cornflowerblue of rebeccapurple.
Wordt #ABC uitgebreid naar zes cijfers?
Ja. Drietallige hex wordt per cijferpaar uitgebreid, dus #ABC wordt #AABBCC.
Wat gebeurt er als mijn kleur ongeldig is?
U ziet een inlinefout. De laatste geldige kleur blijft in de conversierijen, de kiezer en de exports staan tot u opnieuw een geldige waarde invoert.
Hoe werkt de WCAG-contrastcontrole?
Deze berekent de contrastverhouding tussen uw kleur en puur wit of zwart met relatieve luminantie. Resultaten tonen of de kleur de AA- of AAA-drempels haalt voor normale of grote tekst.
Hoe worden harmoniekleuren berekend?
Ze zijn deterministisch: complementair is een 180°-tintverschuiving; analoog gebruikt vaste tintstappen; triadisch 120°-offsets; split-complementair tinten nabij het complement; tetradisch 90°-rechthoekoffsets; monochromatisch varieert lichtheid met behoud van tint en verzadiging van de basis.
Wat zit er in de JSON-export?
Stabiele sleutels: baseHex, alpha, namedColor, harmony, harmonyCount waar van toepassing, harmonySwatches, tintShadeStrip, stripCount en contrastverhoudingen—geschikt voor tooling of documentatie.
Kan ik mijn kleuren delen?
Ja. De URL wordt bijgewerkt met hex, alpha, harmoniemodus, aantallen en strookgrootte zodat u een exacte instelling kunt bookmarken of delen.