Color Name Finder

Wat is een CSS-kleurnaam?

CSS definieert 148 benoemde kleuren die browsers herkennen op trefwoord in plaats van numerieke code. In plaats van #ff6347 in een stylesheet te schrijven, kun je Tomato schrijven. In plaats van #6a5acd kun je SlateBlue schrijven. Deze namen zijn gestandaardiseerd in CSS Color Level 3 (2011) en Level 4 (2022), voortbouwend op de oorspronkelijke 17 kleuren uit CSS 2.1 en de 140 X11-kleurnamen overgenomen van vroege Unix-venstersystemen.

Een kleurnaaminzager neemt een willekeurige hex- of RGB-waarde en zoekt de CSS-kleurnaam die er het dichtst bij ligt. Het vergelijkingsalgoritme berekent de afstand tussen twee kleuren in RGB-ruimte, meestal Euclidische afstand: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). De benoemde kleur met de kleinste afstand tot je invoer wint. Als de afstand nul is, is je invoer een exacte overeenkomst met die naam.

Dit is nuttig als je leesbare, zelfdocumenterende CSS wilt. Een regel zoals background-color: Tomato communiceert de intentie sneller dan background-color: #ff6347. Het helpt ook wanneer je een kleur mondeling wilt benoemen in een ontwerpbespreking, toegankelijkheidsaudit of documentatie. In plaats van 'die roodoranje kleur' te zeggen, kun je 'Tomato' zeggen.

Waarom deze Color Name Finder gebruiken?

De dichtstbijzijnde benoemde kleur handmatig opzoeken betekent scrollen door een referentietabel van 148 items en hexadecimale waarden op het oog vergelijken. Dit hulpmiddel voert de afstandsberekening voor je uit en geeft de 5 dichtstbijzijnde overeenkomsten terug met hun exacte hex-codes en afstandsscores.

Toepassingen van de Color Name Finder

CSS-kleurnamen per groep

De CSS Color Level 4-specificatie definieert 148 benoemde kleurkeywords. De tabel hieronder organiseert ze per tintgroep, met het aantal en de eerste paar namen per groep. Elke naam in deze lijst is een geldig CSS-kleurkeyword dat werkt in alle moderne browsers.

Kleurafstand: Euclidisch RGB versus perceptueel

De methode die wordt gebruikt om kleurafstand te meten, beïnvloedt welke benoemde kleur als de dichtstbijzijnde overeenkomst wordt gerapporteerd. Er bestaan twee benaderingen die voor dezelfde invoer verschillende resultaten kunnen geven.

Codevoorbeelden

Vind de dichtstbijzijnde CSS-kleurnaam programmatisch met Euclidische afstand in RGB-ruimte. Elk voorbeeld neemt een hex-string en geeft de dichtstbijzijnde kleurnaam uit de CSS-specificatie terug.

// 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
}

Veelgestelde vragen