Kleurenkiezer

De Kleurenkiezer is een gratis tool waarmee je in je browser een kleur selecteert en de waarde in de gewenste notatie opvraagt.

Welke waarde geeft een kleurenkiezer?

Een kleurenkiezer geeft een numerieke weergave van de kleur die je op het kleurenwiel selecteert. Dezelfde zichtbare kleur kan in verschillende notaties worden uitgedrukt, meestal als hexadecimaal, RGB, RGBA, HSL of HSLA.

Elke notatie beschrijft kleur op een andere manier. Hexadecimaal en RGB leggen de waarden voor de rode, groene en blauwe kanalen vast. HSL gebruikt tint, verzadiging en lichtheid, waardoor systematische aanpassingen eenvoudiger kunnen zijn. Notaties met een alfakanaal beschrijven ook de dekking.

• Hexadecimale waarden bestaan uit een hekje met daarachter hexadecimale cijfers, zoals #336699.
• RGB-waarden geven elk kanaal meestal weer als een getal van 0 tot en met 255, zoals rgb(51, 102, 153).
• HSL-waarden beschrijven een tinthoek en percentages voor verzadiging en lichtheid, zoals hsl(210, 50%, 40%).
• RGBA en HSLA voegen transparantie toe. Een alfawaarde van 0 is volledig transparant en een waarde van 1 volledig dekkend.

CSS ondersteunt ook kleurnamen, maar die zijn beperkt tot een vaste reeks en minder geschikt voor exacte designtokens. Gegenereerde numerieke waarden zijn doorgaans eenvoudiger over te nemen in designsystemen, stylesheets en applicatiecode.

Hoe gebruik ik de kleurenkiezer?

Selecteer het veld Color, kies het gewenste punt op het kleurenwiel en gebruik vervolgens de resulterende waarde in de notatie die je toepassing nodig heeft. Alles gebeurt volledig in je browser. De gekozen kleur wordt nooit naar een server geüpload.

Werk je met een bestaande interface, begin dan met de notatie die al in de codebase wordt gebruikt. Zo voorkom je onnodige kleurconversies en blijven pull requests gemakkelijker te beoordelen. Controleer bij gegevens van derden eerst of de waarden ook dekking bevatten voordat je ze vervangt door een kleur die alleen op het oog gelijkwaardig lijkt.

Een praktische werkwijze vóór implementatie is om de bedoelde kleur te selecteren of na te maken, de juiste notatie te kopiëren en die in de daadwerkelijke componentstatus te controleren. Test de normale, hover-, focus- en uitgeschakelde status afzonderlijk. Dekking en overgenomen stijlen kunnen het uiteindelijke resultaat namelijk veranderen.

Het resultaat lezen

Lees het resultaat op basis van het gebruikte kleurmodel en controleer een eventuele alfawaarde voordat je de kleur naar je code kopieert. Bij RGB bepaalt elke kanaalwaarde de intensiteit van respectievelijk rood, groen of blauw. Bij HSL loopt de tint rond een kleurenwiel, terwijl verzadiging de kleurintensiteit bepaalt en lichtheid de verhouding tussen zwart en wit.

Kleurnotaties moeten in CSS en gestructureerde gegevens exact kloppen. Veelvoorkomende fouten bij handmatige bewerking zijn:

• het hekje aan het begin van een hexadecimale CSS-waarde weglaten;
• vijf of zeven hexadecimale cijfers gebruiken, terwijl dat geen geldige standaardlengtes zijn;
• percentages invoeren waar een RGB-implementatie kanaalwaarden als getallen verwacht;
• komma's vergeten in de oudere RGB-syntaxis of onverenigbare oude en moderne syntaxis combineren;
• een waarde met alfakanaal kopiëren naar software die alleen hexwaarden van zes cijfers accepteert;
• een decimale komma gebruiken, zoals 0,5, terwijl CSS een decimale punt vereist, zoals 0.5.

De kleurenkiezer genereert kleurwaarden en is geen algemene CSS-validator. De tool kan niet vaststellen of een omliggende declaratie, een JSON-document of een themabestand geldig is. Syntaxisfouten buiten de kleurwaarde moet je daarom nog controleren met de toepasselijke parser of ontwikkeltool.

Voorbeelden van kleurconversies

Bij een hexadecimale kleur van zes cijfers staan de cijferparen voor rood, groen en blauw. De volgende notaties beschrijven bijvoorbeeld dezelfde dekkende kleur.

Hexwaarde #336699

RGB-equivalent rgb(51, 102, 153)

HSL-equivalent hsl(210, 50%, 40%)

Een hexwaarde van drie cijfers is een verkorte notatie. Elk cijfer wordt herhaald om een waarde van zes cijfers te vormen.

Korte hexwaarde #fff

Uitgeschreven hexwaarde #ffffff

RGB-equivalent rgb(255, 255, 255)

Een hexwaarde van acht cijfers bevat na de paren voor rood, groen en blauw ook een alfawaarde. Let op bij systemen die een andere kanaalvolgorde gebruiken of de notatie van acht cijfers niet accepteren. Een effen kleur die er hetzelfde uitziet, kan bovendien een ander resultaat geven als er dekking wordt toegepast boven een andere achtergrond.

Welke kleurnotatie kan ik het beste kiezen?

Kies de kleurnotatie die het doelsysteem al verwacht, tenzij er een duidelijke reden is om daarvan af te wijken. Een hexwaarde van zes cijfers is compact en wordt veel gebruikt in CSS-variabelen en bestanden met designtokens. RGB is handig wanneer software de afzonderlijke kanaalwaarden direct weergeeft. HSL is vooral bruikbaar als je verwante kleuren maakt door de lichtheid of verzadiging aan te passen.

• Gebruik een hexwaarde van zes cijfers voor een dekkende webkleur als beknoptheid en brede leesbaarheid belangrijk zijn.
• Gebruik een hexwaarde van acht cijfers alleen als de doelomgeving alfawaarden in die notatie expliciet ondersteunt.
• Gebruik RGB of RGBA als je met de afzonderlijke rode, groene en blauwe kanalen werkt.
• Gebruik HSL of HSLA voor programmatisch gemaakte themavarianten op basis van tint, verzadiging of lichtheid.
• Gebruik de Kleurconverter als je al een waarde hebt en die wilt omzetten, in plaats van visueel een nieuwe kleur te kiezen.

Beschouw een RGB-waarde op het scherm niet als een drukspecificatie. Voor commercieel drukwerk kunnen CMYK-waarden, een ICC-kleurprofiel, proefdrukken en afstemming met de drukker nodig zijn. Alleen een wiskundige conversie kan niet garanderen dat een gedrukte kleur overeenkomt met een verlicht scherm.

Wanneer is een kleur kiezen of converteren niet nodig?

Een kleur kiezen of converteren is niet nodig als de bestaande waarde al de notatie heeft die het doelsysteem vereist. Herhaald converteren kan afrondingsverschillen, inconsistent hoofdlettergebruik of onnodige wijzigingen in bronbestanden veroorzaken.

Het kan ook beter zijn om een benoemd designtoken, zoals een themavariabele, te behouden in plaats van dit door een letterlijke waarde te vervangen. Tokens bewaren de samenhang tussen componenten en maken het mogelijk een kleur centraal te wijzigen. Een kleur die alleen door een machine wordt gebruikt, hoeft evenmin leesbaarder voor mensen te worden weergegeven, tenzij iemand de waarde moet controleren of onderhouden.

Een kleurenkiezer kan niet zelfstandig bepalen of een gekozen kleur voldoende contrast heeft, aan een merkspecificatie voldoet of herkenbaar blijft voor mensen met een kleurwaarnemingsstoornis. Controleer combinaties van voor- en achtergrondkleuren met een speciale contrasttool en bekijk de interface in zijn context.

Veelgestelde vragen

Kan ik het resultaat in CSS-variabelen gebruiken?

Ja, zolang de gekozen notatie geldige CSS is voor de browsers en buildtools die je ondersteunt. Sla de volledige waarde op in een aangepaste eigenschap en verwijs er vervolgens naar met de functie var(). Als het project afzonderlijke kanalen bewerkt, kan het handiger zijn om die kanalen op te slaan volgens de bestaande conventie van het project.

Waarom ziet dezelfde kleur er op een ander scherm anders uit?

Beeldschermen verschillen in kalibratie, helderheid, paneeltechnologie en ondersteuning van kleurengamma's. Ook het kleurbeheer van de browser en het beeldschermprofiel van het besturingssysteem kunnen de weergave beïnvloeden. Dezelfde numerieke waarde garandeert daarom niet op elk apparaat exact dezelfde fysieke weergave.

Maakt het voor de kleur uit of hexletters hoofdletters of kleine letters zijn?

Nee. Bij de hexadecimale cijfers A tot en met F maakt hoofdlettergebruik niet uit. #AABBCC en #aabbcc stellen dus dezelfde kleur voor. Volg wel de conventie van de repository om wijzigingen te voorkomen die alleen de opmaak betreffen.

Mag een kleurwaarde letters met accenten of niet-Latijnse tekens bevatten?

De standaardnotaties voor hexadecimaal, RGB en HSL gebruiken ASCII-cijfers, letters en leestekens. Letters met accenten en niet-Latijnse tekens maken geen deel uit van deze numerieke kleurnotaties. Ze mogen eventueel wel voorkomen in omliggende variabelenamen of metadata, mits de betreffende programmeertaal en bestandscodering dat toestaan.

Is een transparante kleur hetzelfde als geen kleur?

Nee. Een volledig transparante kleur bevat nog steeds kanaalwaarden, ook al zijn die op zichzelf niet zichtbaar. Deze verborgen kanalen kunnen van belang zijn bij animaties, interpolatie, compositing of latere wijzigingen van de dekking. Behoud ze daarom als de toepassing van dergelijk gedrag afhankelijk is.

Moet ik decimale kanaalwaarden afronden?

Rond decimale kleurkanalen en alfawaarden alleen af tot de precisie die het doelsysteem accepteert en die nodig is voor consistente uitvoer. Te veel precisie maakt waarden moeilijker te beoordelen, terwijl te grof afronden een klein kleurverschil kan veroorzaken. Controleer na het afronden de weergegeven component tegen de bedoelde achtergrond en in de verschillende interactiestatussen.