Wat betekenen al deze kleurindelingen?

Een kleur op een scherm is een mengsel van rood, groen en blauw licht. Elke indeling geeft dat mengsel op een eigen manier weer. CSS en ontwerptools gebruiken HEX-codes en RGB-waarden. HSL, HSV en HWB beschrijven een kleur aan de hand van de tint — de hoek op de kleurencirkel — en hoe verzadigd en licht de kleur is. Daardoor zijn ze makkelijker met de hand aan te passen. CMYK geeft de hoeveelheden cyaan, magenta, gele en zwarte inkt voor drukwerk weer. LAB, LCH, OKLab en OKLCH zijn zo ontworpen dat gelijke verschillen tussen waarden er voor het oog uitzien als gelijke stappen. Dat is handig voor kleurenpaletten en kleurverlopen, en moderne CSS ondersteunt ze alle vier. Terminals gebruiken ANSI-kleurcodes. CSS heeft ook benoemde kleuren, zoals tomato.

Hieronder zie je dezelfde oranje kleur in elke indeling:

Indeling Voorbeeld Betekenis van de waarden
HEX #ff6600 Rood, groen en blauw, elk weergegeven met twee hexadecimale cijfers
RGB rgb(255, 102, 0) Rood, groen en blauw met waarden van 0 tot 255
HSL hsl(24, 100%, 50%) Tint, verzadiging en lichtheid
HSV hsv(24, 100%, 100%) Tint, verzadiging en waarde; ook wel HSB genoemd
HWB hwb(24 0% 0%) Tint, witheid en zwartheid
CMYK cmyk(0%, 60%, 100%, 0%) Cyaan, magenta, gele en zwarte inkt
LAB lab(62.31, 55, 71.33) CIE-lichtheid, groen tot rood en blauw tot geel
LCH lch(62.31, 90.07, 52.36) CIE-lichtheid, chroma en tint
OKLab oklab(69.58% 0.1482 0.1406) Lichtheid en twee kleurassen, volgens een nieuwer model dan LAB
OKLCH oklch(69.58% 0.2043 43.49) Lichtheid, chroma en tint in OKLab
XYZ xyz(46, 30.77, 3.52) De CIE 1931-kleurruimte waarop LAB is gebaseerd
HCG hcg(24, 100%, 0%) Tint, chroma en grijswaarde
Kleurnaam orangered De dichtstbijzijnde benoemde CSS-kleur
ANSI 16 91 Terminalcode van een van de 16 basiskleuren
ANSI 256 208 Terminalcode van een van de 256 kleuren
AppleScript RGB {65535, 26214, 0} Rood, groen en blauw met waarden van 0 tot 65535, zoals AppleScript ze weergeeft
Grijswaarden gray(46.7%) Helderheid van 0% tot 100%

Beschrijving van de tool

Deze tool zet kleuren om tussen deze 17 indelingen en toont onder het resultaat een kleurvlak. Alle kleurconversietools werken op dezelfde manier, van de algemene Kleurconverter tot tools voor één specifiek paar, zoals HEX naar RGB, RGB naar CMYK of HEX naar kleurnaam: de tool begint met de indelingen die in de naam staan. Met de menu's Bron en Doel kun je andere indelingen kiezen. Plak een kleur en het resultaat verschijnt terwijl je typt, klaar om te kopiëren. Als je Automatisch detecteren als bron kiest — de standaardinstelling van de Kleurconverter — bepaalt de tool de indeling aan de hand van de schrijfwijze van de kleur. Met de wisselknop draai je de conversie om.

Voorbeelden

Invoer Doel Resultaat
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Kleurnaam tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Wat je kunt plakken

  • HEX-codes met 3, 4, 6 of 8 cijfers, met of zonder #. Een vierde cijfer of een laatste paar bepaalt de dekking.
  • Functies zoals rgb(), hsl() of oklch(), met komma's of spaties tussen de waarden en optioneel een dekking als vierde waarde of na een schuine streep: rgba(37, 99, 235, 0.5) of rgb(37 99 235 / 50%).
  • Percentages voor rood, groen en blauw, zoals in rgb(100%, 40%, 0%), en tinten in deg, rad, grad of turn, zoals in hsl(0.5turn, 100%, 50%).
  • Losse getallen zonder functienaam, zoals 255, 102, 0. Automatisch detecteren leest drie getallen als RGB, of als HSL wanneer de laatste twee percentages zijn, en vier getallen als CMYK, tenzij ze op RGB met een dekking lijken.
  • Kleurnamen, ongeacht hoofdletters en kleine letters, met of zonder spaties: Rebecca Purple werkt.
  • HSB-waarden geschreven als hsb() en AppleScript-kleuren tussen accolades, zoals {65535, 26214, 0}.

Hoe het werkt

De berekeningen worden uitgevoerd door color-convert, een JavaScript-bibliotheek voor kleurconversie.

  • De dekking blijft behouden bij HEX, RGB, HSL, HWB, OKLab en OKLCH, omdat deze indelingen de dekking kunnen weergeven. De andere indelingen laten die weg.
  • LAB, LCH en XYZ zijn CIE-waarden met het D65-witpunt. CSS lab() en lch() gebruiken het D50-witpunt, waardoor de waarden een beetje verschillen.
  • LAB, LCH, OKLab en OKLCH kunnen kleuren beschrijven die schermen niet kunnen weergeven. Bij omzetting naar HEX, RGB of een andere schermindeling worden de kleurkanalen beperkt tot het bereik van 0 tot 255. Daarom wordt oklch(70% 0.3 145) bijvoorbeeld #00c800.
  • Als resultaat krijg je de dichtstbijzijnde benoemde CSS-kleur. Die is alleen exact voor kleuren die een naam hebben: #ff6600 geeft orangered, oftewel #ff4500.
  • Resultaten in ANSI 16 en ANSI 256 zijn benaderingen, omdat die paletten maar 16 of 256 kleuren bevatten. ANSI 16-resultaten zijn voorgrondcodes, van 30 tot en met 37 en van 90 tot en met 97. De achtergrondcodes 40 tot en met 47 en 100 tot en met 107 worden als dezelfde kleuren gelezen.
  • CMYK wordt berekend met de basisformule, zonder kleurprofiel van een printer. Daarom kunnen de CMYK-waarden van een drukkerij voor dezelfde kleur afwijken.
  • Grijswaarden zijn het gemiddelde van de rode, groene en blauwe waarden.

Tips

  • Resultaten in HEX, RGB, HSL, HWB, OKLab, OKLCH en kleurnamen zijn geldige CSS en kun je direct in een stylesheet plakken.
  • Automatisch detecteren leest een getal van drie cijfers, zoals 208, als een korte HEX-code. Kies daarom ANSI 256 of ANSI 16 als bron voor terminalcodes.
  • HSV en HSB zijn twee namen voor hetzelfde model.