Farbname-Finder
Ein Farbfinder nimmt einen Hex-Code und liefert das nächstgelegene CSS-Farbschlüsselwort. Dieser hier vergleicht Ihren Wert mit den 141 benannten Farben seiner Liste und bewertet den Abstand: #3B82F6 kommt als RoyalBlue (#4169E1) mit der Note Nah zurück, #1DA1F2 als DodgerBlue (#1E90FF), Sehr nah, und #FF7F50 trifft Coral exakt.
Ihre Farbe
Nächste Übereinstimmung
Beliebte Werkzeuge
Über Farbname-Finder
Der Farbname-Finder beantwortet eine Frage: Wie heißt diese Farbe? Tippen oder fügen Sie einen Hex-Wert in Farbe eingeben ein oder öffnen Sie den Farbwähler daneben, und das Werkzeug vergleicht Ihre Farbe mit den 141 CSS-Farbschlüsselwörtern, die es mitbringt. Die Karte Nächste Übereinstimmung nennt den Sieger, und die Schaltflächen HEX, RGB und HSL darunter kopieren diesen Treffer — RoyalBlue als #4169E1, rgb(65, 105, 225), hsl(225, 73%, 57%) — nicht den Wert, den Sie eingegeben haben.
Der Vergleich ist ein geradliniger Abstand im RGB-Raum: Rot-, Grün- und Blaukanal der beiden Farben werden subtrahiert, quadriert, addiert und radiziert. Übereinstimmungsqualität übersetzt diese Zahl in ein Wort — Exakte Übereinstimmung! bei null, Sehr nah unter 30, Nah unter 80, darüber Ungefähr. #3B82F6 und RoyalBlue liegen 33 Einheiten auseinander, daher Nah. Die Messung ist rechnerisch, nicht wahrnehmungsbezogen: keine Lab-Umrechnung, keine Delta-E-Formel.
Der Reiter Alle durchsuchen zeigt alle 141 Farbfelder auf einmal, mit einem Suchfeld, das auf den Namen und auf den Hex-Text filtert, und zehn Kategorien: Alle, Rot, Orange, Gelb, Grün, Blau, Lila, Rosa, Grau und Weiß. Ein Klick auf ein Feld übernimmt es als exakten Treffer in den Finder. Die Beschriftung jedes Feldes wechselt zwischen Schwarz und Weiß nach der relativen Leuchtdichte, die die WCAG für Kontrast definieren.
Grenzen: Die Liste enthält nur CSS-Schlüsselwörter — kein Pantone, kein RAL, keine Lackfächer, keine Pipette auf einem hochgeladenen Foto, keine erfundenen Namen. Teilen sich zwei Schlüsselwörter einen Hex-Wert, gewinnt das erste in der Liste: #00FFFF liefert immer Aqua und nie Cyan, #FF00FF liefert Fuchsia statt Magenta. Der Abgleich läuft in der Seite; nichts wird hochgeladen.
Anwendungsfälle
Anleitung
Bleiben Sie im Reiter Farbfinder und ziehen Sie entweder den Farbwähler links oder tippen Sie einen Hex-Wert wie #3B82F6 in das Feld Farbe eingeben.
Lesen Sie die beiden Karten: Ihre Farbe wiederholt die Eingabe, Nächste Übereinstimmung nennt das nächstgelegene CSS-Schlüsselwort.
Prüfen Sie darunter die Zeile Übereinstimmungsqualität — Exakte Übereinstimmung!, Sehr nah, Nah oder Ungefähr —, um den Abstand einzuordnen.
Drücken Sie HEX, RGB oder HSL, um die gefundene Farbe in dieser Notation zu kopieren.
Für den umgekehrten Weg wechseln Sie zu Alle durchsuchen, engen das Raster mit Suche oder Kategorie ein und klicken ein Farbfeld an, um es in den Finder zu laden.
Profi-Tipps
- HEX, RGB und HSL kopieren die Werte des gefundenen Schlüsselworts, nicht Ihre Eingabe — Ihren eigenen Hex-Wert holen Sie aus dem Feld Farbe eingeben.
- Das Feld akzeptiert die dreistellige Kurzform: #f00 wird zu #FF0000 erweitert und als Red, Exakte Übereinstimmung!, gemeldet.
- Die Suche unter Alle durchsuchen filtert auch den Hex-Text: 8b eingeben reduziert das Raster auf Schlüsselwörter wie DarkMagenta oder DarkRed, deren Code diese Zeichen enthält.
- Ein Klick auf ein Farbfeld unter Alle durchsuchen springt zurück in den Finder mit Übereinstimmungsqualität auf Exakte Übereinstimmung! — der schnellste Weg zu RGB und HSL eines Schlüsselworts.
- Aqua und Cyan teilen sich #00FFFF, Fuchsia und Magenta #FF00FF; der Finder behält das erste Schlüsselwort mit dem kürzesten Abstand, deshalb erscheinen diese Codes stets als Aqua und Fuchsia.
Fehlerbehebung
Die Ergebniskarten verschwinden, wenn ich rgb(59, 130, 246) oder einen Farbnamen einfüge.
Farbe eingeben liest ausschließlich Hex. Alles andere scheitert an der Auswertung, es lässt sich kein Abstand berechnen und das Ergebnisfeld blendet sich aus. Rechnen Sie zuerst in Hex um oder nutzen Sie das Suchfeld unter Alle durchsuchen, wenn Sie ein Schlüsselwort statt einer Zahl haben.
Die Schaltfläche HEX hat einen Code kopiert, den ich nie eingegeben habe.
Die drei Kopierschaltflächen gehören zur Karte Nächste Übereinstimmung und kopieren daher das gefundene Schlüsselwort: Geben Sie #3B82F6 ein, liefert HEX #4169E1, den Wert von RoyalBlue. Ihre eigene Farbe markieren Sie im Feld Farbe eingeben.
Die Meldung Kopiert erscheint, aber die Zwischenablage bleibt leer.
Die Bestätigung wird schon beim Auslösen angezeigt, während die Zwischenablage-API des Browsers noch ablehnen kann — sie verlangt eine sichere Seite und einen echten Klick, und Erweiterungen blockieren sie. Markieren Sie den Wert in der Karte und drücken Sie Strg+C, auf dem Mac Cmd+C.
Alle durchsuchen zeigt ein leeres Raster.
Suchfeld und Kategorie-Chips wirken zusammen, deshalb bleibt bei Rosa plus der Suche „blau“ nichts übrig. Leeren Sie das Suchfeld und stellen Sie die Kategorie auf Alle; der Zähler unter dem Raster sollte 141 Farben angezeigt melden.
Jede Farbe endet bei Ungefähr.
Diese Note bedeutet, dass das nächste Schlüsselwort mehr als 80 Einheiten entfernt liegt. Bei nur 141 Schlüsselwörtern haben ganze Bereiche — matte Brauntöne, entsättigte Türkistöne, die meisten Pastelltöne — keinen nahen Nachbarn. Nehmen Sie den Namen als grobes Etikett und behalten Sie den Hex-Wert.
Häufig gestellte Fragen
Fügen Sie den Hex-Wert in Farbe eingeben ein und lesen Sie die Karte Nächste Übereinstimmung. Gehört Ihr Wert zu den 141 CSS-Schlüsselwörtern, nennt die Karte ihn und Übereinstimmungsqualität meldet Exakte Übereinstimmung! — #FF7F50 ergibt Coral. Andernfalls erhalten Sie das nächste Schlüsselwort mit Sehr nah, Nah oder Ungefähr, und HEX, RGB und HSL kopieren dessen Werte.
Eine einzige offizielle Zahl lässt sich nicht zitieren: Die named-color-Referenz von MDN beschreibt die 16 Schlüsselwörter aus CSS Level 1 plus orange und nennt dann rund 150 weitere Farben mit Schlüsselwort, wobei Paare wie aqua und cyan Aliase sind, die manche Listen doppelt zählen. Exakt ist hier nur die Liste des Werkzeugs: 141 Schlüsselwörter, alle unter Alle durchsuchen sichtbar.
Dann erhalten Sie das nächstgelegene Schlüsselwort und eine Bewertung. #3B82F6 ist kein CSS-Schlüsselwort, also liefert der Finder RoyalBlue (#4169E1) mit der Note Nah; beide liegen 33 Einheiten auseinander. Nutzen Sie den Namen, wo eine Näherung genügt — Kommentar, Ticket, Moodboard — und behalten Sie Ihren Hex-Wert im Stylesheet.
Hier nicht. Es gibt weder Bild-Upload noch Pipette: Die einzigen Eingaben sind das Hex-Feld und der Farbwähler daneben. Um eine Farbe in einem Foto zu benennen, greifen Sie das Pixel mit dem Farbwähler Ihres Betriebssystems oder einer Browser-Erweiterung ab und fügen den gemeldeten Hex-Wert hier ein.
Nein. Pantone, RAL und Lackfächer sind geschützte Kataloge und in diesem Werkzeug nicht enthalten. Zurückgegeben wird ausschließlich ein CSS-Farbschlüsselwort — einer der 141 Namen unter Alle durchsuchen —, also das, was ein Browser in einem Stylesheet versteht.
Nicht direkt. Das Textfeld liest nur Hex, deshalb verschwindet das Ergebnisfeld, wenn Sie rgb(59, 130, 246) einfügen: Die Auswertung schlägt fehl. Rechnen Sie das Tripel zuerst um — 59, 130, 246 ist #3B82F6 — und fügen Sie das ein. Nach dem Treffer gibt Ihnen die Schaltfläche RGB das Schlüsselwort in rgb()-Notation zurück.
Ja, im Reiter Alle durchsuchen. Das Suchfeld filtert die 141 Farbfelder beim Tippen und vergleicht Schlüsselwort und Hex-Text, sodass grün oder green das Raster einengt. Ein Klick auf ein Feld öffnet den Finder erneut mit dieser Farbe und Exakte Übereinstimmung!
Es sind Aliase: aqua und cyan sind beide #00FFFF, fuchsia und magenta beide #FF00FF. Die named-color-Seite von MDN führt beide Paare als Schlüsselwörter füreinander. Da der Finder das erste Schlüsselwort mit dem kürzesten Abstand behält, kommt #00FFFF stets als Aqua und #FF00FF als Fuchsia zurück; der andere Name ist in CSS ebenso gültig.
Er misst einen geradlinigen Abstand zwischen den Rot-, Grün- und Blaukanälen beider Farben: jede Differenz wird quadriert, die drei werden addiert, dann wird die Wurzel gezogen. Der kleinste Abstand gewinnt. Null bedeutet identische Codes, unter 30 heißt Sehr nah, unter 80 Nah, darüber Ungefähr. Die Messung ist rechnerisch, nicht wahrnehmungsbezogen.
Die ersten 16 Schlüsselwörter stammen aus CSS Level 1, orange kam mit CSS Level 2; der lange Rest — DarkSlateGray, PapayaWhip, LemonChiffon und die übrigen — gelangte über die X11-Farbliste und SVG in CSS, wie die named-color-Referenz von MDN darlegt. Daher ist der Satz ungleichmäßig: mehrere fast gleiche Grau- und Grüntöne stehen neben Bereichen ganz ohne nahes Schlüsselwort.