🎨
← Terug naar handleidingen

HEX versus RGB versus HSL: welk kleurformaat moet u gebruiken?

· Tags: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX versus RGB versus HSL: welk kleurformaat moet u gebruiken?

CSS biedt meerdere manieren om kleuren te definiëren, maar de drie meest voorkomende formaten zijn HEX, RGB en HSL. Elk formaat heeft duidelijke sterke punten, en weten wanneer u elk formaat moet gebruiken, kan de onderhoudbaarheid van uw stylesheet en uw vermogen om dynamische kleursystemen te creëren aanzienlijk verbeteren. Deze gids ontleedt elk formaat, zodat u voor elke situatie de juiste keuze kunt maken.

Het HEX-kleurformaat: de industrienorm

HEX (hexadecimale) kleuren zijn het meest gebruikte formaat in webdesign. Een hex-kleur wordt geschreven als een # gevolgd door zes hexadecimale cijfers die respectievelijk de waarden rood, groen en blauw vertegenwoordigen.

#FF5733
  • #FF — Rood (255 in decimaal)
  • #57 — Groen (87 in decimaal)
  • #33 — Blauw (51 in decimaal)

HEX-variaties

HEX ondersteunt verschillende notaties voor verschillende behoeften:

/* Standaard zescijferige hex */
color: #FF5733;

/* Verkorte notatie — identieke paren worden samengevoegd tot drie cijfers */
color: #F53; /* Breidt uit naar #FF5533 */

/* Achtcijferige hex met alfakanaal */
color: #FF573380; /* 50% opaciteit */

Verkorte HEX werkt wanneer elk paar overeenkomende tekens gebruikt: #AABBCC wordt #ABC. Dit is puur een ruimtebesparende conventie die door alle browsers wordt ondersteund.

Achtcijferige HEX (#RRGGBBAA) voegde alfatransparantie toe. De alphawaarde varieert van 00 (volledig transparant) tot FF (volledig ondoorzichtig). De browserondersteuning voor 8-cijferige hex is uitstekend in alle moderne browsers.

Viercijferige verkorte notatie (#RGBA) bestaat ook: #F538 breidt uit naar #FF553388.

Wanneer HEX gebruiken

  • Kopiëren uit ontwerptools — Figma, Sketch en Adobe XD leveren standaard hex uit
  • Vastgelegde merkkleuren — Hex is ondubbelzinnig en compact voor waarden die nooit veranderen
  • Documentatie en mockups — Hex is het meest herkenbare formaat onder ontwerpers en ontwikkelaars
  • CSS-custom properties — Het opslaan van merktokens in hex is gangbaar

Wanneer HEX vermijden

  • Programmatische kleurbewerking — Het aanpassen van individuele kanalen vereist het parsen van tekenreeksen
  • Kleursystemen creëren — Het genereren van lichtere of donkerdere varianten vereist niet-triviale wiskunde
  • Kleurintentie communiceren — Hex geeft geen semantische informatie over de kleur

Het RGB-kleurformaat: kanaalbewerking

RGB staat voor Red (rood), Green (groen), Blue (blauw). In CSS wordt het geschreven als een functie met waarden van 0 tot 255 of percentages (0% tot 100%).

/* Verouderde syntaxis met komma's */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Moderne syntaxis met spaties */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Percentagewaarden */
color: rgb(100% 34% 20%);

Verbeteringen in de moderne RGB-syntaxis

De specificatie CSS Color Level 4 moderniseerde de functie rgb() op twee belangrijke manieren:

  1. Waarden gescheiden door spaties — Komma's zijn niet langer vereist, waardoor de syntaxis schoner is
  2. Alpha gescheiden door een schuine streep — Het rgba()-alias is niet langer nodig; rgb() accepteert nu een optioneel alfakanaal

Zowel de verouderde als de moderne syntaxis worden volledig ondersteund, maar de moderne syntaxis wordt aanbevolen voor nieuwe code.

Wanneer RGB gebruiken

  • Canvas en WebGL — Image data-API's retourneren pixelwaarden in RGB
  • Numerieke kleuraanpassingen — Wanneer u rood-, groen- en blauwwaarden als afzonderlijke variabelen hebt opgeslagen
  • Vertalen uit ontwerpspecificaties — Sommige designsystemen specificeren kleuren als RGB-drietallen
  • Werken met kleurkiezers — Veel kleurkiezer-UI's gebruiken schuifregelaars van 0-255

Wanneer RGB vermijden

  • Samenhangende kleurenpaletten creëren — Het onafhankelijk aanpassen van alle drie de kanalen maakt consistente aanpassingen moeilijk
  • Menselijke leesbaarheid — rgb(123, 45, 67) geeft geen direct gevoel van welke kleur het vertegenwoordigt

Het HSL-kleurformaat: gebruiksvriendelijke kleuren

HSL staat voor Hue (tint), Saturation (verzadiging) en Lightness (lichtheid). Dit formaat is intuïtiever voor mensen omdat het de kleur zelf (tint) scheidt van de intensiteit (verzadiging) en helderheid (lichtheid).

/* Verouderde syntaxis */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Moderne syntaxis */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

De HSL-kanalen begrijpen

Tint (0-360) — De kleurhoek op de kleurencirkel. Dit is de "welke kleur is het"-component:

| Tintwaarde | Kleur | |-----------|---------| | 0 of 360 | Rood | | 30 | Oranje | | 60 | Geel | | 120 | Groen | | 180 | Cyaan | | 240 | Blauw | | 300 | Magenta |

Verzadiging (0-100%) — Hoe intens of levendig de kleur is. 0% produceert een grijstint; 100% is de puurste versie van de tint.

Lichtheid (0-100%) — Hoe licht of donker de kleur is. 0% is altijd zwart, 50% is de "normale" versie van de tint en 100% is altijd wit.

Waarom HSL superieur is voor kleursystemen

HSL maakt taken die in HEX of RGB moeilijk zijn triviaal eenvoudig:

/* Primaire merkkleur */
--brand: hsl(220, 80%, 50%);

/* Hover-status — iets lichter */
--brand-hover: hsl(220, 80%, 60%);

/* Actieve status — iets donkerder */
--brand-active: hsl(220, 80%, 40%);

/* Uitgeschakelde status — gedesatureerd */
--brand-disabled: hsl(220, 30%, 70%);

/* Achtergrondtint — zeer licht */
--brand-bg: hsl(220, 40%, 95%);

Met HSL is elke variant een wijziging van één variabele. Dit is onmogelijk met HEX en omslachtig met RGB.

Wanneer HSL gebruiken

  • Kleurenpaletten creëren — HSL is de de facto standaard voor het genereren van ontwerptokens
  • Thema's en donkere modus — Lichtheidswaarden omwisselen om varianten voor de donkere modus te creëren
  • Hover- en focusstatussen — Lichtheid met een vast percentage aanpassen
  • Toegankelijkheidsaanpassingen — Het lichtheidscontrast verhogen zonder de kleur te veranderen
  • Interactieve kleurkiezers — HSL-schuifregelaars zijn intuïtiever dan RGB-schuifregelaars

Snelle vergelijkingstabel

| Functie | HEX | RGB | HSL | |---------|-----|-----|-----| | Leesbaarheid op pixelniveau | Zwak | Matig | Goed | | Kanaalsemantiek | Ondoorzichtig | Numeriek | Perceptueel | | Programmatische aanpassing | Moeilijk | Matig | Gemakkelijk | | Alfatransparantie | 8-cijferige hex | rgb(R G B / A) | hsl(H S% L% / A) | | Browserondersteuning | Uitstekend | Uitstekend | Uitstekend | | Moderne syntaxis | Nee | Ja | Ja | | Standaard in ontwerptools | Ja | Gangbaar | Zeldzaam | | Geschiktheid voor kleursystemen | Zwak | Redelijk | Uitstekend |

Browserondersteuning: alle drie zijn veilig

HEX, RGB en HSL genieten identieke browserondersteuning. Alle drie werken in elke browser die sinds Internet Explorer 9 is uitgebracht. De moderne syntaxis met spaties (rgb(255 0 0 / 0.5)) wordt ondersteund in alle browsers die sinds 2020 zijn uitgebracht. Er is geen compatibiliteitsreden om de een boven de ander te kiezen.

Praktisch beslissingskader

Kies uw formaat op basis van wat u doet:

  1. Kopiëren uit een ontwerpmockup? Gebruik HEX — het is wat ontwerptools uitvoeren.
  2. Een ontwerptokensysteem bouwen? Gebruik HSL — het maakt paletgeneratie triviaal.
  3. Werken met canvas- of beeldgegevens? Gebruik RGB — pixel-API's gebruiken native RGB.
  4. Een eenmalige stijlregel schrijven? Gebruik HEX — het is het meest compact.
  5. Dynamische kleurovergangen creëren? Gebruik HSL — het interpoleren van tinten creëert regenboogeffecten; het interpoleren van RGB creëert modderige tussenwaarden.

Converteren tussen elk formaat

Gebruik onze gratis online kleurenconverter om direct te converteren tussen HEX, RGB, HSL en andere CSS-kleurformaten. Geen handmatige wiskunde of browser DevTools meer.