Kleuren omzetten
Plak een kleur in elk CSS-formaat en krijg alle andere, plus het contrast.
Plak HEX, rgb(), hsl(), hwb() of een CSS-kleurnaam, of kies een kleur
Lichtere en donkerdere tinten
Waarden
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Een benadering. De gedrukte kleur hangt af van de inkt en het papier, dus vraag je drukker om de exacte waarden.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Dichtstbijzijnde CSS-naam
- royalblue
Contrast (WCAG)
Tekst in deze kleur op elke achtergrond. Normale tekst heeft 4,5:1 nodig voor AA en 7:1 voor AAA; grote tekst (18 pt, of 14 pt vet) heeft 3:1 en 4,5:1 nodig.
Op wit
Grote tekst
Pa’s wijze lynx bezag vroom het fikse aquaduct
5.71:1
- AA normaal geslaagd
- AAA normaal gezakt
- AA groot geslaagd
- AAA groot geslaagd
Op zwart
Grote tekst
Pa’s wijze lynx bezag vroom het fikse aquaduct
3.68:1
- AA normaal gezakt
- AAA normaal gezakt
- AA groot geslaagd
- AAA groot gezakt
Op #ffffff
Grote tekst
Pa’s wijze lynx bezag vroom het fikse aquaduct
5.71:1
- AA normaal geslaagd
- AAA normaal gezakt
- AA groot geslaagd
- AAA groot geslaagd
Volgende: Achtergrond transparant maken · Grafiek maken
Een probleem met deze tool melden
Hoe gebruik je Kleurconverter
Voer een kleur in
Plak een HEX-code, rgb(), hsl(), hwb() of een naam als tomato, of kies er een met de kleurkiezer.
Kopieer het formaat dat je nodig hebt
Elk formaat wordt bijgewerkt terwijl je typt. Kopieer er een met de eigen knop, of kies je vaste formaat voor de grote kopieerknop.
Controleer het contrast
Zie de WCAG-contrastverhouding op wit, op zwart en op een achtergrond naar keuze, met AA- en AAA-resultaten voor normale en grote tekst.
Waarom kiezen voor Utils365
Leest elke CSS-kleur
HEX met 3, 4, 6 en 8 cijfers, rgb() en hsl() in de oude kommasyntax of de nieuwe met spaties, hwb(), percentages, tooneenheden en alle 148 kleurnamen.
Ook moderne formaten
Krijg OKLCH voor designsystemen en wide-gamut-CSS, HWB en HSV voor kleurkiezers, en HEX met alfa voor doorschijnende kleuren.
Toegankelijkheid ingebouwd
Contrastverhoudingen volgen WCAG 2 exact en worden nooit naar boven afgerond tot een voldoende, dus 4,49:1 telt niet als 4,5:1.
Lichtere en donkerdere tinten
Vijf lichtere en vijf donkerdere stappen staan onder het kleurvlak. Klik er een aan om die de huidige kleur te maken.
Veelgestelde vragen
Wat is het verschil tussen HEX en RGB?
In de kleur zelf geen. Beide geven rood, groen en blauw van 0 tot 255. HEX schrijft elk als twee hexadecimale cijfers, dus rgb(58, 91, 217) is #3a5bd9. HEX is korter, rgb() is makkelijker te lezen en met de hand aan te passen.
Wat is HSL?
Tint, verzadiging en lichtheid. De tint is de positie op de kleurencirkel in graden (0 is rood, 120 groen, 240 blauw), de verzadiging is hoe fel de kleur is, en de lichtheid loopt van zwart bij 0% tot wit bij 100%. Zo schrijf je makkelijk lichtere, donkerdere of gedempte versies van een kleur.
Waarom klopt de CMYK niet met mijn gedrukte kleur?
Schermen mengen licht en printers mengen inkt, en het resultaat hangt af van de inkt, het papier en het printerprofiel. De getoonde CMYK gebruikt de eenvoudige standaardformule, dus zie het als vertrekpunt en vraag je drukker om de exacte waarden.
Wat is een WCAG-contrastverhouding?
Een maat voor hoe ver twee kleuren in helderheid uit elkaar liggen, van 1:1 (gelijk) tot 21:1 (zwart op wit). WCAG AA vraagt minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst; AAA vraagt 7:1 en 4,5:1.
Wat is OKLCH?
Een nieuwere manier om kleuren in CSS te schrijven via lichtheid, chroma en tint, gebaseerd op hoe mensen kleur zien. Als je de lichtheid verandert, blijft de tint er hetzelfde uitzien, wat het populair maakt voor designsystemen en kleurschalen.
Hoe werkt de kleurnaam?
Komt de kleur precies overeen met een van de 148 CSS-kleurnamen, dan zie je die naam. Anders krijg je de naam die er visueel het dichtst bij ligt, handig om een kleur in woorden te beschrijven.