Buscador de nombres de color CSS
Encuentra el nombre de color CSS más cercano a cualquier valor HEX mediante distancia RGB, con muestras de color y botones para copiar.
🔒 Se ejecuta completamente en tu navegador — nada se cargaEncuentra la palabra clave CSS más cercana
CSS incluye una larga lista de palabras clave de color, desde opciones conocidas como black, white y red hasta nombres más específicos como cornflowerblue, papayawhip y mediumseagreen. Este buscador de nombres de color te ayuda a relacionar cualquier valor HEX con el nombre CSS disponible más cercano. Introduce un color y el navegador lo compara con el mapa de palabras clave incorporado usando la distancia RGB. El nombre más cercano, su valor HEX y varias alternativas próximas se actualizan al instante.
Los colores con nombre son útiles para demos rápidas, enseñanza, documentación y ejemplos legibles. También ayudan a describir un color a alguien cuando no se necesitan tokens exactos. Sin embargo, la lista de colores con nombre es limitada y está distribuida de forma desigual: hay muchos rosas y azules pálidos, pero menos tonos de marca modernos y precisos, así que la palabra clave más cercana debe tomarse como una aproximación y no como un sustituto perfecto de tu código HEX original.
Cómo funciona la búsqueda del color más cercano
Cada palabra clave CSS tiene un valor fijo de rojo, verde y azul. El script convierte tu HEX a RGB y mide la distancia al cuadrado hasta cada color con nombre comparando los tres canales. El nombre con la menor distancia se muestra como la coincidencia más cercana. Este método es rápido y predecible, ideal para una herramienta del lado del cliente. No es una fórmula completa de diferencia perceptual de color, así que dos colores con una distancia RGB similar no siempre parecen igual de cercanos para el ojo humano.
Cuándo usar nombres en lugar de HEX
En sistemas de diseño en producción, HEX, RGB, HSL o las propiedades personalizadas suelen ser mejores que los nombres porque conservan la intención exacta. Los nombres brillan en ejemplos, prototipos rápidos, artículos de blog y conversaciones donde importa más la legibilidad que la precisión. Si usas un color con nombre en CSS publicado, pruébalo en la interfaz completa como cualquier otro token. La palabra clave más cercana aún puede necesitar una comprobación de contraste antes de usarse como fondo, color de texto o indicador de estado.
Cómo usar
- Introduce un colorElige o escribe cualquier color HEX válido.
- Compara nombresRevisa el color CSS con nombre más cercano y las alternativas próximas.
- Copia la palabra claveUsa el nombre o el valor HEX exacto en CSS y documentación.