Color Name Finder

Vad är ett CSS-färgnamn?

CSS definierar 148 namngivna färger som webbläsare känner igen via nyckelord i stället för numeriska koder. I stället för att skriva #ff6347 i en stilmall kan du skriva Tomato. I stället för #6a5acd kan du skriva SlateBlue. Dessa namn standardiserades i CSS Color Level 3 (2011) och Level 4 (2022), med utgångspunkt i de ursprungliga 17 färgerna från CSS 2.1 och de 140 X11-färgnamnen som ärvts från tidiga Unix-fönstersystem.

En färgnamnsletare tar ett godtyckligt hex- eller RGB-värde och hittar det närmaste namngivna CSS-färgvärdet. Matchningsalgoritmen beräknar avståndet mellan två färger i RGB-rymden, vanligtvis euklidiskt avstånd: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Den namngivna färg med kortast avstånd till din inmatning vinner. Om avståndet är noll är din inmatning en exakt träff för det namnet.

Detta är användbart när du vill ha läsbar, självdokumenterande CSS. En regel som background-color: Tomato kommunicerar avsikt snabbare än background-color: #ff6347. Det hjälper också när du behöver referera till en färg muntligt i en designgranskning, tillgänglighetsrevision eller dokumentation. I stället för att säga 'den rödorangea' kan du säga 'Tomato'.

Varför använda denna färgnamnsletare?

Att slå upp närmaste namngivna färg för hand innebär att bläddra igenom en referenstabell med 148 poster och uppskatta hex-värden med ögat. Det här verktyget utför avståndsberäkningen åt dig och returnerar de 5 närmaste träffarna med exakta hex-koder och avståndsvärden.

Användningsområden för färgnamnsletaren

Referens för CSS-färgnamn per grupp

CSS Color Level 4-specifikationen definierar 148 namngivna färgnyckelord. Tabellen nedan organiserar dem per nyansgross med antal och några exempelnamn per grupp. Varje namn som listas här är ett giltigt CSS-färgnyckelord som fungerar i alla moderna webbläsare.

Färgavstånd: euklidiskt RGB jämfört med perceptuellt

Metoden som används för att mäta färgavstånd påverkar vilken namngiven färg som rapporteras som närmaste träff. Det finns två metoder och de kan ge olika resultat för samma inmatning.

Kodexempel

Hitta närmaste CSS-färgnamn programmatiskt med euklidiskt avstånd i RGB-rymden. Varje exempel tar en hex-sträng och returnerar det närmaste färgnamnet från CSS-specifikationen.

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

Vanliga frågor