# CSS-Farbnamen-Resolver Löst jede Hex-Farbe zur nächstgelegenen benannten CSS-Farbe mit echter CIEDE2000-Distanz auf und zeigt die ganze Farbfamilie. > Kanonische Seite: https://elysiatools.com/de/tools/css-color-name-resolver - **Kategorie:** Design - **Schlagwörter:** css farbname, nächste farbe, delta e, ciede2000, farbfamilie, hex zu name ## Überblick Basiert auf der vollständigen CSS-Color-Module-Level-4-Liste (148 Schlüsselwörter, 139 verschiedene Farben; die Aliase gray/grey, aqua/cyan und fuchsia/magenta sind zusammengeführt). Die Distanz folgt CIEDE2000 (Sharma/Wu/Dalal 2005 inklusive der 180°-Farbwinkel-Spezialfälle) über sRGB → lineares RGB → XYZ(D65) → CIELab; klassische Dienste nutzen die reine RGB-Distanz und sortieren dunkle Blauwerte schlecht — wechseln Sie die Metrik und sehen Sie die Umreihung. Die Familienansicht teilt die 139 Farben per HSL-Schwellen in 12 Designer-Familien. ΔE-Richtwert: <1 unmerkbar, 1–2 kaum wahrnehmbar, 2–10 deutlich, ≥50 Gegensatzfarben. ## Eingaben - **Farbe (Hex oder CSS-Name)** (text): #3366ff or cornflowerblue - **Abstandsmetrik** (select) - **Ergebnismodus** (select) - **Anzahl der Treffer** (number) ## Wann verwenden - Wenn ein Hex-Farbcode in ein semantisches CSS-Farb-Schlüsselwort für Styleguides oder Prototypen umgewandelt werden soll. - Wenn alle verfügbaren CSS-Standardfarben innerhalb einer bestimmten Farbfamilie (z. B. Braun- oder Blautöne) verglichen werden müssen. - Wenn die visuelle Farbdifferenz (ΔE) zwischen einer Markenfarbe und dem nächsten CSS-Standardwert exakt quantifiziert werden soll. ## Funktionsweise - Geben Sie einen Hex-Code (z. B. #3366ff) oder einen gültigen CSS-Farbnamen in das Eingabefeld ein. - Wählen Sie die gewünschte Abstandsmetrik (CIEDE2000, CIE94, CIE76 oder RGB-Abstand) sowie den Anzeigemodus (nächste Farben oder Farbfamilie). - Das Tool wandelt den Farbwert intern über lineares RGB und XYZ(D65) in CIELab um und liefert eine sortierte Rangliste mit genauen ΔE-Werten und Farbchips. ## Anwendungsfälle - Erstellung von Design-Tokens und Fallback-Farbwerten für reine CSS-Komponenten. - Bereinigung von inkonsistenten Hex-Codes in Legacy-Stylesheets durch standardisierte Farb-Schlüsselwörter. - Recherche passender Nuancen innerhalb einer CSS-Farbfamilie für schnelle UI-Mockups. ## Häufig gestellte Fragen ### Welcher CSS-Standard wird für die Farbnamen verwendet? Es wird die vollständige Liste der 148 Schlüsselwörter aus dem CSS Color Module Level 4 verwendet, die 139 eindeutige Farbwerte umfasst (Aliase wie gray/grey sind zusammengeführt). ### Warum ist CIEDE2000 genauer als der klassische RGB-Abstand? CIEDE2000 orientiert sich an der menschlichen Farbwahrnehmung im CIELab-Farbraum, wodurch Verzerrungen bei dunklen Blau- oder Nahezu-Grautönen vermieden werden. ### Wie ist der ΔE-Abstandswert zu interpretieren? Ein ΔE unter 1 ist für das menschliche Auge unmerklich, Werte zwischen 1 und 2 sind kaum wahrnehmbar, 2 bis 10 sind deutlich unterscheidbar und Werte ab 50 stellen Komplementär- bzw. Gegensatzfarben dar. ### Was zeigt der Familienmodus an? Der Familienmodus filtert alle 139 CSS-Farben basierend auf HSL-Grenzwerten in 12 vordefinierte Kategorien wie Blau, Violett oder Erdtöne und ordnet sie nach ΔE zum Ausgangswert. ### Werden Aliase wie cyan und aqua separat gezählt? Nein, identische Farbwerte wie aqua/cyan, fuchsia/magenta und gray/grey werden als zusammengehörige Aliase desselben Farbwerts behandelt. ## Ähnliche Tools - [CMYK-Farbkonverter](https://elysiatools.com/de/tools/cmyk-converter): Konvertiert Farben zwischen HEX, RGB, HSL und CMYK. - [Sepia-Toner](https://elysiatools.com/de/tools/color-sepia-toner): Sepia-Tonungseffekte auf Farben anwenden mit klassischen, warmen, kühlen und benutzerdefinierten Sepia-Stilen - [Farbraumkonverter](https://elysiatools.com/de/tools/color-space-converter): Konvertiert Farben zwischen HEX, RGB, HSL, CIELAB und Display-P3 mit CSS-Ausgabe und Gamut-Pruefung. - [Geteiltes Komplementär-Farbwerkzeug](https://elysiatools.com/de/tools/color-split-complement): Harmonischen Kontrast mit geteilten komplementären Farbschemata unter Verwendung einer Grundfarbe und zwei benachbarten Farben zu ihrem Komplement erstellen - [OKLCH-Farbkonverter](https://elysiatools.com/de/tools/oklch-color-converter): Bidirektionale Umrechnung zwischen HEX, RGB, HSL, OKLCH und Display-P3 nach CSS Color 4, mit Helligkeit-/Chroma-/Farbton-Werten, sRGB- und Display-P3-Gamut-Prüfung und Vorschlag zum Beschneiden außerhalb des Gamuts - [Adobe RGB zu CMYK Konverter](https://elysiatools.com/de/tools/adobe-rgb-to-cmyk-converter): Adobe RGB-Farbwerte in CMYK-Format für den Druck umwandeln mit Alphakanal-Unterstützung - [Adobe RGB zu HEX Konverter](https://elysiatools.com/de/tools/adobe-rgb-to-hex-converter): Adobe RGB-Farbwerte in HEX-Format für Webdesign umwandeln - [Adobe RGB zu HSL Konverter](https://elysiatools.com/de/tools/adobe-rgb-to-hsl-converter): Adobe RGB-Farbwerte in HSL-Format für Design-Arbeiten umwandeln ## Beispiele - [Farbcode-Beispiele](https://elysiatools.com/de/samples/color-code): Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster - [CSS-Selektor-Beispiele](https://elysiatools.com/de/samples/css-selectors): Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests ## Verwandte Inhalte - [Farbraum-Konvertierung fur Web und Druck](https://elysiatools.com/de/hubs/design-convert): Gebundelte Werkzeuge fur Farbraum-Konvertierung zwischen Web und Druck in einem Hub. - [Generatoren fur CSS-Effekte, Paletten und Design-Tokens](https://elysiatools.com/de/hubs/design-generate): Gebundelte Werkzeuge fur CSS-Visualeffekte, Palettenaufbau und Design-Token-Generierung in einem Hub. - [Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung](https://elysiatools.com/de/hubs/web-accessibility-audits): Pruefen Sie WCAG-Probleme, Screenreader-Reihenfolge, Kontrastfehler, Risiken bei Farbsehschwaechen und zugaengliche Farbwahl in einem Hub fuer Web-Accessibility-Workflows. - [Farbdesign- & Farbraum-Konvertierungswerkzeuge](https://elysiatools.com/de/hubs/color-design-tools): Farbkonverter, Palettengeneratoren, Harmonie-Tools, Barrierefreiheitsprüfer und Farbanpassungswerkzeuge an einem Ort für Designer und Entwickler vergleichen.