Hex zu Farbname

Design-Tokens, Markenrichtlinien und Stylesheets speichern Farben oft als Hex-Codes, doch Menschen sprechen weiterhin in Namen wie tomato, cornflowerblue oder rebeccapurple. Dieses Werkzeug nimmt einen einzelnen CSS-Hex-Wert—drei oder sechs hexadezimale Ziffern, mit oder ohne führende Raute—und liefert die nächste solide CSS-benannte Farbe aus der Palette CSS Color Module Level 4 per euklidischer Distanz im Acht-Bit-Rot-Grün-Blau-Raum. Wenn das Hex bereits exakt einer benannten Farbe entspricht, markiert die Antwort exact als true und die Distanz ist null. Liegt es zwischen Stichwörtern, erhalten Sie trotzdem einen stabilen nächsten Namen, das eigene Hex und die Kanäle des Stichworts sowie eine numerische Distanz, damit Design-Reviews und Lint-Regeln entscheiden können, wie nah nah genug ist. Ungültige Hex-Zeichenketten scheitern mit einem klaren Validierungsfehler statt einen Namen zu erfinden.

Wie nächste CSS-benannte Farben gewählt werden

Jede solide CSS-benannte Farbe ist ein festes Tripel aus Rot-, Grün- und Blaukanalwerten von null bis 255, veröffentlicht in der Stichworttabelle des CSS Color Module Level 4. Diese Fähigkeit hält diese volle solide Palette—einschließlich US- und UK-Schreibaliasse wie gray und grey sowie moderne Stichwörter wie rebeccapurple—und schließt transparent aus, weil ein schlichter Hex-Code keinen Alphakanal hat. Ihre Eingabe wird normalisiert: optionale führende Raute, kleingeschriebene Hex-Ziffern und dreistellige Kurzform durch Verdopplung jedes Nibbles expandiert, sodass f zero zero zu f f zero zero zero zero wird.

Der Algorithmus misst dann die euklidische Distanz im RGB-Raum: die Quadratwurzel der Summe der quadrierten Kanaldifferenzen zwischen Ihrer Farbe und jedem benannten Tripel. Der Name mit der kleinsten Distanz gewinnt. Wenn zwei Stichwörter dieselben RGB-Werte teilen—zum Beispiel aqua und cyan oder fuchsia und magenta—oder zwei verschiedene Tripel dieselbe numerische Distanz haben, bleibt der alphabetisch erste Name, damit das Ergebnis zwischen Läufen nicht umspringt.

Distanz null bedeutet exakten Palettentreffer und das Exact-Flag ist true; positive Distanz bedeutet eine Näherung des nächsten Nachbarn, die Sie weiterhin in Texten, Accessibility-Notizen oder weichem Paletten-Lint nutzen können.

Was Sie senden und was Sie zurückbekommen

Senden Sie ein Zeichenkettenfeld namens hex. Akzeptierte Formen sind sechsstellige Codes wie hash f f five seven three three, dreistellige Kurzform wie hash f zero zero und dieselben Zeichenketten ohne führende Raute. Leerzeichen um den Wert werden entfernt.

Klassische Checks umfassen reines Rot als hash f f zero zero zero zero, das zu red mit exact true auflöst; nahe-orange hash f f five seven three three nahe tomato mit positiver Distanz; und nackte sechsstellige Codes ohne Raute, die wie die gerautete Form auflösen.

Wo Hex-zu-Name-Lookup in der Praxis vorkommt

Designsysteme und Markenbücher veröffentlichen Primär- und Akzentfarben oft als Hex, während Produkttexte, Accessibility-Annotationen und Stakeholder-Folien menschenlesbare Namen für dieselben Muster brauchen. Front-End-Lint-Regeln und CI-Checks können benutzerdefinierte Hex-Werte kennzeichnen, die weit von jedem CSS-Stichwort liegen, wenn ein Team benannte Farben in Stylesheets der Lesbarkeit wegen bevorzugt. Autoren von Datenvisualisierungen, die kategoriale Serien mappen, starten manchmal von Hex-Rampen und wollen das nächste CSS-Stichwort für Legenden, die ohne eigene Musterbilder rendern müssen.

Wenn Sie später Multi-Format-Umwandlung über HEX, RGB, HSL, LAB und CMYK, nur reverse Konversion von Namen zu Hex, dominante Farbextraktion aus Bildern oder WCAG-Kontrastprüfungen brauchen, behandeln Sie diese als getrennte Suchintentionen und Landings statt diese dedizierte Hex-zu-Farbname-Seite zu überladen.