Wat het doet
De kleurconverter neemt een kleur in elke gangbare CSS-notatie en toont die meteen in alle andere: HEX, RGB, HSL, HSV en CMYK. Je ziet ook een kleurstaal, de CSS-kleurnaam als er een exacte match is, en de contrastverhouding op wit en zwart, zodat je de leesbaarheid kunt controleren.
Zo gebruik je het
- Typ of plak een kleur in het veld Kleur, of gebruik de kleurkiezer ernaast.
- Alle notaties worden bijgewerkt terwijl je typt. Klik op Kopiëren naast de notatie die je nodig hebt.
- Zet Hex in hoofdletters aan als je stijlgids hex in hoofdletters schrijft.
- Bekijk de contrastregels voordat je de kleur voor tekst gebruikt: een groen label betekent dat de kleur voldoet aan WCAG AA.
Voorbeeld
#1e90ff is de CSS-kleur dodgerblue. Omgezet wordt dat:
- RGB:
rgb(30, 144, 255) - HSL:
hsl(210, 100%, 55.9%) - HSV:
hsv(210, 88.2%, 100%) - CMYK:
cmyk(88%, 44%, 0%, 0%)
Het contrast op wit is 3.24:1: genoeg voor grote koppen, maar niet voor lopende tekst.
Kleurmodellen in het kort
- HEX en RGB beschrijven hoeveel rood, groen en blauw licht een scherm uitstraalt. Browsers en ontwerptools gebruiken ze intern.
- HSL beschrijft tint (de hoek op de kleurencirkel), verzadiging en lichtheid, waardoor je makkelijk lichtere of donkerdere varianten van dezelfde kleur maakt.
- HSV (ook HSB genoemd) wordt door de meeste kleurkiezers in ontwerpsoftware gebruikt.
- CMYK beschrijft cyaan, magenta, gele en zwarte inkt voor drukwerk.
Kleuren met transparantie, zoals #1e90ff80 of rgb(30 144 255 / 50%), worden in HEX, RGB en HSL met een alfakanaal getoond.
Veelgestelde vragen
› Hoe zet ik HEX om naar RGB?
Splits de zes hexcijfers in drie paren en lees elk paar als een getal van 0 tot 255. Voor #1e90ff is dat 1e = 30, 90 = 144 en ff = 255, dus rgb(30, 144, 255). Deze tool doet het voor je terwijl je typt.
› Welke notaties kan ik plakken?
Hex met of zonder # (3, 4, 6 of 8 cijfers), rgb() en rgba(), hsl() en hsla() in zowel komma- als spatiesyntaxis, percentages, hoekeenheden zoals deg en turn, en alle 148 CSS-kleurnamen.
› Wat betekent de contrastverhouding?
Het is het WCAG 2-contrast tussen de kleur en een witte of zwarte achtergrond. Lopende tekst heeft minstens 4.5:1 nodig voor niveau AA; grote tekst (ongeveer 24px, of 19px vet) heeft 3:1 nodig.
› Waarom is CMYK maar bij benadering?
Drukkers gebruiken inktprofielen die afhangen van papier en pers. De CMYK-waarde hier komt uit de standaard apparaatonafhankelijke formule: goed als startpunt, maar geen vervanging voor een drukprofiel.