Farbnamen-Finder

Was ist der Farbnamen-Finder?

Der Farbnamen-Finder zeigt dir den nächstliegenden Farbnamen, wenn du einen HEX-, RGB- oder HSL-Wert eingibst. Dafür vergleicht das Tool deine Eingabe mit 140 standardisierten CSS-Farben und einer erweiterten Datenbank mit mehr als 1.500 Farbnamen.

Das ist praktisch, wenn du in Design-Tools, Styleguides oder CSS-Dateien nur einen Farbcode vor dir hast, aber eine verständliche Bezeichnung brauchst. Du siehst den deutschen Primärnamen, den englischen kanonischen Namen und fünf ähnliche Alternativen direkt zusammen.

Wann ist das Tool besonders nützlich?

• Design und Branding – Einen HEX-Wert schnell in einen sprechenden Farbnamen für Präsentationen, Briefings oder Design-Systeme übersetzen
• Kommunikation im Team – Farben gegenüber Kundschaft, Kolleginnen und Kollegen oder Entwicklerteams verständlicher benennen
• CSS und Frontend – Prüfen, ob es für eine Farbe einen direkt nutzbaren CSS-Namen gibt oder ob ein ähnlicher benannter Ton besser passt
• Farbpaletten aufbauen – Verwandte Farbtöne vergleichen und harmonische Alternativen rund um eine Ausgangsfarbe finden
• Lernen und Referenz – Englische Standardnamen wie coral, royal blue oder slate gray mit einer deutschen Bezeichnung verknüpfen
• Asset-Dokumentation – Farbwerte aus Screenshots, Brand-Guides oder bestehenden Projekten nachvollziehbar dokumentieren

Wichtige Funktionen

• Mehrere Eingabeformate – Farben lassen sich als HEX, RGB oder HSL eingeben. Alternativ wählst du sie direkt mit dem Farbpicker aus.
• Zwei Datenbanken – Du kannst zwischen den 140 CSS-Standardfarben und einer erweiterten Sammlung mit 1.500+ Farbnamen wechseln.
• Lokalisierte Farbnamen – Wo es sinnvoll ist, zeigt das Tool einen deutschen Primärnamen und ergänzt den englischen kanonischen Namen als zweite Zeile.
• Ähnlichkeitsanzeige – Die beste Übereinstimmung wird als exakter Treffer oder mit einer prozentualen Nähe angezeigt.
• Fünf ähnliche Alternativen – Neben dem Haupttreffer erscheinen fünf verwandte Farben, die du mit einem Klick übernehmen kannst.
• Direktes Kopieren – HEX-, RGB- und HSL-Werte lassen sich per Klick in die Zwischenablage kopieren.
• Suchverlauf – Bis zu 20 zuletzt geprüfte Farben werden lokal im Browser gespeichert, damit du frühere Treffer schnell wiederfindest.

So verwendest du das Tool

1. Farbe eingeben – Wähle eine Farbe mit dem Picker oder gib einen vorhandenen HEX-, RGB- oder HSL-Wert ein.
2. Datenbank wählen – Entscheide, ob du nur CSS-Farben oder die erweiterte Farbnamen-Datenbank durchsuchen möchtest.
3. Treffer prüfen – Lies den besten Farbnamen, die englische Referenzbezeichnung und die zugehörigen Farbwerte ab.
4. Ähnliche Farben vergleichen – Klicke auf eine der vorgeschlagenen Alternativen, um direkt zu diesem Farbton zu wechseln.
5. Werte kopieren – Übernimm HEX, RGB oder HSL per Klick in dein Design-Dokument, CSS oder Briefing.

Leitfaden zur Farbdatenbank

CSS-Farben (140)

Diese Namen stammen aus dem Webstandard und können in CSS direkt als Farbwert verwendet werden, zum Beispiel red, gold oder royalblue. Wenn du eine webtaugliche, standardisierte Benennung suchst, ist diese Datenbank die beste erste Wahl.

Erweiterte Farben (1.500+)

Die erweiterte Sammlung ergänzt die CSS-Namen um gebräuchliche, beschreibende Farbnamen aus Bereichen wie Natur, Lebensmittel, Edelsteine, Metalle, Neon- und Pastelltöne. Sie ist besonders hilfreich, wenn du feinere oder anschaulichere Bezeichnungen suchst.

Berechnung der Ähnlichkeit

Die angezeigte Übereinstimmung basiert auf einer Farbdistanz-Berechnung zwischen deiner Eingabe und den Datenbankfarben. Je kleiner die Distanz, desto höher die angezeigte Ähnlichkeit und desto näher liegt der vorgeschlagene Farbname an deinem ursprünglichen Wert.

Häufige Fragen