TF

Ontwerp en CSS

Kleurconverter en contrastcontrole

Reken kleuren om tussen HEX, RGB, HSL, HSV, HWB, CMYK en OKLCH en controleer het WCAG-contrast voor toegankelijke tekst.

HEX, rgb(), hsl(), hsv(), hwb(), cmyk(), oklch() of een CSS-naam zoals tomato.

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

Lichtere en donkere tinten

Wat is deze tool?

Plak een kleur in elk formaat — #ff6347, rgb(255 99 71), hsl(9 100% 64%) of gewoon tomato — en kopieer hem in alle andere formaten. Schakel naar de contrastcontrole om tekst- en achtergrondkleuren te testen volgens WCAG 2 en de dichtstbijzijnde geschikte kleur te krijgen als een paar niet slaagt.

Schermen mengen rood, groen en blauw licht, dus HEX en RGB beschrijven kleuren zoals monitors ze tonen. HSL en HSV zijn makkelijker met de hand aan te passen, CMYK benadert drukinkt en OKLCH is een moderne waarnemingsgelijke kleurruimte in CSS.

WCAG-contrastverhoudingen lopen van 1:1 tot 21:1. Normale tekst heeft minstens 4,5:1 nodig voor AA en 7:1 voor AAA; grote tekst (24px, of 18,66px vet) en interface-elementen hebben 3:1 nodig. Doorschijnende tekstkleuren worden eerst met de achtergrond gemengd.

Zo gebruik je: Kleuren omrekenen en contrast

  1. Typ of plak een kleur, of kies er een met de kleurkiezer.
  2. Kopieer het formaat dat je nodig hebt: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH of de CSS-kleurnaam.
  3. Klik op een lichtere of donkere tint om varianten van dezelfde kleur te verkennen.
  4. Open de contrastcontrole, stel tekst- en achtergrondkleur in en kijk of ze WCAG AA en AAA halen.
  5. Slaagt een paar niet, gebruik dan de voorgestelde kleur — die houdt de tint en past de helderheid aan.

Voorbeelden

Tomato in andere formaten

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Veelgestelde vragen

Hoe reken ik HEX om naar RGB?

Plak de HEX-code, bijvoorbeeld #3366cc, en kopieer de RGB-regel: rgb(51 102 204). Elk paar hexcijfers is één kanaal van 0 tot 255.

Welke contrastverhouding heb ik nodig?

Voor lopende tekst minstens 4,5:1 (WCAG AA). Grote koppen en pictogrammen hebben 3:1 nodig. Ga voor 7:1 (AAA) bij lange teksten of voor slechtzienden.

Is de CMYK-omrekening nauwkeurig voor drukwerk?

Het is een apparaatonafhankelijke benadering. Het echte resultaat hangt af van papier en printerprofiel, dus gebruik het kleurprofiel van je drukker voor definitieve bestanden.

Wat is OKLCH?

OKLCH beschrijft kleuren met helderheid, chroma en tint in een waarnemingsgelijke ruimte. Moderne CSS ondersteunt het en het maakt consistente paletten eenvoudig.

Later meer mogelijkheden nodig?

Premiumtools, hogere limieten en API-toegang staan op de planning. V1 blijft gratis en privé in je browser.