Kleurconverter
Reken een kleur om tussen HEX, RGB, HSL, HWB en OKLCH, controleer het WCAG-contrast met een achtergrond of bouw er een Material 3-tonenpalet van.
Codevoorbeelden
Kopieer deze voorbeelden naar je eigen project. Ze gebruiken alleen de standaardbibliotheek van de taal, dus er hoeft niets geïnstalleerd te worden.
const foreground = '#3366cc'
const background = '#ffffff'
const luminance = (hex) => {
const [r, g, b] = [1, 3, 5].map((start) => {
const channel = parseInt(hex.slice(start, start + 2), 16) / 255
return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
})
return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)
// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))Wat het doet
Rekent een kleur om tussen HEX, RGB, HSL, HWB en OKLCH, controleert de WCAG-contrastverhouding met een achtergrond en bouwt er een Material 3-tonenpalet van. Alles draait in je browser.
Zo gebruik je het
- Typ een kleur als hex (
#36c,#3366cc) of alsrgb(),hsl(),hwb()ofoklch(). - Kies Omrekenen, Contrast of Palet. Bij Contrast verschijnt een veld voor de achtergrondkleur.
- Kopieer of download het resultaat, of stuur het naar een andere tool.
Voorbeelden
#3366cc is rgb(51 102 204), hsl(220 60% 50%), hwb(220 20% 20%) en oklch(0.5325 0.1679 262.29). Op wit heeft die kleur een contrast van 5,36:1: genoeg voor AA bij gewone tekst, niet voor AAA.
Goed om te weten
- De verhouding volgt WCAG 2: relatieve luminantie uit lineair sRGB, daarna (lichtste + 0,05) / (donkerste + 0,05). Ze wordt op twee decimalen afgekapt, nooit omhoog afgerond naar een voldoende.
- AA vraagt 4,5:1 voor gewone tekst en 3:1 voor grote tekst; AAA vraagt 7:1 en 4,5:1.
- Waarden worden eerst op hele 8-bitkanalen afgerond, zodat elke regel dezelfde hexkleur beschrijft. Een OKLCH-kleur buiten sRGB wordt begrensd tot de dichtstbijzijnde weergeefbare kleur.
- Het palet behoudt de tint en chroma van je basiskleur en toont de tonen 0, 10, 20 … 90, 95, 99 en 100, zoals Material 3.
- Kleurnamen en alfakanalen worden niet ondersteund.
Welke kleurnotaties leest de tool?
Hex (#36c of #3366cc) en de CSS-functies rgb(), hsl(), hwb() en oklch(), met spaties of komma’s tussen de waarden. Kleurnamen en transparantie worden niet ondersteund. Het resultaat toont dezelfde kleur in elke notatie, afgerond op hele sRGB-kanalen.
Veelgestelde vragen
Welke contrastverhouding vraagt WCAG?
AA vraagt 4,5:1 voor gewone tekst en 3:1 voor grote tekst en bedieningselementen. AAA vraagt 7:1 en 4,5:1. De verhouding wordt afgekapt, nooit omhoog afgerond, dus 4,49 telt niet als geslaagd.
Wat is OKLCH en waarom gebruik je het?
OKLCH beschrijft een kleur met lichtheid, chroma en tint in een ruimte waarin gelijke stappen even groot ogen. Daardoor is het handig voor kleurschalen en om de lichtheid aan te passen zonder dat de tint verschuift.
Wat doet de palet-modus?
Ze bouwt een Material 3-tonenpalet: de tint en chroma van je basiskleur in 13 tonen van 0 (zwart) tot 100 (wit). De kleurbibliotheek erachter laadt pas als je deze modus kiest.