Kleurconverter

Eén kleur, drie dialecten

Op een gewone werkdag komt dezelfde kleur in drie verkleedpartijen langs: de huisstijlgids geeft je een HEX-code, een canvas- of grafiekbibliotheek wil de RGB-getallen, en moderne CSS is het fijnst bij te stellen in HSL. Deze pagina houdt alle drie synchroon — typ in welk veld ook overeenkomt met wat je gekregen hebt, en de andere twee herschrijven zichzelf terwijl je typt, met de kleurstaal die je laat zien hoe de getallen er echt uitzien. Verkorte HEX werkt ook: plak #f80 en het breidt uit tot #ff8800, precies zoals een browser het zou lezen. Er is geen kleurenkiezer om mee te vechten; het gaat hier puur om het precies vertalen van een waarde die je al hebt.

Een palet bouwen met HSL

HSL bewijst zijn waarde zodra je variaties van een kleur nodig hebt in plaats van de kleur zelf. Houd de tint vast en schuif alleen de helderheid: verlaag hem tien punten voor een hover-status, verhoog hem veertig voor een getinte achtergrond, en elke variant blijft herkenbaar dezelfde kleur — iets wat vrijwel onmogelijk is door rechtstreeks in HEX-cijfers te knoeien. De verzadiging verlagen geeft de gedempte, vergrijsde versie die werkt voor uitgeschakelde knoppen en subtiele randen. Omdat de velden elkaar live bijwerken, is een snelle workflow: plak je merk-HEX, lees de HSL af, stel één getal bij, en kopieer de verse HEX weer terug — een klein palet in minder dan een minuut, zonder ontwerpsoftware.

Eerlijke grenzen, en een aanpalend trucje

Twee dingen doet deze converter bewust niet. Hij heeft geen alfakanaal — het RGB-veld spreekt rgb(), niet rgba() — dus transparantie voeg je achteraf toe in je CSS, waar het ook thuishoort. En HSL-waarden worden afgerond op hele getallen voor de leesbaarheid, wat betekent dat een heen-en-weer-rit van HEX naar HSL naar HEX met één punt kan afwijken; onzichtbaar op het scherm, maar goed om te weten als je stijlbestanden vergelijkt. De tool is gratis zonder limieten, zoals al onze developertools. Een combinatie die de moeite waard is om te onthouden: zodra deze pagina je precies verteld heeft welke kleur een logo-achtergrond is, kan onze tool Afbeelding transparantie precies die kleur uit de afbeelding verwijderen — een handige tweetrapsraket bij het voorbereiden van grafisch materiaal voor een website.

Drie manieren om dezelfde kleur te beschrijven

HEX en RGB beschrijven een kleur via de intensiteit van rood, groen en blauw licht (alleen in een andere notatie) — HSL beschrijft de kleur juist via tint, verzadiging en helderheid, wat vaak intuïtiever is om een tint met de hand te kiezen of aan te passen.