Kleurkiezer

Zo gebruik je de kleurkiezer

1. Klik op het kleurstaal onder Kies een kleur om de kleurkiezer van je browser te openen en kies een kleur. Je kunt ook een waarde typen of plakken in het veld Kleurcode: een HEX-code zoals #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) of een CSS-naam zoals tomato.
2. Het grote voorbeeld wordt direct bijgewerkt, met de HEX-code in zwart of wit, afhankelijk van wat het best leesbaar is op die achtergrond.
3. Kopieer onder Kleurcodes het formaat dat je nodig hebt met de knop Kopiëren ernaast: HEX, RGB, HSL, HSV of CMYK.
4. Klik op Willekeurige kleur als je inspiratie zoekt, of op Kies van het scherm (in browsers die dat ondersteunen, zoals Chrome en Edge) om een willekeurige pixel op je scherm te pakken, ook in andere vensters.

Alles gebeurt in je browser: er wordt geen kleur of afbeelding verstuurd.

Wat elke kleurcode betekent

• HEX is de zescijferige hexadecimale notatie van HTML en CSS. Elk paar cijfers is één kanaal (rood, groen, blauw) van 00 tot FF, dus #1E90FF betekent rood 30, groen 144, blauw 255.
• RGB geeft dezelfde drie kanalen als decimale getallen van 0 tot 255. Dat verwachten de meeste ontwerpprogramma’s en programmeerbibliotheken.
• HSL beschrijft een kleur met tint (een hoek van 0° tot 360° op het kleurenwiel), verzadiging en lichtheid. Handig om een kleur lichter of donkerder te maken door één getal te veranderen.
• HSV (ook HSB genoemd) gebruikt tint, verzadiging en waarde (helderheid). Dat is het model achter de kleurvlakken in Photoshop, Figma en veel andere programma’s.
• CMYK drukt de kleur uit als percentages cyaan, magenta, geel en zwarte inkt.

Over de CMYK-waarden

De CMYK-codes zijn een eenvoudige omrekening: K = 1 − max(R, G, B), dan C = (1 − R − K) / (1 − K), en hetzelfde voor M en Y. Dat is de standaardformule uit het leerboek, maar ze gebruikt geen ICC-profiel. Echt drukwerk hangt af van de pers, het papier en de inkt, dus een drukker zet je kleuren om met zijn eigen profiel en het resultaat kan afwijken. Gebruik deze getallen als vertrekpunt, niet als drukproef.

De contrastverhoudingen lezen

Onder de HEX-code toont het voorbeeld het Contrast op wit en het Contrast op zwart, berekend met de formule voor relatieve luminantie uit WCAG 2. Voor gewone lopende tekst op niveau AA is een verhouding van minstens 4,5:1 nodig, en 3:1 voor grote tekst en interface-elementen. Haalt je kleur op wit maar 3:1, gebruik haar dan voor grote koppen of iconen en kies een donkerdere tint voor tekst.

Tips

• Je kunt hexcodes zonder # plakken: 1e90ff werkt ook, net als korte vormen zoals f60.
• Waarden met transparantie, zoals rgb(0 0 0 / 50%), worden geaccepteerd; de kiezer toont de dekkende kleur.
• Het kleurenvenster van de browser verschilt per systeem. Heb je een precieze waarde nodig, dan is typen in het veld Kleurcode altijd exact.