Buscador de nombres de color CSS
Pega un color en HEX, rgb(), hsl() u otra notación y verás los cinco colores con nombre de CSS más cercanos, ordenados por distancia perceptual. Escribe un nombre para ver su valor exacto. Los nombres son palabras clave de CSS y solo existen en inglés.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Escribe o pega un color. Funcionan HEX con o sin almohadilla,
rgb(...), hsl(...), hsv(...), cmyk(...) y oklch(...).
- Lee la lista: la primera fila es el color con nombre más cercano, seguida de otros cuatro. Cada fila muestra el HEX y la distancia.
- Para ir en sentido contrario, escribe un nombre de color CSS. La herramienta muestra su HEX y su RGB y cualquier otro nombre del mismo color.
Cómo funciona
Cada color se pasa de sRGB a OKLab. La herramienta calcula la distancia euclidiana entre tu color y cada uno de los 148 nombres CSS y ordena los resultados. Los nombres que comparten valor (gray y grey, aqua y cyan, fuchsia y magenta) aparecen en una sola fila, como gray / grey. La distancia se muestra multiplicada por 100 y redondeada a un decimal.
Ejemplo
#3366cc, el valor por defecto, no tiene nombre exacto. Los más cercanos son royalblue (#4169e1, distancia 3,6), slateblue (6,9), steelblue (9,6), mediumslateblue (10,5) y dodgerblue (12,5). En cambio, #fe0000 está a un paso del rojo puro en el canal rojo, así que el primero es red con una distancia de 0,2.
Consejos
- Una distancia pequeña, más o menos por debajo de 2, significa que el nombre describe bien tu color. Con distancias mayores el nombre es solo una etiqueta aproximada.
- Los nombres hacen más legibles las hojas de estilo, pero el HEX es más preciso. Usa el nombre cuando la coincidencia sea exacta.
- El botón Copiar de cada fila lleva el nombre directamente a tu CSS.
Preguntas frecuentes
¿Por qué los nombres están en inglés?
La herramienta busca los colores con nombre de CSS, palabras clave como red, tomato o royalblue que puedes escribir en tus estilos en lugar de un código HEX. CSS solo los define en inglés, así que se muestran así; el navegador no entendería «rojo» ni «tomate».
¿Cuántos colores con nombre tiene CSS?
CSS Color Module Level 4 define 148 palabras clave de color, rebeccapurple incluida. Se reducen a 139 colores distintos porque gray y grey, aqua y cyan, y fuchsia y magenta comparten valor. La herramienta los incluye todos.
¿Cómo se elige el color más cercano?
Ambos colores se pasan a OKLab, un espacio pensado para que pasos numéricos iguales parezcan diferencias iguales a la vista. Se eligen los nombres con la menor distancia en línea recta, multiplicada por 100 para que sea más legible. Una distancia de 0 es una coincidencia exacta.
¿Por qué el resultado a veces difiere de una comparación RGB simple?
Comparar los canales rojo, verde y azul directamente exagera diferencias que el ojo apenas nota y minimiza otras. La distancia en OKLab sigue mejor la percepción, así que puede elegir un nombre distinto al de una comparación canal a canal.
¿Puedo escribir un nombre para obtener su HEX?
Sí. No distingue mayúsculas y se ignoran espacios, guiones y guiones bajos, así que Rebecca Purple, rebecca-purple y rebeccapurple dan #663399.