Ctrl K

Kleurcode converter

Zet een kleur om tussen HEX, RGB, HSL en CMYK in je browser: niets wordt geüpload, je kunt elke notatie plakken of een kleur kiezen, en je ziet meteen of witte of zwarte tekst erop leesbaar is.

Plak een code in een ander formaat en de rest wordt ingevuld. Ook een CSS-kleurnaam werkt.

of kies een kleur
RGB
HSL
CMYK
  • HEX
  • RGB
  • HSL
  • CMYK

Leesbaarheid van tekst op deze kleur

Witte tekst
Zwarte tekst

Zo werkt het

  1. Geef een kleur op

    Typ of plak een code (#1e90ff, rgb(30, 144, 255), hsl(...)) of een kleurnaam, of kies een kleur met de kleurkiezer.

  2. Zie alle formaten

    Direct staan HEX, RGB, HSL en CMYK er netjes naast. Pas een waarde aan en de rest verandert mee.

  3. Kopieer wat je nodig hebt

    Met één klik kopieer je de code voor je CSS, ontwerp of drukwerk. Eronder zie je of witte of zwarte tekst goed leesbaar is.

De formaten

  • HEX (#1e90ff) is de gebruikelijke manier om een kleur op het web te schrijven. De drie paar cijfers zijn de hoeveelheid rood, groen en blauw, van 00 tot ff. Een korte vorm als #f80 is hetzelfde als #ff8800.
  • RGB (rgb(30, 144, 255)) geeft rood, groen en blauw als getal van 0 tot 255.
  • HSL (hsl(210, 100%, 56%)) geeft tint (0 tot 360 graden op het kleurenwiel), verzadiging en lichtheid. Handig om een kleur lichter of donkerder te maken zonder de tint te veranderen.
  • CMYK (cmyk(88%, 44%, 0%, 0%)) is de notatie van drukwerk: cyaan, magenta, geel en zwart.

In het bovenste veld kun je een code in elk formaat plakken: #1e90ff, 1e90ff, #f80, rgb(30 144 255), hsl(210, 100%, 56%) of een naam zoals dodgerblue. Een transparantiewaarde (alfa) wordt genegeerd.

Gebruik in CSS

Modern CSS accepteert al deze notaties, dus gebruik de notatie die je taak het makkelijkst maakt. HSL is het handigst voor een palet: houd de tint en verander de lichtheid voor een hoverkleur, rand of achtergrondtint. HEX is compact en komt uit ontwerptools. Wil je een transparante versie, schrijf rgb(30 144 255 / 50%) of voeg twee hexcijfers toe (#1e90ff80).

Toegankelijke kleuren kiezen

Een tekstkleur is alleen leesbaar als het contrast met de achtergrond hoog genoeg is. WCAG vraagt 4,5 : 1 voor normale tekst en 3 : 1 voor grote tekst. De controle onder het resultaat geeft de verhouding voor witte en zwarte tekst; bij een middentoon als achtergrond slaagt meestal de ene en de andere niet. Test tekstkleuren op knoppen en banners voordat je ze live zet.

Druk en scherm verschillen

De omzetting naar CMYK is een gewone formule; drukkers werken met kleurprofielen, dus de gedrukte kleur kan afwijken van wat je op je scherm ziet. Felle schermkleuren, zoals een verzadigd blauw of groen, kun je niet exact met inkt drukken. Vraag je drukker om een proef van huiskleuren.

Zie ook: CSS Minify · CSS Beautify.

Veelgestelde vragen

Wat is het verschil tussen HEX en RGB?

Ze bevatten dezelfde informatie. HEX schrijft de waarden voor rood, groen en blauw elk als twee hexadecimale cijfers, RGB als getallen van 0 tot 255.

Waarom ziet mijn CMYK-kleur er op papier anders uit?

De omzetting is een eenvoudige formule en drukkers gebruiken kleurprofielen. Schermkleuren kunnen ook feller zijn dan inkt kan weergeven.

Welke contrastverhouding heb ik nodig?

Minstens 4,5 : 1 voor normale tekst (WCAG AA) en 3 : 1 voor grote tekst. 7 : 1 is het strengere AAA-niveau.

Wordt mijn kleur ergens heen gestuurd?

Nee. De omzetting gebeurt in je browser en er wordt niets geüpload.