Kleurenkiezer - Converteer RGB, Hex, CMYK & HSV Kleurcodes

Wat is een kleurkiezer?

Een kleurkiezer is een hulpmiddel om een kleur te kiezen en de waarde ervan in verschillende kleurindelingen af te lezen. Deze toont een kleur tegelijkertijd in RGB (rood, groen, blauw), hex, CMYK (cyaan, magenta, geel, zwart) en HSV (tint, verzadiging, waarde). Als één indeling wordt gewijzigd, worden de andere onmiddellijk bijgewerkt.

Een kleurkiezer gebruiken

Er zijn drie manieren om een kleur te kiezen.

Klik ergens in het spectrumbox om een tint en verzadiging te kiezen. De horizontale positie bepaalt de tint (de kleurfamilie, zoals rood of blauw). De verticale positie bepaalt de verzadiging (hoe levendig of flets de kleur eruitziet). Een schuifregelaar onder het spectrum regelt de helderheid, van zwart links tot volledige helderheid rechts.

Het invoeren van exacte waarden werkt ook. Het hexveld accepteert codes zoals #2ECC71, met of zonder #. Elk RGB-veld accepteert een geheel getal van 0 tot 255. Elk CMYK-veld accepteert een geheel getal van 0 tot 100. Een waarde die boven het toegestane bereik wordt ingevoerd, wordt afgekapt op het maximum.

Bij elke kleurindeling staat een kopieerknop. Als je daarop klikt, wordt die waarde naar het klembord gekopieerd en verschijnt kort het bericht ‘Gekopieerd!’.

Kleurmodellen uitgelegd

RGB

RGB beschrijft een kleur als een mengsel van rood, groen en blauw licht, dezelfde drie kleuren die een scherm gebruikt om elke pixel te maken. Elk kanaal loopt van 0 tot 255. RGB(255, 0, 0) is zuiver rood en RGB(0, 0, 0) is zwart. Browsers, apps en videoprogramma’s gebruiken allemaal RGB, omdat het overeenkomt met de werking van schermen.

Hex

Een hexcode schrijft een RGB-kleur in grondtal 16 in plaats van grondtal 10. #2ECC71 heeft drie paren tekens: 2E voor rood, CC voor groen en 71 voor blauw. Elk paar loopt van 00 tot FF. Hexcodes komen veel voor in webdesign, omdat CSS ze rechtstreeks accepteert en ze korter te typen zijn dan rgb(). Er bestaat ook een afkorting van drie tekens: #0F0 betekent hetzelfde als #00FF00.

CMYK

CMYK wordt gebruikt voor drukwerk. Een printer bouwt kleur op door cyaan-, magenta-, gele en zwarte inkt in lagen op wit papier aan te brengen. Het model werkt dus door licht af te trekken in plaats van toe te voegen. Elk kanaal is een percentage van 0 tot 100. CMYK(0, 0, 0, 0) betekent helemaal geen inkt, waardoor het witte papier zichtbaar blijft. CMYK kan niet elke kleur reproduceren die een scherm kan weergeven; sommige heldere schermkleuren, vooral bepaalde blauwe en groene tinten, zien er na het afdrukken doffer uit.

HSV

HSV beschrijft tint, verzadiging en waarde afzonderlijk. De tint is de kleurfamilie en wordt aangegeven in graden van 0° tot 360°, waarbij 0° rood, 120° groen en 240° blauw is. Verzadiging geeft aan hoe levendig de kleur is, van 0% (grijs) tot 100% (volledig gekleurd). De waarde geeft aan hoe helder de kleur is, van 0% (zwart) tot 100% (volledige helderheid). HSV sluit aan bij de manier waarop mensen kleuren van nature beschrijven. Daarom zijn het spectrum en de schuifregelaar voor helderheid in dit hulpmiddel daarop gebaseerd.

Formule voor RGB naar hex

Elk RGB-kanaal, een getal van 0 tot 255, wordt omgezet in een hexadecimaal getal van twee cijfers. Vervolgens worden de drie paren samengevoegd met een # ervoor.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Formule voor RGB naar CMYK

Eerst wordt elk RGB-kanaal geschaald naar een fractie tussen 0 en 1. Zwart (K) wordt bepaald op basis van het grootste kanaal. Daarna worden cyaan, magenta en geel berekend uit de resterende kanalen en K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Als K gelijk is aan 1 (de kleur is zuiver zwart), worden C, M en Y allemaal ingesteld op 0 om delen door nul te voorkomen.

Formule voor RGB naar HSV

RGB wordt eerst geschaald naar fracties tussen 0 en 1. Laat $C_{max}$ de grootste van de drie zijn, $C_{min}$ de kleinste en $\Delta$ het verschil ertussen.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ anders } \frac{\Delta}{C_{max}}\times 100\%$

De tint hangt af van het kanaal dat het grootst is:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Uitgewerkt voorbeeld Begin met RGB(46, 204, 113), een groentint. **Hex:** 46 in hex is `2E`, 204 is `CC` en 113 is `71`, wat `#2ECC71` oplevert. **CMYK:** Geschaald zijn R′ = 0,180, G′ = 0,800 en B′ = 0,443. G′ is het grootst, dus K = 1 − 0,800 = 0,20, oftewel 20% zwart. Vervolgens is C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77%, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0% en Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45%. Het resultaat is CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (groen), $C_{min}$ = 0,180, dus Δ = 0,620. De waarde is 80%. De verzadiging is 0,620 / 0,800 × 100 ≈ 77%. Omdat groen het grootst is, is H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Het resultaat is HSV(145°, 77%, 80%). ## Kleurkeuzes toegankelijk maken Ongeveer 1 op (2,5 cm) 12 mannen en ongeveer 1 op (2,5 cm) 200 vrouwen heeft een vorm van kleurenziendeficiëntie, meestal een verminderd vermogen om rood van groen te onderscheiden. Een ontwerp dat uitsluitend op kleur vertrouwt om betekenis over te brengen, zoals een rode foutmelding zonder pictogram of label, werkt niet voor deze gebruikers. Door naast de kleur een tekstlabel, pictogram of patroon toe te voegen, wordt dit opgelost. Ook moet tekst voldoende contrast met de achtergrond hebben. De Web Content Accessibility Guidelines (WCAG) bevelen voor normale tekst een contrastverhouding van ten minste 4,5:1 aan en voor grote tekst 3:1. Hiervoor is een speciale contrastchecker nodig, omdat dit hulpmiddel zelf geen contrastverhoudingen berekent. ## Veelgestelde vragen **Wat is het verschil tussen RGB en CMYK?** RGB is bedoeld voor schermen en bouwt kleur op door rood, groen en blauw licht toe te voegen. CMYK is bedoeld voor drukwerk en bouwt kleur op door inkt in lagen op papier aan te brengen, waardoor licht juist wordt afgetrokken. RGB kan helderdere kleuren produceren dan CMYK, omdat inkt het kleurengamma dat een scherm kan uitstralen niet kan evenaren. **Waarom zien afgedrukte kleuren er anders uit dan op het scherm?** Een scherm zendt rechtstreeks licht uit; een afgedrukte pagina weerkaatst alleen het licht dat erop valt. CMYK-inkt heeft ook een kleiner kleurengamma dan RGB-licht, waardoor sommige heldere schermkleuren op papier niet exact kunnen worden nagebootst. **Wat betekent het #-symbool in een hexcode?** Het geeft aan dat de daaropvolgende tekens een hexadecimale kleurcode vormen, een conventie uit de beginperiode van HTML en CSS. Zonder dit symbool herkent een browser de waarde niet als kleur. **Waarom hebben sommige hexcodes maar drie tekens?** Een code van drie tekens is een afkorting van een code van zes tekens, waarbij elk paar hetzelfde cijfer herhaalt. `#0F0` wordt uitgebreid tot `#00FF00`. **Zijn de omzettingen tussen indelingen exact?** RGB naar hex is exact, omdat het om dezelfde getallen in een ander grondtal gaat. RGB naar CMYK is een benadering, omdat licht en inkt worden omgerekend, twee verschillende fysische processen met verschillende kleurengamma’s. **Kan dit hulpmiddel rechtstreeks een kleur uit een afbeelding of webpagina kiezen?** Nee. Een browserextensie of de ingebouwde kleurkiezer van het besturingssysteem, zoals Digital Color Meter op macOS, kan een kleur van het scherm aflezen. De verkregen waarde kan vervolgens in dit hulpmiddel worden ingevoerd om deze om te zetten.