Color Name Finder
Finde für jeden Farbwert den nächstgelegenen benannten CSS-Farbton. Füge bis zu 100 Farben in einem beliebigen CSS-Format ein. Für jede Farbe erhältst du die ähnlichsten benannten Farben aus den 148 CSS, sortiert nach dem CIEDE2000-Farbunterschied, einschließlich Name, Hex-Code, Delta-E-Wert und Übereinstimmungsbewertung. Zeige bis zu 10 Treffer pro Farbe an. Praktisch, um Design-Tokens zu benennen, Farben in der Dokumentation zu beschreiben und schnell ein passendes Stichwort zu finden.
Häufig gestellte Fragen
Welche Farbnamen werden durchsucht?
Die 148 benannten Farben von CSS Color 4 reichen von aliceblue bis yellowgreen und umfassen auch rebeccapurple. Namen mit demselben Wert, etwa aqua und cyan, fuchsia und magenta sowie die Schreibweisen gray und grey, stehen gemeinsam in einer Zeile. So ergeben sich 139 verschiedene Farben. transparent und Systemfarben sind nicht enthalten.
Wie wird der nächstliegende Name ermittelt?
Mit dem CIEDE2000-Farbunterschied, Delta E 2000, berechnet in CIELAB mit der Bibliothek culori. Er gilt als Industriestandard dafür, wie unterschiedlich zwei Farben auf eine durchschnittliche Person wirken. Ein kleinerer Wert bedeutet eine größere Ähnlichkeit.
Was bedeuten die Übereinstimmungsbewertungen?
„Exakt“ bedeutet, dass die benannte Farbe denselben Hex-Code hat. „Sehr ähnlich“ bedeutet einen Delta-E-Wert unter 2; der Unterschied ist kaum zu erkennen. „Ähnlich“ bedeutet einen Wert unter 5; der Unterschied ist beim direkten Vergleich sichtbar. „Weit entfernt“ bedeutet 5 oder mehr; der Name beschreibt dann nur die allgemeine Farbfamilie.
Wie viele Treffer erhalte ich?
Pro Farbe erhältst du 1 bis 10 Treffer, standardmäßig 3, sortiert von der größten bis zur geringsten Ähnlichkeit. Mehr Treffer helfen, wenn der nächstliegende Name zwar die richtige Helligkeit, aber den falschen Farbton hat oder umgekehrt.
Wie gebe ich Farben ein?
Gib eine Farbe pro Zeile ein oder mehrere Farben in einer Zeile, getrennt durch Kommas oder Semikolons. Kommas innerhalb von rgb() oder hsl() dienen nicht als Trennzeichen. Akzeptiert werden Hex-Codes mit oder ohne #, CSS Farbnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() und cmyk(), bis zu 100 Farben pro Durchlauf.
Was passiert mit transparenten Farben?
Benannte Farben sind deckend. Daher wird der Alphakanal ignoriert und die Farbe so verglichen, als wäre sie vollständig deckend. Die HEX-Spalte zeigt den verglichenen 6-stelligen Code.
Was geschieht mit Farben außerhalb des sRGB-Farbraums?
Farben außerhalb von sRGB, etwa kräftige Display-P3- oder OKLCH-Werte, werden zuerst mit dem CSS-Color-4-Algorithmus in sRGB umgerechnet, da alle CSS benannten Farben sRGB-Farben sind. Die HEX-Spalte zeigt anschließend den umgerechneten Wert, mit dem die Namen verglichen werden.
Kann ich statt meines Hex-Codes den Namen verwenden?
Nur wenn die Übereinstimmung exakt ist. Andernfalls sieht die benannte Farbe anders aus. Ein ähnlicher Name ist dennoch ein hilfreicher, menschenlesbarer Hinweis in einem Design-Token oder in der Dokumentation, zum Beispiel ein Blau, das steelblue ähnelt.
Warum nur CSS Namen und keine größere Liste?
CSS Namen versteht jeder Browser, und du kannst sie direkt in ein Stylesheet eingeben. Größere Namenslisten unterscheiden sich je nach Anbieter und sind oft lizenziert. Diese 148 Namen sind dagegen im CSS-Standard definiert.
Warum kann ein Treffer mit höherem Delta E für mich ähnlicher aussehen?
Delta E 2000 bildet eine durchschnittliche Person unter standardisierten Betrachtungsbedingungen ab. Dein Display, seine Kalibrierung, die Umgebungsfarben und individuelle Unterschiede beim Farbsehen beeinflussen, welche Farbe am ähnlichsten wirkt. Betrachte die Rangfolge daher als gute Orientierung, nicht als absolute Wahrheit.