Farbnamen-Finder

• Sofortiger Abgleich der nächstgelegenen Farbe: Der Farbnamen-Finder berechnet sofort die euklidische Distanz zwischen deiner Eingabefarbe und jeder Farbe der Datenbank und liefert die 6 nächstgelegenen Treffer, geordnet nach wahrgenommener Ähnlichkeit. Kein Knopf zu drücken.
• Über 300 CSS-, X11- und Pantone-Namen: Die Datenbank umfasst alle 148 CSS-Namensfarben, über 50 X11-Farbnamen und über 100 Pantone-Näherungen – die drei meistverwendeten Farbbenennungssysteme in Web, Druck und Design.
• Nach Namen suchen oder durchsuchen: Wechsle zum Such-Tab, um Farben nach Namen zu finden – tippe „coral“, „navy“ oder „pantone 186“, um die gesamte Datenbank zu durchsuchen. Klicke auf ein beliebiges Ergebnis, um sofort seine nächsten Treffer zu sehen und seine Werte zu kopieren.
• 100 % privat – kein Upload: Alle Farbabfragen finden lokal in deinem Browser statt. Es werden niemals Farbdaten an einen Server gesendet, gespeichert oder protokolliert. Der Farbnamen-Finder funktioniert vollständig offline, sobald die Seite geladen ist.

• CSS-Entwicklung: Finde die CSS-Namensfarbe, die deinem Design-Token am nächsten kommt, damit du einen semantischen Namen statt eines rohen HEX-Codes verwenden kannst. Der Farbnamen-Finder sagt dir sofort, ob deine Farbe eine exakte CSS-Entsprechung hat.
• Design-Dokumentation: Wenn du eine Farbpalette dokumentierst, gib jeder Farbe mit dem Farbnamen-Finder einen für Menschen lesbaren Namen. Benannte Farben lassen sich Stakeholdern leichter kommunizieren als rohe HEX-Codes.
• Druck- und Markenabgleich: Finde die nächstgelegene Pantone-Näherung für jede Bildschirmfarbe. Die Pantone-Datenbank des Farbnamen-Finders hilft dir, die nächstgelegene Standard-Druckfarbe für die Druckproduktion zu identifizieren.
• Barrierefreiheit und Farbkommunikation: Verwende beim Verfassen von Barrierefreiheitsberichten oder Design-Spezifikationen benannte Farben, um UI-Elemente klar zu beschreiben. Der Farbnamen-Finder liefert dir den Standardnamen für jeden Farbwert.
• Digitale Kunst und Illustration: Identifiziere den Standardnamen von Farben, die du aus Referenzbildern oder Paletten aufnimmst. Der Farbnamen-Finder deckt X11-Kunstfarben wie Cerulean, Vermilion und Ochre ab, die Designer täglich verwenden.
• Farbsehschwäche- und Barrierefreiheitstests: Verwende benannte Farben, um Farbentscheidungen an Nutzer mit Farbsehschwäche zu kommunizieren. Namen wie „DodgerBlue“ und „Crimson“ sind in Barrierefreiheitskontexten aussagekräftiger als HEX-Codes.

Ein Farbnamen-Finder nimmt einen beliebigen Farbwert – HEX, RGB oder eine Suchanfrage – und gibt den nächstgelegenen benannten Farbnamen aus einer kuratierten Datenbank zurück. Farbnamen stammen aus drei großen Systemen: CSS-Namensfarben (die 148 in der CSS-Spezifikation definierten Farben wie „CornflowerBlue“ und „Tomato“), X11-Farbnamen (der erweiterte Satz, der in Unix-/Linux-Systemen und Design-Tools verwendet wird, darunter Farben wie „Cerulean“ und „Vermilion“) und Pantone-Farbnäherungen (das branchenübliche Druckfarbsystem für Druck und Markendesign).

Die Suche erfolgt in drei Schritten, vollständig in deinem Browser:

1. Eingabe analysieren: Gib einen HEX-Code ein (z. B. #3b82f6), nutze den nativen Farbwähler, gib RGB-Werte ein oder suche nach Namen. Der Farbnamen-Finder akzeptiert alle gängigen Eingabeformate.
2. Distanzen berechnen: Das Werkzeug berechnet die euklidische Distanz zwischen deiner Eingabefarbe und jeder der über 300 Farbnamen der Datenbank mit der Formel √((R₁−R₂)² + (G₁−G₂)² + (B₁−B₂)²). Eine Distanz von 0 bedeutet eine exakte Übereinstimmung. Deine Farbdaten verlassen deinen Browser nie.
3. Beste Treffer zurückgeben: Die sechs nächstgelegenen benannten Farben werden als Karten mit ihren HEX-, RGB- und HSL-Werten angezeigt – alle mit einem Klick kopierbar. Jede Karte zeigt die Farbquelle (CSS, X11 oder Pantone) und den Distanzwert.

• CSS-Namensfarben: Die 148 Farben, die in der Spezifikation CSS Color Module Level 4 definiert sind. Dies sind die einzigen Farbnamen, die ohne Konvertierung direkt in CSS-Stylesheets funktionieren.
• X11-Farbnamen: Ein erweiterter Satz von etwa 550 Farbnamen, die ursprünglich für das X Window System definiert wurden. Viele Design-Tools und Programmiersprachen enthalten X11-Farben. Der Farbnamen-Finder enthält die nützlichsten X11-Namen, die CSS noch nicht abdeckt.
• Pantone-Näherungen: Ungefähre sRGB-Werte für Farben des Pantone Matching System (PMS). Dies sind nur Bildschirmnäherungen – tatsächliche Pantone-Druckfarben lassen sich nur mit physischen Farbfächern genau abgleichen.

Die auf jeder Ergebnis-Karte angezeigte Δ-Distanz ist die euklidische Distanz im RGB-Farbraum zwischen deiner Eingabefarbe und der benannten Farbe. Eine Distanz von 0 bedeutet eine exakte Übereinstimmung. Distanzen unter 20 sind sehr nah (kaum unterscheidbar). Distanzen über 50 weisen auf einen wahrnehmbaren Farbunterschied hin. Für einen wahrnehmungsgenaueren Abgleich könnte eine zukünftige Version die CIE-ΔE-Distanz statt der euklidischen RGB-Distanz verwenden.