Kleurconverter voor echt UI-werk

Converteer kleurwaarden, controleer het contrast en verken gerelateerde paletten voordat een design token in productie komt.

Klik om een kleur te kiezen
4.70vs Black
4.46vs White
WCAG-contrastcontrole
Een contrastverhouding van 4,5:1 is de gebruikelijke WCAG-basislijn voor normale hoofdtekst. Grote tekst heeft een lagere drempel, maar een zwak contrast is nog steeds schadelijk voor echte gebruikers.
HEX
RGB
HSL
CMYK

Voorgestelde kleurrelaties

Complementair
#6366f1
#f1ef63
Analoog
#63acf1
#6365f1
#a863f1
Tinten
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

Gids voor kleurformaten

HEX

Een compact formaat dat veel wordt gebruikt in webontwerp, meestal geschreven als een hexadecimale waarde van zes cijfers.

RGB

Een schermgericht kleurmodel op basis van rode, groene en blauwe lichtwaarden.

HSL

Een voor mensen leesbaarder model opgebouwd rond tint, verzadiging en lichtheid. Het is handig bij het maken van lichtere, donkerdere of gerelateerde UI-statussen.

CMYK

Een printgericht model gebaseerd op cyaan, magenta, geel en key black. Verwacht enige afwijking bij het vertalen van heldere schermkleuren naar afdrukken.

Contrast

Contrast heeft invloed op formulieren, dashboards, prijstabellen, foutstatussen en elke plaats waar een gebruiker snel moet lezen.

Veelgestelde vragen

Waarom wijken RGB- en CMYK-conversies enigszins af?

Schermkleur en printkleur werken in verschillende kleurruimten. Sommige RGB-kleuren kunnen eenvoudigweg niet exact worden gereproduceerd in CMYK.

Wat betekent de WCAG-contrastscore?

Het meet hoe leesbaar de voor- en achtergrondkleuren samen zijn. Hogere waarden betekenen over het algemeen een betere leesbaarheid van tekst.

Moeten merkkleuren worden gebruikt voor de hoofdtekst?

Nee. Een merkkleur die goed werkt voor logo's of accenten kan mislukken als hoofdtekst. Gebruik sterkere neutrale kleuren of aangepaste tinten als de leesbaarheid belangrijk is.

Waarom zien kleuren er verschillend uit tussen gereedschappen?

Verschillende beeldschermen, kleurprofielen, browsers en printprocessen kunnen dezelfde numerieke waarde anders weergeven. Beschouw conversie als een praktische gids en test vervolgens in het doelmedium.