Kleuren omrekenen
Reken een kleur om tussen HEX, RGB, HSL en HSV, met het contrast tegen zwart en wit.
Draait volledig in je browser. Er wordt niets geüpload, gelogd of opgeslagen.
Hexadecimaal
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Relatieve luminantie
- 0,2830
- Contrast op wit
- 3,15:1
- Contrast op zwart
- 6,66:1
HEX, RGB, HSL en HSV zijn vier manieren om dezelfde sRGB-kleur te schrijven. Welke handig is, hangt af van wat je doet: hexadecimaal om een waarde uit een ontwerp te kopiëren, HSL om iets een beetje lichter te maken zonder de tint te veranderen.
Hoe het werkt
De invoer wordt gelezen als kanalen voor rood, groen en blauw van acht bits plus een alfa, en alle uitvoer wordt uit die kanalen berekend. Niets wordt uit een andere uitvoer omgerekend, dus een waarde kan niet afdrijven door een keten van afrondingen.
De contrastcijfers volgen WCAG 2.1: elk kanaal wordt gelineariseerd, gewogen naar hoeveel het bijdraagt voor het oog, en de verhouding is (de lichtste + 0,05) gedeeld door (de donkerste + 0,05). De schaal loopt van 1 voor twee identieke kleuren tot 21 voor zwart op wit.
Voorbeelden
| Geval | Invoer | Resultaat |
|---|---|---|
| Een hexadecimale waarde uit een ontwerpbestand | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| De korte vorm, die elk cijfer herhaalt | #39d | #3399DD, not #039D |
| Met transparantie | rgb(52 152 219 / 0.5) | #3498DB80 |
Veelgestelde vragen
Betekent een contrast van 4,5 dat mijn tekst voldoet?
Dat hangt af van de tekst, en daarom krijg je het getal en geen oordeel. WCAG vraagt 4,5 voor normale tekst en 3 voor grote tekst, waarbij groot minstens 18 punt betekent, of 14 punt vet. Een tool die alleen twee kleuren ziet, kan niet weten welke regel geldt.
Waarom verandert er soms een cijfer als ik naar HSL omreken en terug?
Omdat hexadecimaal 256 stappen per kanaal heeft en HSL daar niet precies in op te delen is. De heen-en-terugweg kan één stap ernaast uitkomen. Hier worden alle notaties uit de oorspronkelijke kanalen berekend, dus de getoonde waarden liggen altijd het dichtst bij wat je hebt ingevuld.
Wat is het verschil tussen HSL en HSV?
Ze delen de tint en zijn het over de rest oneens. In HSL is een lichtheid van 100% wit en 50% de zuivere kleur. In HSV is een waarde van 100% de zuivere kleur en verschijnt wit pas als de verzadiging naar nul gaat. Ontwerptools tonen meestal HSV; CSS spreekt HSL.
Worden kleurnamen als “rebeccapurple” ondersteund?
Nee. De lijst met CSS-sleutelwoorden is een tabel van zo'n 150 namen die bij de specificatie hoort en niet bij de rekenkunde, en deze tool rekent om tussen notaties in plaats van namen op te zoeken.
Goed om te weten
- Alles hier is sRGB, de ruimte die het web altijd heeft verondersteld. De ruimere ruimtes die CSS Color 4 toevoegt — lab, oklch, display-p3 — beschrijven kleuren die sRGB niet haalt, en er één terugbrengen naar sRGB vraagt een beslissing over wat je doet met de kleuren die erbuiten vallen. Die beslissing wordt hier niet genomen.
- De contrastcijfers zijn getallen, geen oordelen. Of een combinatie voldoet, hangt af van de grootte en de dikte van de tekst, en die kent een kleur op zich niet.