Farbnamen-Finder
Den CSS-Namen für jede Farbe finden
Der Color Name Finder ordnet jedem Hex-Wert den nächstgelegenen benannten CSS-Farbnamen zu und zeigt die vollständige Aufschlüsselung dieses Namens – Hex-, RGB- und HSL-Werte sowie einen numerischen Distanzwert. Er ist nützlich, wenn Sie einen Hex-Wert aus einer Designdatei haben und wissen möchten, ob ein Standardname nah genug für den Einsatz ist, oder wenn Sie die Palette der benannten Farben durchstöbern und sehen möchten, wie die einzelnen Namen tatsächlich aussehen.
Verwendung
- Geben Sie einen Hex-Code in das Eingabefeld ein, mit oder ohne
#, oder wählen Sie eine Farbe visuell über die native Farbauswahl. - Drücken Sie Name finden, um den Vergleich gegen alle 148 benannten Farben zu starten.
- Lesen Sie die Ergebniskarte: Farbname, Farbfeld, Hex, RGB, HSL und Distanzwert.
- Nutzen Sie das Suchfeld, um die Liste der benannten Farben nach Teilzeichenketten zu filtern. Die Eingabe
darklistet jede mit dark beginnende Familie;bluebündelt alle Blautöne der Liste.
Die dreistellige Kurzschreibweise wird automatisch erweitert, #f80 gilt also als #ff8800. Die Eingabe ist unabhängig von Groß- und Kleinschreibung, Hex-Buchstaben dürfen groß oder klein sein.
Wie der Treffer bewertet wird
Jede benannte Farbe ist als RGB-Tripel gespeichert. Für eine Kandidatenfarbe berechnet das Tool:
distance = sqrt( (3*ΔR)^2 + (4*ΔG)^2 + (2*ΔB)^2 )
Dabei sind ΔR, ΔG und ΔB die Kanalunterschiede zwischen Ihrer Eingabe und dem Kandidaten. Die Gewichte werden vor dem Quadrieren angewendet, Grün trägt also pro Einheit sechzehnmal so viel bei wie Blau und rund 1,8-mal so viel wie Rot. Zurückgegeben wird der Kandidat mit der kleinsten Distanz, zusammen mit dieser auf zwei Nachkommastellen gerundeten Distanz.
Das ist eine schnelle, abhängigkeitsfreie Näherung. Sie ist kein wahrnehmungsbezogener Farbabstandsstandard wie CIEDE2000 oder auch nur das ältere CIE76-Delta-E; sie verschiebt die Suche lediglich in Richtung Grün, wo das Auge am empfindlichsten ist, und weg von Blau, wo es am wenigsten empfindlich ist.
Praxisbeispiele
| Eingabe | Erweitert | Nächster Name | Hex dieses Namens | Distanz |
|---|---|---|---|---|
#f80 | #ff8800 | darkorange | #ff8c00 | 16 |
#663399 | #663399 | rebeccapurple | #663399 | 0 |
#00ffff | #00ffff | aqua | #00ffff | 0 |
#f5f5f5 | #f5f5f5 | whitesmoke | #f5f5f5 | 0 |
tomato | #ff6347 | tomato | #ff6347 | 0 |
Die erste Zeile zeigt, warum die Gewichtung zählt. #ff8800 liegt nahe an reinem Orange (#ffa500), doch darkorange ist numerisch näher: Blau- und Rotkanal sind identisch, nur der Grünkanal weicht um 4 ab. Mit dem Faktor 4 skaliert ergibt das eine Distanz von 16.
Wo benannte Farben an Grenzen stoßen
- Duplikate teilen einen Hex-Wert. Aqua/cyan, fuchsia/magenta und gray/grey sind für den Browser austauschbar. Das Tool liefert den ersten Namen in seiner internen Reihenfolge, die Antwort ist also deterministisch, aber zwischen Synonymen beliebig.
- Grautöne sind dicht gedrängt. Dutzende nahezu graue Namen liegen eng beieinander, eine mittelgraue Eingabe kann daher je nach winzigen Kanalunterschieden auf gainsboro, lightgray, silver oder darkgray landen. Hier ist der Distanzwert aussagekräftiger als der Name.
- RGB-Distanz ist nicht Wahrnehmung. Zwei Farben können eine kleine RGB-Distanz haben und trotzdem anders wirken, sobald die Helligkeit ins Spiel kommt, weil RGB keinen separaten Helligkeitsanteil kennt.
- Der Treffer ist nur ein Hinweis. Das Tool liefert immer einen Namen, selbst für eine Farbe ohne guten Namen; prüfen Sie daher die Distanz, bevor Sie dem Etikett vertrauen.
Die HSL-Ausgabe lesen
Neben Hex und RGB zeigt jedes Ergebnis HSL an: einen Farbton von 0 bis 360 Grad sowie Sättigung und Helligkeit als Prozentwerte. HSL ist oft leichter zu durchdenken als RGB, weil die drei Achsen getrennten Intuitionen entsprechen. Der Farbton ist die Farbfamilie, die Sättigung sagt, wie kräftig sie ist, und die Helligkeit, wie nah sie an Schwarz oder Weiß liegt.
Zwei Ergebnisse aus den obigen Beispielen machen das konkret:
| Farbe | Hex | HSL |
|---|---|---|
| rebeccapurple | #663399 | hsl(270, 50%, 40%) |
| darkorange | #ff8c00 | hsl(33, 100%, 50%) |
Rebeccapurple liest sich als halbsattes Violett mittlerer Helligkeit, was zu 270°, 50%, 40% passt. Darkorange ist voll gesättigt und genau auf halbem Weg zwischen Schwarz und Weiß, daher 100% und 50%. Wenn Sie eine gefundene Farbe aufhellen oder abdunkeln möchten, ist das Anpassen des Helligkeitswerts weit vorhersehbarer als das Bearbeiten einzelner RGB-Kanäle – deshalb zeigt das Tool HSL an, obwohl die Distanzberechnung selbst in RGB läuft.
Woher die Namen stammen
Die benannten Farben sind nicht willkürlich. Die ursprünglichen 16 stammen aus dem frühen HTML und der grundlegenden VGA-Palette; der größere Satz kam mit SVG und X11 und wurde in CSS übernommen. Diese Geschichte erklärt manche Eigenheiten: aqua und cyan sind beide definiert, weil zwei Gemeinschaften unterschiedliche Wörter für denselben Wert nutzten, und die Schreibweisen gray/grey bestehen fort, um amerikanische wie britische Nutzer zufriedenzustellen.
Ein Name ist bewusst persönlich. rebeccapurple wurde 2014 in CSS Color Level 4 aufgenommen, als Ersatz für einen informellen Vorschlag beccapurple, im Gedenken an Rebecca Meyer. Er ist normaler Bestandteil der CSS-Spezifikation, jeder moderne Browser akzeptiert ihn also neben den älteren Namen.
Praktische Tipps
- Für eine kleine, handgeschriebene Palette machen benannte Farben CSS lesbarer als Hex-Werte; für eine Markenpalette behalten Sie den Hex-Wert und nutzen den Namen nur als Kommentar.
- Wandeln Sie einen exakten Namen hin und zurück, um den Hex-Wert zu bestätigen, den der Browser verwendet, da mehrere Namen Aliase sind.
- Benannte Farben bieten keine Kontrastgarantie. Kombinieren Sie jedes Ergebnis mit einem Kontrastprüfer, bevor Sie es für Text verwenden.
- Wenn Sie den wahrnehmungsbezogen nächstgelegenen statt den RGB-nächsten Treffer brauchen, wandeln Sie zuerst in HSL um und vergleichen Sie Helligkeit und Farbton von Hand, oder greifen Sie zu einem speziellen Palettenwerkzeug.
Verwandte Tools
Häufig gestellte Fragen
Wie viele benannte CSS-Farben umfasst die Liste, und warum wiederholen sich manche Namen?
Die Liste enthält den vollständigen Satz von 148 benannten CSS-Farben, einschließlich der 16 HTML4-Grundfarben, der SVG/CSS3-Ergänzungen und rebeccapurple. Einige Namen sind Synonyme mit demselben Hex-Wert, etwa aqua und cyan, fuchsia und magenta sowie die Paare gray/grey. Passt ein Hex-Wert auf zwei Namen, liefert das Tool denjenigen, der in seiner Liste zuerst steht.
Welche Formel verwendet das Tool, um den nächstgelegenen Namen zu wählen?
Es wandelt die Eingabe in RGB um und berechnet gegen jede benannte Farbe eine gewichtete euklidische Distanz. Die Kanaldifferenz wird zuvor skaliert: Rot mit 3, Grün mit 4 und Blau mit 2. Der Name mit der kleinsten Distanz gewinnt. Grün wird am stärksten gewichtet, weil das menschliche Auge dafür am empfindlichsten ist.
Was bedeutet der Distanzwert genau?
Es ist die gewichtete RGB-Distanz zwischen Ihrer Eingabe und dem gefundenen Namen, auf zwei Nachkommastellen gerundet. Null bedeutet exakte Übereinstimmung. Einen offiziellen Grenzwert gibt es nicht, doch ein Wert unter etwa 10 ist mit bloßem Auge kaum zu unterscheiden, während ein Wert über 50 meist nach einer anderen Farbe aussieht. Die Zahl eignet sich zum Vergleichen von Kandidaten, nicht als wahrnehmungsbezogenes Delta-E.
Kann ich statt eines Hex-Codes einen Farbnamen wie tomato eingeben?
Ja. Das Eingabefeld akzeptiert sowohl einen 3- oder 6-stelligen Hex-Wert, mit oder ohne führendes `#`, als auch einen CSS-Farbnamen. Ein gültiger Name wie tomato liefert diese Farbe mit Distanz null, ein unbekannter Name liefert kein Ergebnis.
Warum liefert #00ffff den Namen aqua statt cyan?
Aqua und cyan sind dieselbe Farbe, beide als `#00ffff` definiert. Die Suche läuft die Liste der Reihe nach durch und behält den ersten exakten Treffer, daher wird aqua zurückgegeben. Dasselbe passiert bei fuchsia gegenüber magenta und bei den Schreibweisen gray/grey.
Wie verlässlich ist der Treffer für eine Markenfarbe?
Behandeln Sie ihn als Vorschlag für den nächstgelegenen Namen, nicht als Farbmanagement-Entscheidung. Die Distanz wird in RGB berechnet, was die Wahrnehmung von Helligkeit und Farbton nicht modelliert; ein numerisch näherer Name kann daher gelegentlich weiter entfernt wirken als ein anderer Kandidat. Prüfen Sie das Ergebnis für Markenarbeit am Bildschirm und behalten Sie den exakten Hex-Wert im Stylesheet.
Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert