Kleurconverter

Hoe je dit gebruikt Kleurconverter

1. Voer de kleur in een van de formaten in.
2. Bekijk direct de omzetting naar de rest.
3. Kopieer het formaat dat je nodig hebt.

Welk formaat wanneer

Ze zijn in de praktijk niet uitwisselbaar, ook al beschrijven ze dezelfde kleur.

HEX is wat je uit een ontwerp kopieert en in je CSS plakt. Compact en universeel, maar ondoorzichtig: aan #3A7BD5 zie je niet of de kleur licht of donker is zonder hem te bekijken.

HSL was jarenlang het antwoord daarop, omdat het tint van helderheid scheidt. Het nadeel is dat die helderheid niet overeenkomt met wat je waarneemt: geel op 50 % oogt veel lichter dan blauw op 50 %.

OKLCH lost precies dat op. De helderheidsas komt wel overeen met de menselijke waarneming, dus twee kleuren met dezelfde L ogen even licht ook al verschilt de tint. Voor een consistente schaal is dat een enorm verschil.

Daarnaast kan OKLCH kleuren buiten sRGB beschrijven, waarmee je schermen met een breed kleurbereik benut. Voor oudere browsers is een terugvalwaarde nodig.

Het alfakanaal

Transparantie kun je op meerdere manieren schrijven en dat is handig om te kennen.

In HEX kun je twee cijfers toevoegen: #3A7BD580 is ongeveer dezelfde kleur op 50 % dekking. Compact maar slecht leesbaar.

In RGB en HSL gebruikt de moderne syntaxis een schuine streep: rgb(58 123 213 / 50%). De oude syntaxis met komma's en rgba() werkt nog, maar de moderne heeft de voorkeur.

Verwar het alfa van een kleur niet met de eigenschap opacity. Alfa raakt alleen die kleur; opacity raakt het hele element en al zijn kinderen, tekst inbegrepen.

En een waarschuwing over contrast: een halftransparante kleur heeft een ander contrast afhankelijk van wat erachter zit. Controleer het contrast met de werkelijk resulterende kleur, niet met de uitgangskleur.

Variabelen en donkere modus

Hoe je kleuren opslaat is belangrijker dan het formaat zelf.

Zet je kleuren als CSS-variabelen in :root en gebruik ze altijd via die variabelen. Een palet wijzigen wordt dan een paar regels aanpassen in plaats van waarden zoeken door je hele bestand.

Benoem variabelen naar hun functie, niet naar hun uiterlijk: --kleur-tekst en --kleur-oppervlak verouderen veel beter dan --lichtblauw, dat nergens meer op slaat zodra de tint verandert.

Herdefinieer voor de donkere modus alleen de variabelen binnen de mediaquery prefers-color-scheme. Definieer je een kleur uitsluitend binnen dat blok en niet daarbuiten, dan blijft de lichte modus zonder waarde — een veelvoorkomende stille fout.

Draai het palet niet zomaar om. Zuiver wit op zuiver zwart verblindt; een heel licht grijs op een heel donker grijs werkt meestal beter. En verzadigde kleuren ogen feller op een donkere ondergrond, dus haal er wat verzadiging af.

Veelgestelde vragen