In dit artikel
Waarom kleurnamen vinden belangrijk is
Kleuren in digitaal ontwerp worden doorgaans uitgedrukt als hex-codes, RGB-waarden of HSL-waarden. Hoewel precies, zijn deze numerieke representaties betekenisloos voor de meeste mensen. Een kleurnaam zoals 'Coral' of 'Steel Blue' communiceert onmiddellijk, waardoor ontwerpdiscussies, documentatie en code reviews efficienter worden.
CSS ondersteunt 148 benoemde kleuren die direct in stylesheets kunnen worden gebruikt. Het vinden van de dichtstbijzijnde benoemde kleur voor een bepaalde hex-code helpt ontwikkelaars leesbaardere CSS te schrijven en maakt designsysteemtokens begrijpelijker.
Hoe kleurnaammatching werkt
Kleurnaamzoekers werken door de afstand te berekenen tussen een invoerkleur en elke benoemde kleur in een referentiepalet.
- RGB-afstand — de eenvoudigste methode berekent de Euclidische afstand in de RGB-kleurruimte, waarbij R, G en B als driedimensionale coordinaten worden behandeld
- Gewogen RGB — past de afstandsberekening aan door kanalen verschillend te wegen. Menselijke ogen zijn gevoeliger voor groen, dus groenverschillen worden zwaarder gewogen
- Delta E (CIE76/CIE2000) — converteert kleuren naar de CIELAB-kleurruimte, die is ontworpen om perceptueel uniform te zijn. Een Delta E van 1.0 vertegenwoordigt het kleinste kleurverschil dat een mens kan waarnemen
Probeer gratis — geen aanmelding vereist
Vind een kleurnaam →CSS benoemde kleuren referentie
CSS definieert 148 benoemde kleuren die in alle moderne browsers werken. Deze namen kunnen overal worden gebruikt waar een kleurwaarde wordt geaccepteerd.
- Basiskleuren — 16 originele HTML-kleuren: black, white, red, green, blue, yellow, cyan, magenta en 8 andere gedefinieerd sinds HTML 3.2
- Uitgebreide kleuren — 132 extra namen toegevoegd in CSS3, van 'AliceBlue' tot 'YellowGreen', oorspronkelijk van de X11-kleurenlijst
- Speciale waarden — 'transparent' (volledig doorzichtig) en 'currentColor' (erft van de color-eigenschap) zijn ook geldige CSS-kleurtrefwoorden
Veelgestelde vragen
Hoe nauwkeurig is kleurnaammatching?
Nauwkeurigheid hangt af van het matching-algoritme en het referentiepalet. Met 148 CSS benoemde kleuren kan de dichtstbijzijnde match nog merkbaar verschillen van de invoerkleur. Voor ontwerpwerk dat exacte kleuren vereist, gebruik direct de hex- of RGB-waarde.
Wat is het verschil tussen perceptuele en wiskundige kleurafstand?
Wiskundige afstand (RGB Euclidisch) behandelt de kleurruimte als uniform, maar menselijk zicht neemt kleurverschillen niet uniform waar. We zijn gevoeliger voor groen en minder voor blauw. Perceptuele afstandsmethoden zoals Delta E (CIE2000) houden hier rekening mee door te converteren naar een perceptueel uniforme kleurruimte.
Kan ik Pantone-kleurnamen gebruiken?
Pantone-kleuren zijn een eigendomssysteem met duizenden benoemde kleuren, voornamelijk gebruikt in drukwerk. Ze maken geen deel uit van CSS- of webstandaarden. Conversie tussen Pantone en hex-kleuren is bij benadering omdat Pantone-kleuren zijn gedefinieerd voor specifieke inktformuleringen en papiersoorten, niet voor schermweergave.