Farbnamen-Finder: Jede Farbe ihrem nächsten Namen zuordnen

Warum Farbnamen wichtig sind

Farben im digitalen Design werden üblicherweise als Hex-Codes, RGB-Werte oder HSL-Werte ausgedrückt. Diese numerischen Darstellungen sind zwar präzise, aber für die meisten Menschen bedeutungslos. Ein Farbname wie „Coral“ oder „Steel Blue“ vermittelt sofort einen Eindruck und macht Design-Diskussionen, Dokumentationen und Code-Reviews effizienter.

CSS unterstützt 148 benannte Farben, die sich direkt in Stylesheets verwenden lassen. Die nächstgelegene benannte Farbe zu einem gegebenen Hex-Code zu finden, hilft Entwicklern, lesbareres CSS zu schreiben, verbessert die Dokumentation zur Barrierefreiheit und macht die Tokens eines Designsystems verständlicher. Farbnamen verbessern zudem die Kommunikation zwischen Designern und Entwicklern, die nicht in Hex-Codes denken.

So funktioniert der Farbnamen-Abgleich

Farbnamen-Finder berechnen den Abstand zwischen einer Eingabefarbe und jeder benannten Farbe in einer Referenzpalette. Die nächstgelegene Übereinstimmung wird als Ergebnis zurückgegeben.

• RGB-Abstand – die einfachste Methode berechnet den euklidischen Abstand im RGB-Farbraum und behandelt R, G und B als dreidimensionale Koordinaten
• Gewichtetes RGB – passt die Abstandsberechnung an, indem die Kanäle unterschiedlich gewichtet werden. Das menschliche Auge ist empfindlicher für Grün, daher werden Unterschiede im Grün stärker gewichtet
• Delta E (CIE76/CIE2000) – wandelt Farben in den CIELAB-Farbraum um, der auf wahrnehmungsgetreue Gleichmäßigkeit ausgelegt ist. Ein Delta E von 1,0 entspricht dem kleinsten Farbunterschied, den ein Mensch wahrnehmen kann

Referenz der benannten CSS-Farben

CSS definiert 148 benannte Farben, die in allen modernen Browsern funktionieren. Diese Namen lassen sich überall dort verwenden, wo ein Farbwert erlaubt ist, unter anderem bei den Eigenschaften background-color, color, border-color und box-shadow.

• Grundfarben – 16 ursprüngliche HTML-Farben: black, white, red, green, blue, yellow, cyan, magenta und 8 weitere, die seit HTML 3.2 definiert sind
• Erweiterte Farben – 132 zusätzliche Namen, die in CSS3 hinzugefügt wurden, von „AliceBlue“ bis „YellowGreen“, ursprünglich aus der X11-Farbliste
• Besondere Werte – „transparent“ (vollständig transparent) und „currentColor“ (übernimmt den Wert der color-Eigenschaft) sind ebenfalls gültige CSS-Farbschlüsselwörter

Häufig gestellte Fragen

Wie genau ist der Farbnamen-Abgleich?

Die Genauigkeit hängt vom Abgleichsalgorithmus und der Referenzpalette ab. Bei 148 benannten CSS-Farben kann die nächstgelegene Übereinstimmung sich immer noch spürbar von der Eingabefarbe unterscheiden. Für Design-Arbeiten, die exakte Farben erfordern, verwende den Hex- oder RGB-Wert direkt. Farbnamen eignen sich am besten für Annäherungen, Dokumentation und die Kommunikation zwischen Menschen.

Was ist der Unterschied zwischen wahrnehmungsbezogenem und mathematischem Farbabstand?

Der mathematische Abstand (euklidisch im RGB) behandelt den Farbraum als gleichmäßig, doch das menschliche Sehen nimmt Farbunterschiede nicht gleichmäßig wahr. Wir sind empfindlicher für Grün und weniger empfindlich für Blau. Wahrnehmungsbezogene Abstandsmethoden wie Delta E (CIE2000) berücksichtigen diese Unterschiede, indem sie in einen wahrnehmungsgetreuen Farbraum umwandeln, und liefern so Ergebnisse, die besser mit der menschlichen Wahrnehmung von Farbunterschieden übereinstimmen.

Kann ich Pantone-Farbnamen verwenden?

Pantone-Farben sind ein proprietäres System mit Tausenden benannten Farben, das vor allem im Druck verwendet wird. Sie sind nicht Teil von CSS oder Webstandards. Die Umwandlung zwischen Pantone- und Hex-Farben ist nur näherungsweise möglich, da Pantone-Farben für bestimmte Druckfarben-Formulierungen und Papiersorten definiert sind, nicht für die Bildschirmdarstellung. Lizenzierte Werkzeuge wie der Pantone Color Finder liefern näherungsweise digitale Entsprechungen.