Gratis hex kleurkiezer: kies of plak een kleur en krijg HEX-, RGB-, HSL- en OKLCH-waarden, tinten en schaduwen, en contrastscores tegen wit en zwart.
Hex Kleurkiezer
Kies een kleur of plak een HEX-, RGB- of HSL-waarde om elk formaat te krijgen dat u nodig hebt voor ontwerp en code: HEX, RGB, HSL en OKLCH. Bekijk een schaal van tinten en schaduwen, en controleer hoe leesbaar tekst erop is tegen wit en zwart.
Gebruik de kleurkiezer, of typ een waarde zoals #4F98FB, rgb(79, 152, 251) of hsl(215, 95%, 65%).
Kopieer elk formaat met één klik. OKLCH is het moderne CSS-formaat dat lichtheid consistent houdt over verschillende kleurtinten.
Klik op een tint of schaduw om deze de huidige kleur te maken.
Lees de contrastverhoudingen af om te bepalen of witte of zwarte tekst bij deze kleur past.
Streef voor knoppen naar minstens 4.5:1 contrast tussen het label en de knopkleur.
Bouw een palet vanuit één merkkleur: een lichte tint voor achtergronden, de kleur zelf voor knoppen, een donkere schaduw voor hover-status en tekst.
Schermen verschillen. Controleer uw merkkleur zowel op een telefoon als op een laptop.
Veelgestelde vragen
Wat is een hexadecimale kleurcode?
Een zescijferige code voor een kleur op het scherm, geschreven als # gevolgd door drie paren hexadecimale cijfers voor rood, groen en blauw. #FF0000 is puur rood; #000000 is zwart; #FFFFFF is wit.
Wat is het verschil tussen HEX, RGB en HSL?
Ze beschrijven dezelfde kleuren op verschillende manieren. HEX en RGB geven de hoeveelheden rood, groen en blauw. HSL geeft tint (de hoek op een kleurenwiel), verzadiging en lichtheid, wat makkelijker met de hand aan te passen is.
Wat is OKLCH en moet ik het gebruiken?
OKLCH is een nieuwer CSS-kleurformaat gebaseerd op hoe mensen kleur waarnemen. Twee kleuren met dezelfde L-waarde ogen even licht, wat consistente paletten makkelijker maakt. Alle huidige grote browsers ondersteunen het.
Hoe wordt contrast berekend?
Met de WCAG 2-formule: relatieve helderheid van de lichtere kleur plus 0.05, gedeeld door die van de donkerdere kleur plus 0.05. Voor een volledige controle van twee kleuren gebruikt u de We.Inc kleurcontrastchecker.
Een merkkleur kiezen die werkt op een website
Een merkkleur moet meerdere taken uitvoeren: opvallen op knoppen, leesbaar blijven achter witte tekst, en het oog niet vermoeien over een hele pagina. Middentonen blauw, groen en dieprood beheersen meestal alle drie. Zeer lichte kleuren (geel, pastelroze) zien er goed uit in een logo maar maken slechte knoppen, omdat noch witte noch zwarte tekst er zonder aanpassing goed op leest.
Het contrastpaneel toont dit direct. Als witte tekst onder 4.5:1 scoort, gebruik dan zwarte tekst of kies een donkerdere schaduw uit de schaal voor knoppen.
Tinten, schaduwen en een eenvoudig palet
Tinten mengen uw kleur met wit; schaduwen mengen deze met zwart. Een praktisch websitepalet heeft er maar een paar nodig: een zeer lichte tint voor sectieachtergronden, de hoofdkleur voor knoppen en links, en één donkerdere schaduw voor hover-status. Voeg neutrale grijstinten toe voor tekst en randen en u hebt een compleet, consistent geheel.
Om een specifiek paar tekst en achtergrond te controleren (bijvoorbeeld grijze tekst op een getinte achtergrond), gebruikt u de kleurcontrastchecker, die zowel WCAG AA als AAA scoort.