Kleurnaamvinder — Dichtstbijzijnde CSS-kleur

Vind het dichtstbijzijnde CSS-sleutelwoord

CSS bevat een lange lijst benoemde kleursleutelwoorden, van bekende keuzes als black, white en red tot specifiekere namen zoals cornflowerblue, papayawhip en mediumseagreen. Deze kleurnaamvinder koppelt elke HEX-waarde aan de dichtstbijzijnde beschikbare CSS-naam. Voer een kleur in en de browser vergelijkt die met de ingebouwde sleutelwoordenlijst op basis van RGB-afstand. De dichtstbijzijnde naam, de HEX-waarde en enkele nabije alternatieven worden direct bijgewerkt.

Benoemde kleuren zijn handig voor snelle demo's, onderwijs, documentatie en leesbare voorbeelden. Ze kunnen ook helpen om een kleur aan iemand te beschrijven als exacte tokens niet nodig zijn. De lijst met benoemde kleuren is echter beperkt en ongelijk verdeeld: er zijn veel bleke roze en blauwe tinten, maar minder precieze moderne merktinten. Een dichtstbijzijnd sleutelwoord is dus een benadering en geen perfecte vervanging van je oorspronkelijke HEX-code.

Hoe het zoeken naar de dichtstbijzijnde kleur werkt

Elk CSS-sleutelwoord heeft een vaste rood-, groen- en blauwwaarde. Het script zet je HEX-invoer om naar RGB en meet daarna de gekwadrateerde afstand tot elke benoemde kleur door de drie kanalen te vergelijken. De naam met de kleinste afstand wordt getoond als dichtstbijzijnde match. Deze methode is snel en voorspelbaar, ideaal voor een tool aan de clientzijde. Het is geen volledige formule voor waarneembaar kleurverschil, dus twee kleuren met een vergelijkbare RGB-afstand voelen voor het menselijk oog niet altijd even dichtbij.

Wanneer namen beter zijn dan HEX

Voor productiedesignsystemen zijn HEX, RGB, HSL of custom properties meestal beter dan kleurnamen, omdat ze de exacte bedoeling behouden. Namen komen goed tot hun recht in voorbeelden, snelle prototypes, blogposts en gesprekken waar leesbaarheid belangrijker is dan precisie. Gebruik je een benoemde kleur in live CSS, test die dan in de volledige interface zoals elk ander token. Het dichtstbijzijnde sleutelwoord kan nog een contrastcontrole nodig hebben voordat het als achtergrond, tekstkleur of statusindicator dient.