Zo gebruik je het
- Voer een kleur in — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — of kies er een met de kleurkiezer.
- Kopieer de gewenste notatie uit de lijst.
- Stel een achtergrondkleur in om de contrastverhouding en de WCAG AA/AAA-resultaten te controleren.
- Klik op een tint in de schaal om die te gebruiken.
Opties uitgelegd
- HEX / RGB
- Schermkleuren als rood, groen en blauw van 0–255. #rrggbbaa en rgb(… / 50%) voegen transparantie toe.
- HSL / HSV
- Tint, verzadiging en lichtheid (of waarde). Handig om een kleur handmatig lichter of donkerder te maken.
- OKLCH
- Een perceptuele kleurruimte uit CSS Color 4. Het aanpassen van de lichtheid houdt de tint en waargenomen kleurintensiteit gelijk, wat het ideaal maakt voor paletten en donkere thema's.
- CMYK
- Een eenvoudige omzetting, alleen ter referentie. Echte drukkleuren hangen af van het kleurprofiel van de drukker, vraag die dus om exacte waarden.
- Contrastverhouding
- WCAG 2.2 vereist op niveau AA 4,5:1 voor normale tekst en 3:1 voor grote tekst (18pt, of 14pt vet); op niveau AAA 7:1 en 4,5:1.
Voorbeeld
#0f766e is rgb(15 118 110), hsl(175 77% 26%) en oklch(51.1% 0.086 186.4). Op een witte achtergrond is de contrastverhouding ongeveer 5,5:1, wat voldoet aan WCAG AA voor alle tekstgroottes.
Veelgebruikte kleuren in elk formaat
CSS-kleurnamen en hun waarden. CMYK is hier een eenvoudige wiskundige omzetting; gebruik voor professioneel drukwerk de CMYK-waarden uit het kleurprofiel van je drukker.
| CSS-naam | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Welk formaat gebruik je
HEX is de kortste manier om een kleur in CSS en ontwerptools te schrijven: twee hexcijfers voor elk van rood, groen en blauw.
RGB is dezelfde informatie in decimalen, en rgb(255 0 0 / 50%) voegt transparantie toe.
HSL beschrijft tint, verzadiging en lichtheid, waardoor je gemakkelijk lichtere of donkerdere tinten van dezelfde kleur maakt door alleen het laatste getal te wijzigen.
OKLCH is een nieuwer CSS-formaat waarbij gelijke stappen in lichtheid voor het oog even verschillend lijken — handig voor toegankelijke kleurenpaletten.
Veelgestelde vragen
Wat is een goede contrastverhouding voor tekst?
Minstens 4,5:1 voor lopende tekst (WCAG AA). Puur zwart op wit is 21:1; het gangbare grijs #767676 op wit is 4,54:1, en voldoet daarmee net.
Waarom verschilt de CMYK-waarde van Photoshop?
Photoshop rekent om via een ICC-kleurprofiel voor een specifieke pers en papiersoort. Deze tool gebruikt de eenvoudige wiskundige formule, wat prima is voor schattingen maar niet voor drukproeven.
Wat is het verschil tussen HSL en OKLCH?
HSL is een eenvoudige herschikking van RGB, waardoor een geel en een blauw met dezelfde lichtheid heel verschillend van helderheid ogen. OKLCH is ontworpen zodat gelijke lichtheid voor het oog ook even licht aanvoelt.
Kan ik OKLCH nu al in CSS gebruiken?
Ja. oklch() werkt in alle actuele grote browsers.
Privacy
Deze tool draait volledig in je browser. Je bestanden en tekst worden op je eigen apparaat verwerkt en nooit naar onze servers geüpload.