Kleurenkiezer en -converter

Kleurmodellen

Een kleurmodel is een systeem voor het beschrijven van kleuren als getallen. Verschillende modellen worden in verschillende contexten gebruikt, afhankelijk van of de uitvoer een scherm, een printer of een ontwerpspecificatie is.

RGB / RGBA

Formaat

RGB definieert kleuren door het mengen van rood, groen en blauw licht. Elk kanaal loopt van 0 tot 255. rgb(255, 0, 0) is puur rood. rgb(255, 255, 255) is wit. Het A (alpha)-kanaal voegt transparantie toe, lopend van 0 (volledig transparant) tot 1 (volledig ondoorzichtig). Bijvoorbeeld, rgba(255, 0, 0, 0.5) is semi-transparant rood. RGB is het native kleurmodel voor schermen en digitale displays.

Geschiedenis

Het RGB-model is geworteld in de Young-Helmholtz-theorie van trichromatisch kleurzicht uit de 19e eeuw. James Clerk Maxwell voerde de eerste RGB-kleurenfotografie-experimenten uit in 1861. RGB werd de standaard voor elektronische displays met de ontwikkeling van kleuren-CRT-televisies in de jaren 1930 en 1940, en werd later overgenomen voor computermonitors. De sRGB-kleurruimte werd formeel aangenomen als webstandaard in HTML 3.2 in januari 1997.

HEX / HEXA

Formaat

HEX is een compacte notatie voor RGB-waarden in hexadecimaal. #FF0000 is hetzelfde als rgb(255, 0, 0). Elk paar hexadecimale cijfers vertegenwoordigt één kanaal: #RRGGBB. De 8-cijferige vorm #RRGGBBAA voegt een alpha-kanaal toe, waarbij 00 volledig transparant is en FF volledig ondoorzichtig. Bijvoorbeeld, #FF000080 is rood met 50% dekking. Verkorte vormen zoals #F00 worden uitgebreid naar #FF0000.

Geschiedenis

Hexadecimale kleurnotatie is ontstaan in de eerste webbrowsers in het midden van de jaren 1990. De eerste versies van Mosaic en Netscape Navigator namen het X11-kleurnaamensysteem over. CSS Level 1, gepubliceerd in december 1996 door Hakon Wium Lie en Bert Bos, standaardiseerde hexadecimale tripletten formeel als de primaire manier om kleuren op het web te specificeren.

HSL / HSLA

Formaat

HSL beschrijft kleur als tint, verzadiging en lichtheid. Tint is een graad op het kleurenwiel (0-360): 0 is rood, 120 is groen, 240 is blauw. Verzadiging (0-100%) regelt de kleurintensiteit. Lichtheid (0-100%) regelt de helderheid, waarbij 0% zwart is en 100% wit. HSL is vaak intuïtiever dan RGB voor het selecteren van kleuren omdat u helderheid en verzadiging onafhankelijk kunt aanpassen.

Geschiedenis

HSL werd voor het eerst beschreven door George H. Joblove en Donald Greenberg in een artikel uit 1978 in Computer Graphics. Het werd gecreëerd om een fundamenteel probleem met RGB op te lossen: het mengen van rode, groene en blauwe waarden is onintuïtief voor mensen. HSL herschikt de RGB-kleurruimte zodat kunstenaars en ontwerpers kunnen denken in termen van kleur (tint), levendigheid (verzadiging) en helderheid (lichtheid), wat nauwer aansluit bij hoe mensen kleuren van nature beschrijven.

HSV / HSB

Formaat

HSV (tint, verzadiging, waarde) is vergelijkbaar met HSL maar gebruikt "waarde" (helderheid) in plaats van lichtheid. Bij 100% waarde zijn volledig verzadigde kleuren puur en helder. HSV sluit natuurlijker aan bij hoe kleurenkiezers werken: het verzadiging/helderheid-paneel past S en V aan, terwijl de tintschuifregelaar H aanpast.

Geschiedenis

HSV werd beschreven door Alvy Ray Smith in augustus 1978 terwijl hij werkte bij het Computer Graphics Lab van het New York Institute of Technology. Het werd gepubliceerd in dezelfde editie van Computer Graphics als HSL. Smith ontwierp HSV voor gebruik in een vroeg digitaal tekenprogramma, waar kunstenaars een intuïtieve manier nodig hadden om kleuren op het scherm te selecteren. Het cilindermodel van HSV maakte het natuurlijk om te implementeren als kleurenkiezer met een tintschuifregelaar en een verzadiging/helderheid-paneel.

CMYK

Formaat

CMYK (cyaan, magenta, geel, key/zwart) wordt gebruikt bij het drukken. Terwijl RGB additief is (licht), is CMYK subtractief (inkt). Elke waarde vertegenwoordigt het percentage van die inkt dat wordt aangebracht. cmyk(0, 100, 100, 0) produceert rood. Conversie tussen RGB en CMYK is bij benadering omdat ze verschillende kleurbereiken (gamuts) bestrijken.

Geschiedenis

De fundamenten van CMYK dateren terug tot Jacob Christoph Le Blon, die rond 1710 halftoonskleurendruk uitvond met afzonderlijke koperplaten. Hij gebruikte aanvankelijk rode, gele en blauwe platen, en voegde later een zwarte plaat toe voor scherpere contouren en tekst. Het moderne vierkleurendrukproces (CMYK) werd voor het eerst geïmplementeerd in de jaren 1890 voor kleurenkrantenillustraties. De zwarte plaat wordt de "key"-plaat genoemd omdat deze het fijne detail draagt waarop de andere platen worden uitgelijnd (gekeyd).

CSS-kleurformaten

Moderne CSS ondersteunt verschillende kleurnotaties:

• #FF5733 of #ff5733 (HEX)
• rgb(255, 87, 51) of rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) of hsla(14, 100%, 60%, 0.5)
• Benoemde kleuren: red, cornflowerblue, rebeccapurple (148 benoemde kleuren in totaal)