Color Name Finder

Was ist ein CSS-Farbname?

CSS definiert 148 benannte Farben, die Browser anhand eines Schlüsselworts statt eines numerischen Codes erkennen. Anstatt #ff6347 in einem Stylesheet zu schreiben, kann man Tomato schreiben. Anstatt #6a5acd lässt sich SlateBlue verwenden. Diese Namen wurden in CSS Color Level 3 (2011) und Level 4 (2022) standardisiert — aufbauend auf den ursprünglichen 17 Farben aus CSS 2.1 und den 140 X11-Farbnamen, die von frühen Unix-Fenstersystemen übernommen wurden.

Ein Color Name Finder nimmt einen beliebigen Hex- oder RGB-Wert und findet den CSS-Farbnamen, der ihm am nächsten liegt. Der Algorithmus berechnet den Abstand zwischen zwei Farben im RGB-Raum, üblicherweise als euklidische Distanz: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Der benannte Farbwert mit dem kleinsten Abstand zum Eingabewert gewinnt. Ist der Abstand null, ist die Eingabe eine exakte Übereinstimmung für diesen Namen.

Das ist nützlich, wenn lesbares, selbsterklärendes CSS gewünscht ist. Eine Regel wie background-color: Tomato vermittelt die Absicht schneller als background-color: #ff6347. Es hilft auch, wenn eine Farbe in einem Design-Review, Accessibility-Audit oder in der Dokumentation mündlich benannt werden muss. Statt 'dieses rötlich-orange' lässt sich einfach 'Tomato' sagen.

Warum diesen Color Name Finder verwenden?

Den nächsten Farbnamen manuell nachzuschlagen bedeutet, durch eine 148 Einträge lange Referenztabelle zu scrollen und Hex-Werte per Augenschein zu vergleichen. Dieses Tool berechnet den Abstand automatisch und gibt die 5 nächstgelegenen Treffer mit exakten Hex-Codes und Abstandswerten zurück.

Anwendungsfälle für den Color Name Finder

CSS-Farbnamen nach Gruppe

Die CSS-Color-Level-4-Spezifikation definiert 148 benannte Farb-Keywords. Die folgende Tabelle ordnet sie nach Farbtongruppe, mit Anzahl und den ersten Beispielnamen je Gruppe. Jeder hier aufgeführte Name ist ein gültiges CSS-Farb-Keyword, das in allen modernen Browsern funktioniert.

Farbabstand: Euklidische RGB-Distanz vs. wahrnehmungsbasiert

Die Methode zur Messung des Farbabstands beeinflusst, welcher Farbname als nächstgelegener Treffer ausgegeben wird. Zwei Ansätze existieren, und sie können für dieselbe Eingabe unterschiedliche Ergebnisse liefern.

Code-Beispiele

Den nächsten CSS-Farbnamen programmatisch per euklidischer Distanz im RGB-Raum finden. Jedes Beispiel nimmt einen Hex-String und gibt den nächstgelegenen Farbnamen aus der CSS-Spezifikation zurück.

// Euclidean distance in RGB space
function nearestCssColor(hex) {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)

  let bestName = ''
  let bestDist = Infinity

  for (const [name, value] of Object.entries(cssColors)) {
    const r2 = parseInt(value.slice(1, 3), 16)
    const g2 = parseInt(value.slice(3, 5), 16)
    const b2 = parseInt(value.slice(5, 7), 16)
    const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (dist < bestDist) { bestDist = dist; bestName = name }
  }
  return bestName
}

nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"

import math

CSS_COLORS = {
    "Crimson": (220, 20, 60), "SlateBlue": (106, 90, 205),
    "Tomato": (255, 99, 71), "Teal": (0, 128, 128),
    # ... full list of 148 entries
}

def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip("#")
    return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16))

def nearest_css_color(hex_str: str) -> str:
    r, g, b = hex_to_rgb(hex_str)
    best = min(
        CSS_COLORS.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return best[0]

print(nearest_css_color("#6366f1"))  # → SlateBlue
print(nearest_css_color("#ff6347"))  # → Tomato (exact match, distance 0)

package main

import (
	"fmt"
	"math"
	"strconv"
)

type CSSColor struct {
	Name    string
	R, G, B int
}

var colors = []CSSColor{
	{"Crimson", 220, 20, 60},
	{"SlateBlue", 106, 90, 205},
	{"Tomato", 255, 99, 71},
	// ... full list
}

func hexToRGB(hex string) (int, int, int) {
	r, _ := strconv.ParseInt(hex[1:3], 16, 64)
	g, _ := strconv.ParseInt(hex[3:5], 16, 64)
	b, _ := strconv.ParseInt(hex[5:7], 16, 64)
	return int(r), int(g), int(b)
}

func nearest(hex string) string {
	r, g, b := hexToRGB(hex)
	best := ""
	bestDist := math.MaxFloat64
	for _, c := range colors {
		d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
		if d < bestDist {
			bestDist = d
			best = c.Name
		}
	}
	return best
}

func main() {
	fmt.Println(nearest("#6366f1")) // → SlateBlue
}

Häufig gestellte Fragen