HEX, RGB, HSL, CMYK en tekstcontrast controleren

Een kleurcode is één kleur in een andere schrijfwijze. HEX, RGB en HSL beschrijven hetzelfde licht op een scherm, dus ze zijn exact naar elkaar om te rekenen, behalve afrondingsverschillen. CMYK beschrijft inkt op papier, dus de omzetting van schermwaarden is alleen een schatting. De WCAG-contrastverhouding is een apart getal dat vergelijkt hoe licht twee kleuren zijn, en dat bepaalt of tekst leesbaar is. Plak een kleur in de kleurconverter om alle formaten tegelijk te zien.

KleurconverterKleur in een ander formaat nodigGratis doen

Staat de kleur die je zoekt in een foto, een logo of een screenshot? Pak hem dan eerst met de kleurkiezer voor afbeeldingen en plak de HEX-code hier. Zo pak je een exacte kleur uit een afbeelding legt de stappen uit.

HEX en RGB zijn dezelfde getallen

Een HEX-code bestaat uit drie paren hexadecimale cijfers. #34D6A0 bevat een waarde voor rood, groen en blauw. Elk paar is een getal van 00 tot FF, wat 0 tot 255 in het decimale stelsel is. Dus 34 is 52, D6 is 214 en A0 is 160, en de RGB-vorm is rgb(52, 214, 160).

Het getal in hexadecimaal schrijven verandert alleen hoe het eruitziet. De verkorte schrijfwijze #abc betekent #aabbcc, waarbij elk cijfer dubbel telt. Een code van acht cijfers voegt aan het eind een alfawaarde toe, van 00 voor volledig transparant tot FF voor volledig ondoorzichtig. #34D6A080 is dus ongeveer half transparant. RGBA schrijft dezelfde alfawaarde als getal van 0 tot 1.

CSS accepteert ook kleurnamen. rebeccapurple is #663399. De converter leest namen via de browser zelf, dus elke naam die de browser kent, werkt.

HSL beschrijft een kleur zoals mensen die beschrijven

HSL staat voor tint (hue), verzadiging (saturation) en lichtheid (lightness). De tint is een hoek op een kleurenwiel: rood is 0 graden, groen is 120 en blauw is 240. Verzadiging zegt hoe ver de kleur van grijs af staat, en lichtheid zegt hoe ver hij van zwart of wit af staat.

Dezelfde #34D6A0 is hsl(160, 66%, 52%). De tint ligt tussen groen en blauw, de verzadiging is hoog en de lichtheid ligt net boven het midden. HSL is de makkelijkste vorm om met de hand aan te passen, omdat je de tint kunt houden en alleen de lichtheid verschuift om een lichtere of donkerdere variant te krijgen.

HSV lijkt op HSL, maar gebruikt in plaats van lichtheid de helderheid (value) van het sterkste kanaal. Sommige kleurkiezers gebruiken die, dus je kunt die tegenkomen in andere tools. De converter toont HSV naast HSL, zodat je de twee kunt vergelijken.

CMYK is voor inkt, dus het is een schatting

Schermen voegen licht toe: rood, groen en blauw samen maken wit. Printers halen licht weg met inkt: cyaan, magenta, geel en zwart op wit papier. De twee systemen passen niet exact op elkaar, dus een CMYK-waarde is altijd een vertaling.

De converter gebruikt de eenvoudige formule. Zwart is K: één min de grootste van de rood-, groen- en blauwwaarden op een schaal van 0 tot 1. Cyaan, magenta en geel worden daarna berekend uit wat K overlaat. De formule houdt geen rekening met de inkt, het papier of het kleurprofiel van de drukker. Het drukresultaat wijkt dus af, en heel felle kleuren vallen soms buiten wat CMYK-inkten überhaupt kunnen drukken. Gebruik de CMYK-waarde om het gesprek met de drukker te starten, en vraag om een proef voordat je een grote oplage laat drukken.

Contrast gaat over helderheid, niet over tint

De WCAG-contrastverhouding vergelijkt twee kleuren op hun relatieve luminantie. Luminantie wordt berekend uit de rood-, groen- en blauwwaarden na gammacorrectie, en groen telt het zwaarst omdat het menselijk oog daar het gevoeligst voor is. Elk kanaal wordt eerst van de schaal 0 tot 255 omgezet, en de luminantie is 0,2126 keer rood, plus 0,7152 keer groen, plus 0,0722 keer blauw.

De verhouding is de lichtere luminantie plus 0,05, gedeeld door de donkerdere luminantie plus 0,05. Zwart op wit geeft 21 tot 1, de hoogst mogelijke waarde. Twee kleuren kunnen in tint behoorlijk verschillen en toch een lage verhouding hebben, als ze even licht zijn. Dat is precies het geval dat de controle moet opvangen. Dezelfde lage contrast is ook de reden waarom QR-codes die niet scannen mislukken.

De drempelwaarden

WCAG 2.x kent twee niveaus, en de vereiste verhouding hangt af van de grootte van de tekst.

• Niveau AA: 4,5 tot 1 voor normale tekst, en 3 tot 1 voor grote tekst.
• Niveau AAA: 7 tot 1 voor normale tekst, en 4,5 tot 1 voor grote tekst.

Grote tekst is 24 pixels of groter, of 18,66 pixels en vet. Alles wat kleiner is, telt als normale tekst. Grijze tekst op wit is een veelvoorkomend probleem. Een middelgrijs als #777777 op wit komt op ongeveer 4,48 tot 1 uit. Dat haalt AA voor normale tekst net niet, maar slaagt wel voor AA bij grote koppen.

De converter toont de verhouding afgerond op twee decimalen, maar elke beoordeling gebruikt de exacte waarde. Een waarde die als 4,50 wordt getoond, kan dus alsnog falen als hij net onder de grens ligt. De controle meet maar één ding. Het houdt geen rekening met lettergewicht, regelafstand of hoe mensen met kleurenblindheid een ontwerp zien. Test daarom ook de echte pagina op de echte formaten.

Tinten en schaduwen

De strook onder de converter toont negen stappen rond de kleur: vier tinten gemengd met wit, de kleur zelf, en vier schaduwen gemengd met zwart. Klik op een stap om de HEX-code te kopiëren. Dat helpt als je een set verwante kleuren nodig hebt, zoals een lichte achtergrond, een hover-status en een donkere tekstkleur, die allemaal uit één merkkleur komen. Controleer elk paar dat je kiest met het contrastgedeelte voordat je het gebruikt.

Zo werkt het met fixmint

1. Plak een kleur als HEX, RGB, HSL of een CSS-naam zoals rebeccapurple in het vak Kleur.
2. Lees de rijen HEX, RGB, HSL, HSV en CMYK. Druk naast de rij die je nodig hebt op Kopiëren. CMYK is als benadering aangegeven.
3. Typ je achtergrondkleur in Achtergrond, of gebruik het kleurvakje, en lees de verhouding onder Op wit, Op zwart en Op jouw achtergrond.
4. Controleer de vier markeringen onder elke verhouding: AA en AAA, elk voor normale en grote tekst.
5. Tik onder Tinten en schaduwen op een kleurvakje om het te kopiëren.

Snelle antwoorden

Is de CMYK-waarde exact?

Nee. Het is een eenvoudige rekenkundige omzetting die de drukker, het papier en het kleurprofiel negeert. Zie het als een startpunt en vraag om een proef.

Maakt een goede contrastverhouding een ontwerp toegankelijk?

Het betekent dat de tekstkleuren aan één meetbare drempel voldoen. Toegankelijkheid hangt ook af van grootte, regelafstand, beweging en de manier waarop de pagina is gebouwd. De verhouding is dus een richtlijn, geen volledige beoordeling.

Welk formaat moet ik in een stylesheet opslaan?

Het formaat dat je het makkelijkst leest en bewerkt. HEX is compact en veelgebruikt. HSL is makkelijker met de hand aan te passen, omdat je de lichtheid verandert zonder de tint te wijzigen.