Kleur · T-07
Kleurschaal maken
Eén kleur in, elf tinten uit: van bijna wit tot bijna zwart, met gelijke stappen voor het oog. Elke stap toont meteen of witte of zwarte tekst erop leesbaar is.
Je bestanden blijven op je toestel
Vragen
Goed om te weten
Waarom in OKLCH?
In OKLCH betekent een gelijke stap in lichtheid ook een gelijke stap voor het oog. In HSL lijkt geel veel lichter dan blauw bij dezelfde waarde. Zo krijg je een schaal die in elke tint even regelmatig oogt.
Blijft mijn eigen kleur in de schaal?
Ja, standaard staat je kleur precies op de stap die het best bij haar lichtheid past, met een roze kader. Zet je dat uit, dan krijg je een volledig berekende schaal.
Welke stap gebruik ik voor tekst?
Kijk naar de contrastcijfers: staat er AA bij wit, dan is witte tekst erop leesbaar; bij zwart, dan zwarte tekst. Voor tekst op een witte pagina neem je meestal 600 of donkerder.
Zo werkt het
Kleurschaal maken in drie stappen
Kies je kleur
Je merkkleur, in eender welke notatie. Kleurstaal zet ze op de stap die het best bij haar lichtheid past.
Bekijk de schaal
Elf stappen met hun code en hun contrast op wit en op zwart. AA staat erbij als gewone tekst leesbaar is.
Neem de code mee
Als CSS-variabelen, voor Tailwind 4 of 3, of als JSON, in HEX of in OKLCH.