palette Kleurconverter star

Hoe Het Werkt

Deze drie notaties beschrijven allemaal exact dezelfde onderliggende kleur — ze coderen simpelweg de rood-, groen- en blauwniveaus die een scherm mengt om die kleur te produceren. RGB slaat elk kanaal op als een decimaal getal van 0 tot 255. HEX is gewoon RGB geschreven in het 16-tallig stelsel: elk kanaal wordt een tweecijferig hexadecimaal paar, zodat rgb(255, 128, 0) #ff8000 wordt (ff = 255, 80 = 128, 00 = 0). Er gaat bij deze vertaling geen kleurinformatie verloren of bij — het is pure notatie.

HSL werkt anders: het herleidt de kleur langs drie perceptuele assen — tint, verzadiging en helderheid — wiskundig berekend uit de RGB-kanalen. Tint (0–360°) is de hoek op een kleurenwiel, berekend op basis van welk kanaal het grootst is en hoe ver de kanalen uit elkaar liggen: voor #ff8000 is rood maximaal (255) en blauw minimaal (0), en de formule 60 × ((groen − blauw) / (max − min)) geeft 60 × (128/255) ≈ 30°, wat het in de oranje band plaatst. Helderheid is het gemiddelde van het hoogste en laagste kanaal — hier (255 + 0) / 2 ≈ 50%. Verzadiging meet hoe ver de kleur bij die helderheid van grijs afstaat — hier 100%, omdat één kanaal op volle intensiteit staat en een ander op nul. Samen levert dit hsl(30, 100%, 50%) op — hetzelfde oranje als #ff8000, alleen anders beschreven.

Dit is precies waarom ontwerpers HSL boven RGB verkiezen: om een kleur 20% donkerder te maken met behoud van de tint, hoeft in HSL alleen de helderheidswaarde te worden verlaagd — in RGB zou dezelfde aanpassing vereisen dat alle drie de kanalen proportioneel opnieuw worden berekend. Kies een kleur met de kleurenkiezer of typ een willekeurige HEX-code en deze tool zet direct om naar beide notaties.

Wat U Moet Weten

Korte 3-cijferige HEX (#f80) en 4/8-cijferige vormen met een alfakanaal (#ff8000cc, rgba(255,128,0,0.8)) zijn veelvoorkomende varianten; deze tool werkt met standaard 6-cijferige ondoorzichtige HEX en de bijbehorende RGB/HSL-equivalenten. Kleurnamen zoals orange komen overeen met vaste HEX-waarden die in de CSS-specificatie zijn vastgelegd, maar niet elke benoemde kleur heeft een goed te onthouden HEX-code, wat een andere reden is waarom ontwikkelaars heen en weer converteren. Twee kleuren die op de ene monitor identiek lijken, kunnen er op een andere iets anders uitzien, omdat consumentenschermen verschillen in kleurbereik en kalibratie — HEX/RGB/HSL-waarden zijn exacte getallen, maar het licht dat ze produceren is niet gegarandeerd identiek op elk scherm. Bedenk bij het kiezen van tekst- en achtergrondkleuren dat de helderheidswaarde van HSL niet hetzelfde is als perceptueel contrast — een verzadigd geel en een verzadigd blauw kunnen dezelfde L-waarde delen maar er tegen wit heel anders uitzien, dus toegankelijkheidscontroles moeten een echte contrastverhoudingsberekening gebruiken, niet alleen het L-getal.

CSS accepteert ook op percentages gebaseerde RGB, zoals rgb(100%, 50%, 0%), als exact equivalent van rgb(255, 128, 0) — handig bij het werken met ontwerptools die kleur als percentages uitdrukken in plaats van gehele getallen van 0–255. Nieuwere CSS-kleurfuncties zoals oklch() en lab() gaan een stap verder dan HSL: ze zijn ontworpen om perceptueel uniform te zijn, wat betekent dat gelijke numerieke stappen in helderheid voor het menselijk oog bij elke tint even verschillend aanvoelen, iets wat gewone HSL niet volledig garandeert. Voor alledaags web- en UI-werk blijven HEX, RGB en HSL echter de drie formaten die u in bijna elke codebase, stijlgids en ontwerptool tegenkomt.