Kleurconverter: waar dit voor dient
Ontwerpers leveren hexadecimale codes aan, CSS-animaties werken liever met HSL omdat dat zinvol interpoleert, en canvaswerk heeft RGB-kanalen nodig. Deze converter neemt een kleur en genereert de equivalenten, met een live voorbeeld en de contrastverhouding ten opzichte van zwart en wit om de toegankelijkheid te controleren.
Kleurconverter: hoe het werkt
- Vul een kleur in als HEX of kies er een met de kleurkiezer.
- Lees de equivalente waarden in RGB en HSL.
- Bekijk de contrastverhoudingen met witte en zwarte tekst.
- Kopieer het formaat dat je nodig hebt in kant-en-klare CSS-syntax.
Veelgestelde vragen
Waarom HSL gebruiken in plaats van HEX?
Omdat HSL met het blote oog te begrijpen is. Een kleur lichter maken betekent één getal verhogen in plaats van drie hexparen opnieuw te berekenen, wat het veel makkelijker maakt een consistent kleurenpalet te maken.
Welk contrast heb ik nodig voor toegankelijkheid?
WCAG AA vereist 4,5:1 voor normale tekst en 3:1 voor grote tekst; AAA verhoogt dat minimum naar 7:1. De cijfers in de tool laten meteen zien of witte of zwarte tekst beter werkt.
Wat betekent de vierde waarde in RGBA?
Dat is het alfakanaal, de dekking, van 0 (volledig doorzichtig) tot 1 (volledig dekkend). Moderne CSS accepteert ook een acht-cijferige hex waarin het laatste paar de alfawaarde codeert.
Waarom ziet dezelfde HEX er op twee schermen anders uit?
Door kleurmanagement. Schermen verschillen in kleurbereik en kalibratie, en zonder expliciet kleurprofiel ziet dezelfde sRGB-waarde er op een breed-gamut-monitor anders uit.