Was ist Farbnamen-Finder?

Gib einen beliebigen HEX-, RGB- oder HSL-Wert ein und erhalte den nächstgelegenen benannten Farbton aus einer Datenbank mit über 1.500 Namen. Aus einem Farbcode wird ein Name, den du aussprechen kannst, praktisch beim Schreiben von Designdoku oder beim Besprechen einer Palette mit Kollegen.

Die Namen stammen aus dem Open-Source-Projekt color-name-list, derselben Quelle, auf die auch Figma-Plugins und Tailwind-Erweiterungen zurückgreifen. Du gibst einen HEX-Wert ein, schaltest die Eingabe auf RGB oder HSL um und tippst die Kanäle, oder pickst eine Farbe mit der Pipette. Das Tool liefert den nächstgelegenen Treffer per RGB-Euklid-Distanz — angezeigt in HEX, RGB, HSL, HSV und CMYK —, dazu zwei Alternativnamen, einen Ähnlichkeitswert und eine WCAG-Kontrastprüfung, damit du erkennst, ob es ein nahezu perfekter Treffer oder nur eine grobe Annäherung ist.

Anleitung

1. Schritt 1 — Gib einen Farbwert im HEX-Format ein (z. B. #3B82F6), schalte die Eingabe auf RGB oder HSL um und tippe die Kanäle, oder wähle eine Farbe visuell mit dem Farbwähler.
2. Schritt 2 — Das Tool findet sofort den nächsten benannten Farbton zusammen mit dem genauen Abstandswert.
3. Schritt 3 — Sehen Sie den Farbnamen, seinen exakten HEX-Wert und einen visuellen Vergleich zwischen Ihrer Eingabe und der benannten Farbe.

Wann verwenden

• Eine Markenfarbe benennen, bevor sie in Styleguide oder Designsystem wandert.
• Eine Farbe aus einem Screenshot in einen Namen übersetzen, nach dem Entwickler suchen können.
• Eine Lack- oder Stoffprobe gegen eine bekannte Webpalette gegenprüfen.

Ergebnis

Ein Entwickler gibt #4A90D9 ein und erfährt, dass der nächste Farbname "Steel Blue" (#4682B4) ist, mit 96,2 % Ähnlichkeit.

Häufige Fragen

Woher kommen die Farbnamen?

Aus dem Open-Source-Projekt color-name-list, das rund 1500 Namen aus der xkcd-Umfrage, Farbherstellerkatalogen und der CSS-Spezifikation bündelt. Viele Designtools nutzen dieselbe Quelle, deshalb wirken die Namen vertraut.

Warum erreichen manche Eingaben nie 100% Ähnlichkeit?

Nur Farben, die exakt einem Eintrag entsprechen, bekommen 100%. Alles andere bekommt den nächsten Nachbarn nach RGB-Distanz. Über 95% sieht das Auge keinen Unterschied, unter 85% liegt der Name sichtbar daneben.

RGB-Distanz oder Wahrnehmungsdistanz?

Euklidische Distanz in RGB. Das ist schnell und reicht für die meisten Webfarben. Bei hochgesättigten Rot- und Grüntönen ist das Auge feiner als das RGB-Modell, dort kann ein Name leicht danebenliegen.

Kann ich HSL, RGB oder HEX direkt eingeben?

Ja — alle drei sind eingebaut. Wechsle den Eingabe-Tab auf HEX, RGB oder HSL und tippe deinen Wert ein, oder wähle eine Farbe mit der Pipette. Die Ergebniskarte zeigt die Trefferfarbe außerdem in HSL, HSV und CMYK, sodass du das passende Format kopieren kannst.

Warum geben zwei sehr unterschiedliche HEX-Werte denselben Namen zurück?

Die Liste ist in manchen Regionen dünn, vor allem bei matten Neutraltönen und Pastellrosa. Sind beide Eingaben weit von jeder Listenentry entfernt, gewinnt für beide derselbe nächste Nachbar. Der Ähnlichkeitswert zeigt den Abstand.

Ähnliche Tools