Farbnamen-Finder
Füge eine beliebige Farbe ein und finde heraus, wie sie heißt: die nächstgelegenen CSS-Farbnamen, sortiert nach wahrnehmungsgerechtem Abstand, mit Erkennung exakter Treffer und Synonymen. Kostenlos und 100 % im Browser.
| Farbfeld | CSS-Name | Hex | Abstand | Kopieren |
|---|---|---|---|---|
| royalblue | #4169e1 | ΔE 4.1 | ||
| steelblue | #4682b4 | ΔE 11 | ||
| slateblue | #6a5acd | ΔE 12 | ||
| mediumslateblue | #7b68ee | ΔE 14 | ||
| slategrayauch „slategrey“ | #708090 | ΔE 16 | ||
| dodgerblue | #1e90ff | ΔE 17 |
Jede Farbe hat einen nächsten Namen
CSS definiert 148 benannte Farben – von Arbeitspferden wie black und gray bis zu Kuriositäten wie papayawhip, lightgoldenrodyellow und rebeccapurple. Welche Farbe du oben auch einfügst: Dieses Werkzeug misst ihren Abstand zu allen 148 mit CIEDE2000, derselben Formel für den wahrnehmungsgerechten Farbabstand, die auch die Farbindustrie verwendet, und zeigt die sechs nächstgelegenen. Ist der Abstand praktisch null, hast du ein exaktes Schlüsselwort, das du direkt in ein Stylesheet schreiben kannst.
Die Abstandsspalte lesen
| ΔE (CIEDE2000) | Was das bedeutet |
|---|---|
| < 1 | Nicht unterscheidbar – der Name gilt als exakt |
| 1 – 2 | Nur im direkten Vergleich und bei genauem Hinsehen sichtbar |
| 2 – 10 | Gleiche Farbfamilie; der Name beschreibt sie treffend |
| > 10 | Nur ein grobes Etikett – „bläulich“, nicht „genau dieses Blau“ |
Eine kurze Geschichte der seltsamen Namen
Die Liste wurde nie entworfen – sie ist gewachsen. Die meisten Namen stammen aus der Farbdatei des Fenstersystems X11, die ihrerseits ein Vokabular aus der Buntstiftwelt der 1950er übernahm; deshalb kennt das Web peachpuff und navajowhite, aber kein schlichtes „brick“. Manche Paare sind reine Schreibweisen-Geschichte: cyan und aqua, magenta und fuchsia sowie jedes gray/grey-Zwillingspaar sind Byte für Byte identisch. Die einzige bewusste Ergänzung ist rebeccapurple (#663399), 2014 benannt zum Andenken an die Tochter des Web-Pioniers Eric Meyer – ein kleines dauerhaftes Denkmal in jedem Browser.
Wofür Farbnamen wirklich taugen
- Kommunikation: „das ist im Grunde royalblue“ kommt schneller an als „#3564c4“.
- Prototypen und Lehre: lesbare Beispiele ganz ohne Token-System.
- Plausibilitätsprüfung: Wenn deine sechs nächsten Namen alle Grautöne sind, ist dein „Blau“ weiter abgedriftet, als du denkst.
Für Produktivcode nimmst du besser Design-Tokens mit HEX- oder oklch()-Werten – der universelle Farbkonverter zeigt zu jedem Namen sämtliche Schreibweisen. Und falls deine Farbe aus einem Foto stammt, kam sie vermutlich aus dem Bild-Farbwähler auf der Startseite. Alles hier läuft zu 100 % in deinem Browser; hochgeladen wird nichts.
Häufige Fragen
Woher stammen diese Farbnamen?
Es sind die 148 benannten Farben aus der CSS-Spezifikation – direkt in jedem Stylesheet nutzbar, etwa als color: crimson. Die Sammlung stammt von der historischen X11-Farbliste ab, ergänzt um rebeccapurple, das 2014 zum Andenken an Eric Meyers Tochter hinzukam.
Wie wird der „nächste“ Name ermittelt?
Jede benannte Farbe wird mit CIEDE2000 gegen deine Eingabe verglichen – dem Industriestandard für wahrnehmungsgerechte Farbabstände –, und die kleinsten Abstände gewinnen. Ein ΔE unter 2 ist kaum zu unterscheiden; über 10 ist der Name nur noch eine grobe Familienbezeichnung.
Warum steht bei manchen Namen ein zweiter Name in Klammern?
Einige Werte haben zwei offizielle Schreibweisen – cyan/aqua, magenta/fuchsia und die gray/grey-Paare. Beide Namen bezeichnen exakt dieselbe Farbe.
Soll ich Farbnamen in produktivem CSS verwenden?
Für Prototypen, Demos und gut lesbare Beispiele sind sie hervorragend. Produktivcode setzt meist auf Design-Token-Variablen mit HEX- oder oklch()-Werten – aber zu wissen, dass dein Markenblau „im Grunde royalblue“ ist, macht das Reden darüber deutlich einfacher.
Wird meine Farbe für die Namenssuche irgendwohin gesendet?
Nein – die Suche läuft vollständig in deinem Browser gegen eine lokale Tabelle und funktioniert offline, sobald die Seite geladen ist.