Kleurenkiezer
Controleer WCAG-contrast, bouw CSS-gradiënten en genereer kleurenpaletten.
Wil je alleen een kleur kiezen of HEX ↔ RGB ↔ HSL converteren (met pipet)? Gebruik de HEX-RGB-converter.
Voorbeelden
Contrastcontrole
Invoer
#1A1A1A op #F5F5F5
Uitvoer
≈ 16:1 — slaagt voor AA & AAA
CSS-verloop
Invoer
#3B82F6 → #9333EA, 90°
Uitvoer
background: linear-gradient(90deg, #3B82F6, #9333EA);
Palet
Invoer
#3B82F6
Uitvoer
Tinten + complementaire, analoge, triadische kleuren
Over deze tool
Deze gratis online kleurstudio brengt drie essentials samen: een WCAG-contrastcontrole met AA/AAA geslaagd-gezakt en live tekstvoorbeeld; een CSS-verloopbouwer met een kopieerklare declaratie; en een paletgenerator voor tinten en complementaire, analoge en triadische kleuren. Elk tabblad heeft een ingebouwde kleurkiezer, en alles draait in je browser zonder upload. Voor pure HEX ↔ RGB ↔ HSL-conversie en een schermpipet gebruik je de {link}.
Zo gebruik je het
- Contrast: stel tekst- en achtergrondkleuren in om WCAG-toegankelijkheid te controleren.
- Verloop: kies twee kleuren en een hoek, kopieer dan de CSS.
- Palet: voer een basiskleur in en klik op een staal om het te kopiëren.
Voor wie
Ontwerpers en ontwikkelaars die toegankelijkheid controleren, CSS-achtergronden bouwen en samenhangende paletten maken — zonder te jongleren met losse tools.
Veelgestelde vragen
Wat kan deze kleurtool?
Drie dingen op één plek: WCAG-contrast tussen twee kleuren controleren, een CSS-verloop bouwen en tint- en harmoniepaletten genereren vanuit een basiskleur. Elk tabblad heeft een ingebouwde kleurkiezer.
Is het gratis?
Ja — volledig gratis zonder registratie, en alles draait in je browser zonder upload.
Hoe werkt de contrastcontrole?
Voer een tekstkleur en een achtergrondkleur in en het toont de WCAG-contrastverhouding plus geslaagd/gezakt voor AA en AAA op normale en grote tekst, met live voorbeeld.
Welke contrastverhouding heb ik nodig?
WCAG AA vraagt minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst; AAA vraagt respectievelijk 7:1 en 4,5:1. De controle markeert elk niveau voor je.
Kan ik het CSS-verloop en de paletkleuren kopiëren?
Ja. Het verloop-tabblad geeft een kant-en-klare background:-declaratie om te kopiëren, en elk paletstaal kopieert zijn hex bij een klik.
Waar kies ik een kleur of converteer ik HEX/RGB/HSL?
Gebruik de speciale HEX-RGB-converter — die kiest een kleur (met schermpipet op Chrome/Edge) en toont HEX, RGB en HSL. Deze studio richt zich op wat je met kleuren doet: contrast, verlopen en paletten.
Kan ik een kleur pakken van een webpagina of afbeelding?
Ja — gebruik de pipet van de HEX-RGB-converter (en het bookmarklet) om op Chrome en Edge een kleur overal op het scherm vast te leggen, en breng de hex hierheen.
Gerelateerde tools