CSS-Farbnamen-Finder

So funktioniert es

1. Farbwert eingeben: Tippen oder fügen Sie einen Hex-Code (#3b82f6), einen RGB- oder HSL-Wert ein, oder klicken Sie den Farbwähler an, um eine Farbe visuell zu wählen.
2. Farbnamen erhalten: Die nächstgelegene benannte CSS-Farbe, eine Pantone-Referenz und ein menschenlesbarer Name werden sofort angezeigt.
3. Nahegelegene Farben erkunden: Sehen Sie eine Palette ähnlich benannter Farben, um die beste Übereinstimmung oder Alternative für Ihr Design zu finden.

Warum den Farbnamen-Finder nutzen?

Beim Arbeiten mit Designsystemen, Barrierefreiheits-Dokumentation oder Kundenkommunikation ist ein menschenlesbarer Farbname weit nützlicher als ein Hex-Code. „Cornflower Blue" kommuniziert klar; „#6495ed" tut das nicht. Dieses Tool schlägt die Brücke zwischen Maschinen-Farbwerten und menschlichen Farbnamen, und hilft Designern dabei, Paletten zu dokumentieren, Farbentscheidungen zu erklären und CSS-Standardnamen für ihre Hex-Werte zu finden.

Funktionen

• Nächste CSS-Farbnamen: findet die nächstgelegene benannte CSS-Farbe (aus der vollständigen 148-Farben-Liste der benannten CSS-Farben) für jeden Hex- oder RGB-Wert.
• Mehrere Eingabeformate: akzeptiert Hex (#rrggbb), RGB-, HSL- und HSV-Farbwerte.
• Farbwähler: Nutzen Sie den nativen Farbwähler für die visuelle Auswahl.
• Nahegelegene Farben: zeigt ähnliche benannte Farben, um Alternativen zu finden.
• Farb-Metadaten: zeigt Farbton, Sättigung, Helligkeit und wahrgenommene Helligkeit der Farbe.

Häufige Fragen

Wie findet das Tool den nächsten Farbnamen?

Das Tool berechnet den wahrnehmungsbasierten Abstand zwischen Ihrer Farbe und allen benannten CSS-Farben mithilfe der Farbabstandsformel CIEDE2000, die der menschlichen Wahrnehmung von Farbunterschieden gut entspricht. Die nächste Übereinstimmung wird als Name zurückgegeben.

Sind das dieselben wie die CSS-Farb-Schlüsselwörter?

Ja. Das Tool umfasst alle 148 standardisierten benannten CSS-Farben (aus der Spezifikation CSS Color Module Level 4) wie „rebeccapurple", „dodgerblue" und „tomato". Sie können sie in CSS direkt anstelle von Hex-Werten verwenden.

Was ist, wenn meine Farbe keinen exakten Namen hat?

Die meisten Farben haben keinen exakten CSS-Namen. Das Tool gibt die wahrnehmungsmäßig nächste benannte Farbe zurück und zeigt den Farbabstand (Delta E), damit Sie wissen, wie nah die Übereinstimmung ist.

Von X11 zu CSS Color Module Level 4: Der lange Weg zu «rebeccapurple»

Die heute am häufigsten verwendeten benannten CSS-Farben sind von der X Window System Farbliste (rgb.txt) geerbt, die am MIT für die grafische Umgebung X11 im Jahr 1986 zusammengestellt wurde. Die Liste wuchs im folgenden Jahrzehnt organisch und war vollgepackt mit skurrilen und obskuren Namen wie «papayawhip», «peachpuff» und «papayawhip». Als Mosaic (1993) und dann Netscape Navigator (1994) Farbe in HTML standardisierten, behielten sie eine Teilmenge der X11-Namen. CSS1 (Dezember 1996) formalisierte nur 16 benannte Farben, die der ursprünglichen VGA-Palette entsprechen: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) fügte «orange» als 17. hinzu. CSS2.1 (Juni 2011) behielt die 17. CSS3 Color Module (Juni 2014, finalisiert 2018) fügte den Rest der X11-Namen hinzu und brachte die Gesamtzahl auf 147. Im Juni 2014 wurde die Farbe «rebeccapurple» (#663399) hinzugefügt, um Eric Meyers Tochter Rebecca zu ehren, die an Hirnkrebs gestorben war; sie hatte gesagt, Lila sei ihre Lieblingsfarbe. Sie wurde dem CSS Color Module Level 4 hinzugefügt und brachte die Gesamtzahl auf 148. Der Hex-Wert #663399 ist die einzige benannte CSS-Farbe, die im Gedenken an eine bestimmte Person hinzugefügt wurde.

CSS-Farbe jenseits benannter Farben: oklch, lab, color()

Benannte Farben decken immer noch nur eine Ecke dessen ab, was moderne Bildschirme darstellen können. CSS Color Module Level 4 (Candidate Recommendation, aktueller Entwurf) führt eine viel breitere Palette von Farbsyntaxen ein. lab() und lch() ermöglichen es Ihnen, Farben in CIE Lab und LCh anzugeben, die perzeptuell einheitliche Farbräume sind. oklab() und oklch() (Björn Ottosson, 2020) sind verbesserte Versionen, die helle gesättigte Farben besser handhaben; oklch(70% 0.15 240) ist ein leuchtendes Himmelblau. color(display-p3 1 0.5 0) gibt Zugriff auf den breiteren P3-Farbumfang, den moderne iPhones, iPads und Macs anzeigen können, etwa 25% gesättigter als das sRGB, auf das benannte Farben beschränkt sind. Relative Farbsyntax (oklch(from blue calc(l - 10%) c h)) ermöglicht es Ihnen, eine Farbe von einer anderen abzuleiten. Die Browser-Unterstützung für alle vier Farbfunktionen erreichte 2024 >90%. Für Designs der 2025er-Ära verwenden Sie benannte Farben für Prototyping und portieren dann zu oklch() für Produktionspaletten, die über das gesamte Farbumfang-Spektrum funktionieren.

Wie «nächstgelegene Farbe» tatsächlich berechnet wird

Die «Entfernung» zwischen zwei Farben ist kein einzelnes Konzept. Verschiedene Formeln geben unterschiedliche Antworten und passen jeweils zu verschiedenen Anwendungsfällen.

• Euklidische Distanz in sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Schnell, aber entspricht nicht der menschlichen Wahrnehmung, zwei Farben, die identisch aussehen, können in RGB weit auseinander liegen und zwei Farben, die sehr unterschiedlich aussehen, können nah beieinander sein. Vermeiden Sie es für «nächstgelegener Name»-Abfragen.
• Delta E CIE76. Gleiche euklidische Formel, aber im CIE-Lab-Raum, der ungefähr perzeptuell einheitlich ist. Ungefähr, nicht genau. Gute erste Näherung; ΔE ≤ 2,3 gilt unter kontrollierten Bedingungen als «kaum wahrnehmbar».
• Delta E CIEDE2000. Der aktuelle Industriestandard, 2001 von der CIE veröffentlicht. Fügt Korrekturen für Helligkeit, Chroma und Farbtonrotation hinzu, die besser zu der Art und Weise passen, wie Menschen tatsächlich Farbunterschiede wahrnehmen. ΔE2000 ≤ 1 ist für die meisten Beobachter nicht wahrnehmbar; ≤ 5 sieht wie eine ähnliche Farbe aus. Dieses Werkzeug verwendet CIEDE2000 für die «nächstgelegene Übereinstimmung».
• Euklidische Distanz in OKLab. Björn Ottossons Farbraum von 2020 ist so konzipiert, dass die einfache euklidische Distanz ΔE2000 nahekommt. Schneller als ΔE2000 und die perzeptuelle Qualität ist ähnlich. Zunehmend der Standard in Design-Tools.

Wo das Benennen von Farben tatsächlich hilft

• Designsystem-Dokumentation. «Primäre Aktion: Royal Blue (#4169e1)» liest sich besser als nur ein Hex-Wert in Design-Spezifikationen und Markenrichtlinien.
• Kundenkommunikation. «Verwenden wir coral und steel blue» funktioniert in einem Meeting; «#ff7f50 und #4682b4» nicht. Die Namen verankern das Gespräch, bevor Sie sich auf exakte Werte festlegen.
• Barrierefreiheits-Audits. Beim Dokumentieren, welche Farben den WCAG-Kontrast gegen einen Hintergrund nicht bestehen, machen menschliche Namen die Audit-Berichte für Nicht-Entwickler nutzbar.
• Legacy-Code-Übersetzung. Alte CSS-Dateien verwenden oft benannte Farben. Beim Migrieren zu Design-Tokens oder einer benutzerdefinierten Palette müssen Sie wissen, welchen genauen Farben «lightseagreen» und «mediumaquamarine» entsprechen.
• Schnelle Prototypen. background: tomato zu tippen ist schneller als einen Hex von einem Farbrad auszuwählen. Benannte Farben sind überraschend gute Standardwerte zum Skizzieren von Layouts, bevor die endgültigen Farben gewählt sind.
• Benennen von Markenfarben. Wenn Ihr Markenrot nahe an crimson (#dc143c) liegt, ist es intern «Brand Crimson» zu nennen einprägsamer als «Red 8».
• Musterabgleich. Designer fügen eine Farbe ein, die aus einem Foto oder Screenshot entnommen wurde, und fragen «in der Nähe welcher Farbe ist das?», um eine Palette ausgehend von einer Referenz aus der realen Welt zu beginnen.

Fehler und Überraschungen mit benannten CSS-Farben

• gray vs grey. CSS akzeptiert beide Schreibweisen, aber die X11-Liste hatte ursprünglich nur «gray». «grey» wurde später hinzugefügt. lightgray und lightgrey sind Aliase, gleiche Farbe. Bleiben Sie in einer Codebasis bei einer Schreibweise.
• «dark»-Varianten sind nicht immer dunkler als die Basis. darkgray (#a9a9a9) ist tatsächlich heller als gray (#808080), eine berühmte historische Eigenart der X11-Liste, die CSS geerbt hat. Dieselbe Falle bei darkgrey.
• aqua und cyan sind dieselbe Farbe. Beide sind #00ffff. CSS schließt beide als Legacy-Aliase ein. fuchsia und magenta sind auch identisch (#ff00ff).
• «orange» ist eine benannte CSS-Farbe, aber «pink»-Varianten sind unterschiedlich. orange = #ffa500. Aber es gibt nicht ein einziges «pink», CSS hat pink, lightpink, hotpink, deeppink, palevioletred, alle merklich unterschiedlich.
• «Nächstgelegene Farbe» hängt davon ab, was Ihr Gehirn unter Farbe versteht. Zwei Personen, die denselben Farbchip betrachten, können unterschiedliche Namen wählen. CIEDE2000 erfasst die durchschnittliche Wahrnehmung, nicht Ihre. Überprüfen Sie immer die Muster visuell, anstatt nur der Distanzzahl zu vertrauen.
• Benannte Farben sind alle sRGB. Die benannten CSS-Farben sind als 8-Bit-sRGB-Tripel definiert. Auf einem P3- oder BT.2020-Display können lebendige Farben wie tomato und fuchsia matter aussehen als der gleiche Farbton, der in color(display-p3 ...) angegeben ist. Für Prototypen in Ordnung; für die Produktion auf moderner Hardware portieren Sie zur Wide-Gamut-Syntax.
• Benannte Farben allein bestehen keine Barrierefreiheitsprüfungen. yellow auf white ist unlesbar; red auf black ist grenzwertig. Der benannte Status einer Farbe sagt nichts über Kontrast aus. Verbinden Sie immer eine Farbwahl mit einer WCAG-Kontrastprüfung.

Weitere häufig gestellte Fragen

Wer hat eigentlich die Namen wie «papayawhip» und «peachpuff» ausgewählt?

Keine einzelne Person; die X11-Datei rgb.txt wuchs durch mehrere Mitwirkende am MIT und bei anderen Unix-Anbietern in den späten 1980er Jahren. Viele Namen stammten aus Farbenkatalogen von Sinclair Paints und anderen aus dieser Zeit. Die Namensgebung ist absichtlich informell und inkonsistent, Mitwirkende benannten Farben nach Objekten, die sie auf ihrem Schreibtisch oder vor ihrem Fenster hatten. Es gab kein zentrales Komitee. Als CSS3 2014 die X11-Liste vollständig übernahm, kamen alle Eigenheiten mit.

Sollte ich rebeccapurple in der Produktion verwenden?

Die Browser-Unterstützung ist seit 2014 universell, also funktioniert es überall. Es ist genau äquivalent zu #663399. Verwenden Sie den Namen, der sich in Ihrem Code besser liest; «rebeccapurple» ist ein kleiner, aber sichtbarer Tribut auf jeder Seite, die ihn verwendet.

Was ist der Unterschied zwischen CIEDE2000 und den einfacheren ΔE-Formeln?

ΔE76 (euklidische Distanz in CIE Lab) ist schnell und gibt vernünftige Antworten, unterschätzt aber Unterschiede bei gesättigten Farben und überschätzt bei dunklen Farben. CIEDE2000 fügt fünf Korrekturterme hinzu (für Helligkeit, Chroma, Farbtonrotation und zwei Kreuzterme), die zu empirischen Daten darüber passen, wie Menschen tatsächlich Farbunterschiede wahrnehmen. Die Korrektur ist signifikant; dasselbe Farbenpaar kann ΔE76 = 4 und ΔE2000 = 2 ergeben (sehr unterschiedliches perzeptuelles Urteil). Für «ist diese Farbe nah genug an jener», verwenden Sie ΔE2000. Für Batch-Verarbeitung, bei der Geschwindigkeit wichtig ist, ist die euklidische OKLab-Distanz eine schnelle Annäherung.

Kann ich eigene benutzerdefinierte Farbnamen hinzufügen?

Nicht als CSS-Schlüsselwörter, die benannte Farbliste ist durch die Spec festgelegt. Aber CSS Custom Properties (Variablen) geben Ihnen dieselbe Ergonomie: :root { --brand-coral: #ff7f50; } dann color: var(--brand-coral). Design-Tokens sind im Wesentlichen diese Idee formalisiert, und moderne Design-Systeme verwenden sie universell.

Werden meine Farbdaten irgendwohin gesendet?

Nein. Alle Farbkonvertierungen und Distanzberechnungen laufen in Ihrem Browser. Öffnen Sie den Netzwerk-Tab in DevTools und wählen Sie eine Farbe, Sie sehen null ausgehende Anfragen. Sicher für unveröffentlichte Markenfarben oder jegliche interne Palettenarbeit.