Farbnamen-Finder — Nächster CSS-Farbname

Das nächstliegende CSS-Schlüsselwort finden

CSS enthält eine lange Liste benannter Farbschlüsselwörter, von vertrauten Namen wie black, white und red bis zu spezielleren wie cornflowerblue, papayawhip und mediumseagreen. Dieser Farbnamen-Finder ordnet jeden HEX-Wert dem nächstgelegenen verfügbaren CSS-Namen zu. Geben Sie eine Farbe ein, und der Browser vergleicht sie per RGB-Abstand mit der eingebetteten Schlüsselwortliste. Der nächste Name, sein HEX-Wert und mehrere ähnliche Alternativen werden sofort aktualisiert.

Benannte Farben eignen sich für schnelle Demos, Unterricht, Dokumentation und gut lesbare Beispiele. Sie helfen auch, jemandem eine Farbe zu beschreiben, wenn keine exakten Tokens nötig sind. Die Liste benannter Farben ist jedoch begrenzt und ungleichmäßig verteilt: Es gibt viele blasse Rosa- und Blautöne, aber weniger präzise moderne Markenfarbtöne. Das nächstliegende Schlüsselwort ist daher eine Annäherung und kein perfekter Ersatz für Ihren ursprünglichen HEX-Code.

So funktioniert die Suche nach der ähnlichsten Farbe

Jedes CSS-Schlüsselwort hat feste Rot-, Grün- und Blauwerte. Das Skript wandelt Ihre HEX-Eingabe in RGB um und misst den quadrierten Abstand zu jeder benannten Farbe, indem es die drei Kanäle vergleicht. Der Name mit dem kleinsten Abstand wird als nächster Treffer angezeigt. Diese Methode ist schnell und vorhersehbar und damit ideal für ein Client-seitiges Tool. Es ist keine vollständige Formel für wahrnehmungsbasierte Farbunterschiede, daher wirken zwei Farben mit ähnlichem RGB-Abstand für das menschliche Auge nicht immer gleich nah.

Wann Namen statt HEX sinnvoll sind

Für produktive Design-Systeme sind HEX, RGB, HSL oder Custom Properties meist besser als Farbnamen, weil sie die genaue Absicht bewahren. Namen glänzen in Beispielen, schnellen Prototypen, Blogbeiträgen und Gesprächen, in denen Lesbarkeit wichtiger ist als Präzision. Verwenden Sie eine benannte Farbe in ausgelieferten CSS, testen Sie sie wie jedes andere Token in der gesamten Oberfläche. Das nächste Schlüsselwort braucht womöglich noch eine Kontrastprüfung, bevor es als Hintergrund, Textfarbe oder Statusanzeige dient.