Color Name Finder
Vind voor elke kleurwaarde de dichtstbijzijnde benoemde CSS-kleur. Plak maximaal 100 kleuren in een willekeurig CSS-formaat en bekijk per kleur de beste overeenkomst uit de 148 benoemde kleuren van CSS, gerangschikt op kleurverschil volgens CIEDE2000. Je ziet de naam, de hex-code, de Delta E-waarde en een beoordeling van de overeenkomst. Toon maximaal 10 overeenkomsten per kleur. Handig voor het benoemen van ontwerptokens, het beschrijven van kleuren in documentatie en het vinden van een snel trefwoord.
Veelgestelde vragen
Welke kleurnamen worden doorzocht?
De 148 benoemde kleuren van CSS Color 4, van aliceblue tot yellowgreen, inclusief rebeccapurple. Namen met dezelfde waarde, zoals aqua en cyan, fuchsia en magenta, en de schrijfwijzen gray en grey, staan samen in één rij. Daardoor blijven er 139 unieke kleuren over. transparent en systeemkleuren zijn niet inbegrepen.
Hoe wordt de dichtstbijzijnde naam bepaald?
Met het kleurverschil CIEDE2000, Delta E 2000, berekend in CIELAB door de culori-bibliotheek. Dit is de industriestandaard voor hoe verschillend twee kleuren eruitzien voor een gemiddelde waarnemer; een lagere waarde betekent een betere overeenkomst.
Wat betekenen de overeenkomstbeoordelingen?
Exact betekent dat de benoemde kleur dezelfde hex-code heeft. Zeer dichtbij betekent een Delta E lager dan 2, wat moeilijk te onderscheiden is; vergelijkbaar betekent lager dan 5, zichtbaar naast elkaar; ver weg betekent 5 of hoger, waarbij de naam alleen de algemene kleurfamilie beschrijft.
Hoeveel overeenkomsten krijg ik?
Per kleur krijg je er 1 tot 10, standaard 3, gerangschikt van dichtstbij tot verst weg. Meer overeenkomsten zijn handig wanneer de dichtstbijzijnde naam de juiste lichtheid maar de verkeerde tint heeft, of andersom.
Hoe voer ik kleuren in?
Voer één kleur per regel in, of meerdere op één regel, gescheiden door komma's of puntkomma's; komma's binnen rgb() of hsl() dienen niet als scheidingsteken. Hex-codes met of zonder #, CSS kleurnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() en cmyk() worden geaccepteerd, tot maximaal 100 kleuren per uitvoering.
Wat gebeurt er met transparante kleuren?
Benoemde kleuren zijn ondoorzichtig, dus de alfawaarde wordt genegeerd en de kleur wordt vergeleken alsof die volledig ondoorzichtig is. De kolom HEX toont de vergeleken code van 6 cijfers.
Wat gebeurt er met kleuren met een breed kleurbereik?
Kleuren buiten sRGB, zoals levendige Display P3- of OKLCH-waarden, worden eerst met het CSS Color 4-algoritme omgezet naar sRGB, omdat alle benoemde kleuren van CSS Color 4 sRGB-kleuren zijn. De kolom HEX toont vervolgens de omgezette waarde waarmee de namen worden vergeleken.
Kan ik de naam gebruiken in plaats van mijn hex-code?
Alleen als de overeenkomst exact is; anders ziet de benoemde kleur er anders uit. Een vergelijkbare naam is nog steeds een nuttige, voor mensen leesbare aanwijzing in een designtoken of documentatie, bijvoorbeeld een blauw dat dicht bij steelblue ligt.
Waarom alleen CSS namen en geen langere lijst?
CSS namen zijn de namen die elke browser begrijpt en die je rechtstreeks in een stylesheet kunt typen. Langere naamlijsten verschillen per leverancier en zijn vaak gelicentieerd, terwijl deze 148 namen zijn vastgelegd in de CSS-standaard.
Waarom kan een overeenkomst met een hogere Delta E voor mij dichterbij lijken?
Delta E 2000 modelleert een gemiddelde waarnemer onder standaardkijkomstandigheden. Je scherm, de kalibratie ervan, de omringende kleuren en individuele kleurwaarneming beïnvloeden allemaal wat het dichtstbij lijkt. Beschouw de rangschikking dus als een sterke leidraad, niet als een absolute maatstaf.