Buscador de Nombres de Color CSS

¿Qué es un nombre de color CSS?

CSS define 148 colores con nombre que los navegadores reconocen por palabra clave en lugar de código numérico. En vez de escribir #ff6347 en una hoja de estilos, puedes escribir Tomato. En vez de #6a5acd, puedes escribir SlateBlue. Estos nombres se estandarizaron en CSS Color Level 3 (2011) y Level 4 (2022), partiendo de los 17 colores originales de CSS 2.1 y los 140 nombres de color X11 heredados de los primeros sistemas de ventanas Unix.

Un buscador de nombres de color toma un valor hex o RGB arbitrario y localiza el color CSS con nombre más cercano. El algoritmo de coincidencia calcula la distancia entre dos colores en el espacio RGB, generalmente la distancia euclidiana: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). El color con nombre que tenga la menor distancia respecto a tu entrada gana. Si la distancia es cero, tu entrada coincide exactamente con ese nombre.

Esto importa cuando quieres CSS legible y autodocumentado. Una regla como background-color: Tomato comunica la intención más rápido que background-color: #ff6347. También ayuda cuando necesitas referenciar un color verbalmente en una revisión de diseño, auditoría de accesibilidad o documentación. En lugar de decir 'ese rojo anaranjado', puedes decir 'Tomato'.

¿Por qué usar este buscador de nombres de color?

Buscar el color con nombre más cercano a mano significa recorrer una tabla de referencia de 148 entradas e interpretar valores hex a ojo. Esta herramienta hace el cálculo de distancia por ti y devuelve los 5 resultados más cercanos con sus códigos hex exactos y puntuaciones de distancia.

Casos de uso del buscador de nombres de color

Referencia de colores CSS con nombre por grupo

La especificación CSS Color Level 4 define 148 palabras clave de color con nombre. La tabla siguiente los organiza por grupo de tono, con el recuento y algunos nombres de ejemplo por grupo. Todos los nombres de la lista son palabras clave de color CSS válidas que funcionan en todos los navegadores modernos.

Distancia de color: RGB euclidiana vs. perceptual

El método utilizado para medir la distancia de color afecta qué color con nombre se reporta como la coincidencia más cercana. Existen dos enfoques y pueden dar resultados distintos para la misma entrada.

Ejemplos de código

Encuentra el color CSS con nombre más cercano de forma programática usando la distancia euclidiana en el espacio RGB. Cada ejemplo recibe una cadena hex y devuelve el nombre de color más cercano de la especificación 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
}

Preguntas frecuentes