Wat betekenen al deze kleurformaten?

Een kleur op een scherm is een mix van rood, groen en blauw licht. Elk formaat geeft die mix op zijn 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 van de verzadiging en helderheid. Dat maakt deze formaten makkelijker met de hand aan te passen. CMYK geeft aan hoeveel cyaan, magenta, gele en zwarte inkt nodig is voor drukwerk. LAB, LCH, OKLab en OKLCH zijn zo opgebouwd dat gelijke stappen in de waarden er voor het oog ongeveer even groot uitzien. Dat is handig voor paletten en kleurverlopen. Moderne CSS ondersteunt alle vier. Terminals gebruiken ANSI-kleurcodes. CSS heeft ook kleurnamen, zoals tomato.

Hier zie je dezelfde oranje kleur in elk formaat:

Formaat 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, 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, zoals bij LAB
OKLCH oklch(69.58% 0.2043 43.49) Lichtheid, chroma en tint in OKLab
XYZ xyz(46, 30.77, 3.52) De CIE XYZ-kleurruimte waarop LAB is gebaseerd
HCG hcg(24, 100%, 0%) Tint, chroma en grijsheid
Kleurnaam orangered De CSS-kleurnaam die er het dichtst bij ligt
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, van 0 tot 65535, zoals AppleScript ze weergeeft
Grijstinten gray(46.7%) Helderheid van 0% tot 100%

Beschrijving van de tool

Deze tool zet een kleur om tussen deze 17 formaten en toont de kleur als staal onder het resultaat. Alle kleurconverters hier werken op dezelfde manier, van de algemene Kleurconverter tot de converters voor één specifiek paar, zoals HEX naar RGB, RGB naar CMYK of HEX naar kleurnaam: de tool begint met de formaten waarnaar hij is genoemd, en met de menu's Bron en Doel kun je andere formaten 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 het formaat aan de hand van de schrijfwijze van de kleur. Met de wisselknop keer 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 cijfers bepaalt de dekking.
  • Functies zoals rgb(), hsl() of oklch(), met komma's of spaties tussen de waarden en eventueel 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. Vier getallen worden als CMYK gelezen, 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}.

Werking

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

  • De dekking blijft behouden bij HEX, RGB, HSL, HWB, OKLab en OKLCH, die deze kunnen weergeven. Bij de andere formaten wordt de dekking weggelaten.
  • LAB, LCH en XYZ gebruiken 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. Wanneer zo'n kleur wordt omgezet naar HEX, RGB of een ander schermformaat, worden de kanaalwaarden begrensd tot het bereik van 0 tot 255. Zo wordt oklch(70% 0.3 145) bijvoorbeeld #00c800.
  • Een kleurnaamresultaat is de kleurnaam uit CSS die er het dichtst bij ligt. De naam komt dus alleen exact overeen bij kleuren die een naam hebben: #ff6600 levert orangered op, oftewel #ff4500.
  • Resultaten voor ANSI 16 en ANSI 256 zijn bij benadering, omdat deze paletten slechts 16 of 256 kleuren bevatten. Resultaten voor ANSI 16 zijn codes voor tekst op de voorgrond, van 30 tot 37 en van 90 tot 97. De achtergrondcodes 40 tot 47 en 100 tot 107 worden als dezelfde kleuren gelezen.
  • CMYK wordt berekend met de basisformule, zonder kleurprofiel van een printer. De CMYK-waarden voor dezelfde kleur kunnen bij een drukkerij dus anders zijn.
  • Grijstinten worden berekend als het gemiddelde van de rode, groene en blauwe waarden.

Tips

  • Resultaten in HEX, RGB, HSL, HWB, OKLab, OKLCH en kleurnaam zijn geldige CSS en kunnen zo in een stijlblad worden geplakt.
  • 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.