So nutzt du: Farbname-Finder
- Gib einen HEX-Code (z. B.
#55AAEE) oder eine beliebige CSS-Farbe ein, oder nutze den Farbwähler. - Lies den nächstliegenden Namen und wie genau die Übereinstimmung ist (ΔE — je kleiner, desto näher).
- Kopiere einen fertigen Variablennamen für CSS, SCSS, JavaScript oder Tailwind.
- Um eine ganze Palette zu benennen, füge mehrere Farben in das Sammelfeld ein und kopiere den erzeugten
:root-Block.
Warum Farben benennen?
Ein HEX-Code wie #55AAEE sagt in einem Code-Review nichts aus, --cerulean dagegen schon. Beschreibende Farbnamen machen Design-Tokens lesbar, helfen Designern und Entwicklern, über dieselbe Farbe zu sprechen, und verhindern, dass Variablen wie --blau-2-neu-final in den Code einziehen.
So funktioniert der Abgleich
Das Tool vergleicht deine Farbe mit rund 5.000 handverlesenen Namen aus dem Open-Source-Projekt color-names (MIT-Lizenz). Abstände werden im wahrnehmungsgleichmäßigen Farbraum OKLab gemessen. Der „nächste“ Name ist also der, der tatsächlich am ähnlichsten aussieht, und nicht nur der mit den nächstliegenden Zahlenwerten. Der Wert ΔEOK zeigt, wie nah er dran ist: unter etwa 2 ist der Unterschied praktisch nicht zu sehen, 2–5 ist nah dran, und über 5 ist der Name nur eine grobe Beschreibung.
Außerdem siehst du die nächstliegende der 148 offiziellen CSS-Farbschlüsselwörter (wie royalblue oder tomato), die du direkt in CSS verwenden kannst.
Namenskonventionen für Tokens
| Kontext | Konvention | Beispiel |
|---|---|---|
| CSS Custom Property | kebab-case | --ocean-blue |
| SCSS-Variable | kebab-case mit Präfix | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Tailwind-Theme-Schlüssel | kebab-case | bg-ocean-blue |
Beschreibende vs. semantische Namen
Beschreibende Namen (ocean blue) eignen sich gut für eine rohe Palette. Komponenten sollten meist auf semantische Tokens verweisen (--color-primary, --color-danger), die auf die beschreibenden zeigen. So kannst du das Branding ändern, ohne alles umzubenennen. Eine vollständige Farbabstufung für jede Basisfarbe erzeugst du mit dem Tailwind Color Generator.
Auch gesucht als: farbname finden, hex farbname, farbe benennen, welche farbe ist das, css variablen namen, design tokens, hex zu farbname, farbnamen generator.
Passende Tools zu: Farbname-Finder
- Farbpalette aus Bild — Finde die Farbpalette jedes Bildes, ob Foto, Logo, Screenshot oder Design.
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
- CSS-Variablen zu Tailwind — Verwandle deine :root-Farbvariablen mit einem Einfügen in ein Tailwind-Theme: als Tailwind-v3-tailwind.config.js oder v4-@theme, wahlweise mit festen Werten oder var()-Referenzen.
- Farbmischer — Wähle zwei Farben und die Anzahl der Schritte, um gleichmäßig gemischte Übergangsfarben zu erhalten — ideal für Verläufe, Rahmen, Diagramme und Hover-Zustände.
Häufige Fragen
Welche Farbe ist #008080?
#008080 ist Teal — es ist außerdem eines der offiziellen CSS-Farbschlüsselwörter. Füge oben einen beliebigen Code ein, um ihn zu bestimmen.Sind das offizielle Farbnamen?
tomato) sind in CSS offiziell. Die übrigen Namen stammen aus einer kuratierten Community-Liste und sind beschreibende Bezeichnungen, keine Standards.Wie genau ist der Abgleich?
Kann ich viele Farben auf einmal benennen?
:root-Block. Doppelte Namen bekommen eine numerische Endung.