Nächste CSS-Farbe und nächsten Tailwind-Farbton für eine beliebige Farbe finden — perzeptiv abgeglichen mit kopierbereiten Werten.

Ihre Farbe
#3B82F6
Nächste CSS-Farbe
Unterschied:
Exakte Übereinstimmung
Nächster Tailwind-Farbton
Unterschied:
Exakte Übereinstimmung

Beliebige Farbe eingeben oder auswählen und sofort die nächste benannte CSS-Farbe und den nächsten Tailwind-Farbton sehen — perzeptiv im Browser abgeglichen.


Über Named-Color-Finder

Der Named Color Finder beantwortet eine einfache Frage: Wie heißt diese Farbe? Gib eine beliebige Farbe ein oder wähle sie, und er liefert sofort die nächstliegende CSS-Farbnamen zurück: aus der Standardliste, die Browser verstehen, wie „steelblue“ oder „coral“, zusammen mit der nächstliegenden Tailwind-Palettenstufe, etwa „sky-600“.

Der Abgleich erfolgt perzeptuell statt rein numerisch, sodass die vorgeschlagenen Namen tatsächlich wie deine Eingabefarbe aussehen, statt nur in reinen RGB-Werten nahe zu liegen. Ein Differenzindikator sagt dir, ob der Treffer exakt, sehr nah oder nur annähernd ist, damit du weißt, wie viel Genauigkeit du gegen einen einprägsamen Namen eintauschst.

Die Suche läuft vollständig in deinem Browser, mit Kopierbuttons bei jedem Ergebnis. Sie ist praktisch, um lesbareres CSS zu schreiben, beliebige Markenfarben an eine Tailwind-Skala anzugleichen oder einfach zu erfahren, wie eine aus einem Foto gewählte Farbe heißen würde.

So verwenden Sie Named-Color-Finder

  1. Gib einen Farbwert ein oder wähle einen mit dem Farbwähler; klicke auf „Zufällig“ zum Erkunden.
  2. Lies den nächstliegenden CSS-Farbnamen und die nächstliegende Tailwind-Stufe, nebeneinander mit deiner Eingabe angezeigt.
  3. Prüfe den Differenzindikator, um zu sehen, wie nah jeder Treffer ist.
  4. Klicke auf „Kopieren“ bei dem Wert, den du verwenden möchtest.

Häufig gestellte Fragen

Ja. Der Abgleich wird lokal in deinem Browser gegen mitgelieferte Farblisten berechnet, sodass Abfragen kostenlos, sofort und unbegrenzt sind.

CSS definiert etwa 148 benannte Farben (147 eindeutige Werte, da einige Aliase wie gray/grey sind), von einfachen wie „red“ bis zu ungewöhnlichen Einträgen wie „papayawhip“. Jeder Browser versteht sie, und dieses Tool findet die, die einer beliebigen eingegebenen Farbe am nächsten liegt.

Das Tool nutzt eine perzeptuelle Farbdistanzmetrik statt eines einfachen RGB-Vergleichs, sodass der vorgeschlagene Name widerspiegelt, wie ähnlich die Farben dem menschlichen Auge tatsächlich erscheinen: besonders wichtig bei gedeckten Tönen und Beinahe-Grautönen.

Die nächstliegende Stufe aus Tailwinds Standardfarbpalette, benannt im vertrauten Format Farbton-plus-Nummer wie „emerald-500“. Das ist nützlich, um beliebige Designfarben an Tailwinds Skala anzupassen, damit deine Utility-Klassen konsistent bleiben.

Deine Eingabefarbe ist identisch mit der benannten Farbe: Du kannst den Namen ohne jede visuelle Veränderung durch den HEX-Wert ersetzen. Geringere Stufen („Sehr nah“, „Nah“, „Annähernd“) zeigen einen wachsenden, wenn auch oft kaum wahrnehmbaren Unterschied.


Beliebte Suchen
Farbnamen-Finder nächster CSS-Farbname Farbnamen finden nächste Tailwind-Farbe hex zu Farbname Farbnamen identifizieren
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.