Chercheur de noms de couleurs CSS

Qu'est-ce qu'un nom de couleur CSS ?

CSS définit 148 couleurs nommées que les navigateurs reconnaissent par mot-clé plutôt que par code numérique. Au lieu d'écrire #ff6347 dans une feuille de style, tu peux écrire Tomato. Au lieu de #6a5acd, tu peux écrire SlateBlue. Ces noms ont été standardisés dans CSS Color Level 3 (2011) et Level 4 (2022), en s'appuyant sur les 17 couleurs d'origine de CSS 2.1 et les 140 noms de couleurs X11 hérités des premiers systèmes de fenêtrage Unix.

Un outil de noms de couleurs prend une valeur hexadécimale ou RGB quelconque et localise le nom de couleur CSS le plus proche. L'algorithme de correspondance calcule la distance entre deux couleurs dans l'espace RGB, généralement par distance euclidienne : sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). La couleur nommée avec la plus petite distance par rapport à la valeur saisie l'emporte. Si la distance est nulle, la valeur saisie correspond exactement à ce nom.

C'est utile quand tu veux un CSS lisible et auto-documenté. Une règle comme background-color: Tomato exprime l'intention plus clairement que background-color: #ff6347. Ça aide aussi quand tu dois nommer une couleur à l'oral lors d'une revue de design, d'un audit d'accessibilité ou dans de la documentation. Plutôt que de dire 'ce rouge-orangé', tu peux dire 'Tomato'.

Pourquoi utiliser cet outil ?

Rechercher manuellement la couleur nommée la plus proche signifie parcourir un tableau de référence de 148 entrées en comparant des valeurs hexadécimales à l'œil. Cet outil effectue le calcul de distance à ta place et renvoie les 5 correspondances les plus proches avec leurs codes hexadécimaux exacts et leurs scores de distance.

Cas d'usage

Référence des couleurs CSS nommées par groupe

La spécification CSS Color Level 4 définit 148 mots-clés de couleurs nommées. Le tableau ci-dessous les organise par groupe de teinte, avec le nombre et quelques exemples de noms par groupe. Chaque nom listé ici est un mot-clé CSS valide qui fonctionne dans tous les navigateurs modernes.

Distance colorimétrique : RGB euclidienne vs perceptuelle

La méthode utilisée pour mesurer la distance entre deux couleurs influence quelle couleur nommée est désignée comme la plus proche. Deux approches existent et peuvent donner des résultats différents pour la même valeur d'entrée.

Exemples de code

Trouve le nom de couleur CSS le plus proche par programmation en utilisant la distance euclidienne dans l'espace RGB. Chaque exemple prend une chaîne hexadécimale et renvoie le nom de couleur le plus proche selon la spécification CSS.

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

Questions fréquentes