Buscador de nombres de colores CSS

Cómo usar

1. Introduce un valor de color: escribe o pega un código hex (#3b82f6), un valor RGB o HSL, o haz clic en el selector para elegir un color visualmente.
2. Obtén el nombre del color: el nombre CSS con nombre más cercano, una referencia Pantone y un nombre legible se muestran al instante.
3. Explora los colores cercanos: ve una paleta de colores con nombre similares para encontrar la mejor coincidencia o una alternativa para tu diseño.

¿Por qué usar la búsqueda de nombre de color?

Cuando trabajas con un design system, documentación de accesibilidad o comunicación con clientes, disponer de un nombre legible para un color es mucho más útil que un código hex. «Cornflower Blue» comunica con claridad; «#6495ed» no. Esta herramienta tiende el puente entre los valores máquina y los nombres humanos, ayudando a los diseñadores a documentar paletas, explicar decisiones de color y recuperar los nombres CSS estándar para sus valores hex.

Funcionalidades

• Nombre CSS más cercano: encuentra el color CSS con nombre más cercano (de la lista completa de 148 colores CSS) para cualquier código hex o RGB.
• Varios formatos de entrada: admite hex (#rrggbb), RGB, HSL y HSV.
• Selector de color: usa el selector nativo para una selección visual.
• Colores cercanos: muestra colores con nombre similares para encontrar alternativas.
• Metadatos de color: muestra tono, saturación, luminosidad y luminosidad percibida.

Preguntas frecuentes

¿Cómo encuentra la herramienta el nombre más cercano?

La herramienta calcula la distancia perceptual entre tu color y todos los colores CSS con nombre mediante la fórmula de diferencia CIEDE2000, que se alinea bien con la percepción humana de las diferencias de color. Se devuelve la coincidencia más cercana como nombre.

¿Estos colores son idénticos a las palabras clave CSS?

Sí. La herramienta incluye los 148 colores con nombre CSS estándar (de la especificación CSS Color Module Level 4) como «rebeccapurple», «dodgerblue» y «tomato». Puedes usarlos directamente en CSS en lugar de los valores hex.

¿Y si mi color no tiene un nombre exacto?

La mayoría de los colores no tienen un nombre CSS exacto. La herramienta devuelve el color con nombre perceptivamente más cercano y muestra la diferencia (delta E) para indicarte lo cercana que es la coincidencia.

De X11 a CSS Color Module Level 4: el largo camino hacia «rebeccapurple»

Los colores nombrados de CSS que la mayoría de las personas usan hoy son heredados de la lista de colores del sistema X Window (rgb.txt), que fue ensamblada en el MIT para el entorno gráfico X11 en 1986. La lista creció orgánicamente durante la siguiente década, llena de nombres caprichosos y oscuros como «papayawhip», «peachpuff» y «papayawhip». Cuando Mosaic (1993) y luego Netscape Navigator (1994) estandarizaron el color en HTML, mantuvieron un subconjunto de los nombres X11. CSS1 (diciembre de 1996) formalizó solo 16 colores nombrados coincidiendo con la paleta VGA original: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) añadió «orange» como el 17. CSS2.1 (junio de 2011) mantuvo los 17. CSS3 Color Module (junio de 2014, finalizado 2018) añadió el resto de los nombres X11, llevando el total a 147. En junio de 2014, el color «rebeccapurple» (#663399) fue añadido para honrar a la hija de Eric Meyer, Rebecca, quien había muerto de cáncer cerebral; ella había dicho que el morado era su color favorito. Fue añadido a CSS Color Module Level 4, llevando el total a 148. El valor hex #663399 es el único color nombrado de CSS añadido en memoria de una persona específica.

Color CSS más allá de los colores nombrados: oklch, lab, color()

Los colores nombrados aún cubren solo una esquina de lo que las pantallas modernas pueden mostrar. CSS Color Module Level 4 (Candidate Recommendation, borrador actual) introduce un conjunto mucho más amplio de sintaxis de color. lab() y lch() te permiten especificar colores en CIE Lab y LCh, que son espacios de color perceptualmente uniformes. oklab() y oklch() (Björn Ottosson, 2020) son versiones mejoradas que manejan mejor los colores saturados brillantes; oklch(70% 0.15 240) es un azul cielo vivo. color(display-p3 1 0.5 0) da acceso al gamut de color P3 más amplio que los iPhones, iPads y Macs modernos pueden mostrar, aproximadamente 25% más saturado que el sRGB al que los colores nombrados están limitados. Sintaxis de color relativa (oklch(from blue calc(l - 10%) c h)) te permite derivar un color de otro. El soporte de navegador para las cuatro funciones de color alcanzó >90% en 2024. Para diseños de la era 2025, usa colores nombrados para prototipos, luego porta a oklch() para paletas de producción que funcionen a través del espectro de gamut de color.

Cómo se calcula realmente el «color más cercano»

La «distancia» entre dos colores no es un concepto único. Diferentes fórmulas dan diferentes respuestas y cada una se adapta a diferentes casos de uso.

• Distancia euclidiana en sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Rápido, pero no coincide con la percepción humana, dos colores que parecen idénticos pueden estar lejos en RGB y dos colores que parecen muy diferentes pueden estar cerca. Evita para consultas de «nombre más cercano».
• Delta E CIE76. Misma fórmula euclidiana pero en el espacio CIE Lab, que es aproximadamente perceptualmente uniforme. Aproximadamente, no exactamente. Buena primera aproximación; ΔE ≤ 2,3 se considera «apenas perceptible» en condiciones controladas.
• Delta E CIEDE2000. El estándar industrial actual, publicado por la CIE en 2001. Añade correcciones para luminosidad, croma y rotación de tono que coinciden mejor con cómo los humanos realmente perciben las diferencias de color. ΔE2000 ≤ 1 es imperceptible para la mayoría de observadores; ≤ 5 parece un color similar. Esta herramienta usa CIEDE2000 para la «coincidencia más cercana».
• Distancia euclidiana en OKLab. El espacio de color 2020 de Björn Ottosson está diseñado para que la distancia euclidiana simple se aproxime estrechamente a ΔE2000. Más rápido que ΔE2000 y la calidad perceptual es similar. Cada vez más el predeterminado en herramientas de diseño.

Dónde nombrar colores realmente ayuda

• Documentación de sistema de diseño. «Acción primaria: Royal Blue (#4169e1)» se lee mejor que solo un valor hex en especificaciones de diseño y guías de marca.
• Comunicación con clientes. «Usemos coral y steel blue» funciona en una reunión; «#ff7f50 y #4682b4» no. Los nombres anclan la conversación antes de comprometerte a valores exactos.
• Auditorías de accesibilidad. Al documentar qué colores fallan en contraste WCAG contra un fondo, tener nombres humanos hace los informes de auditoría utilizables por no-desarrolladores.
• Traducción de código heredado. Los archivos CSS antiguos a menudo usan colores nombrados. Al migrar a design tokens o una paleta personalizada, necesitas saber a qué colores exactos mapean «lightseagreen» y «mediumaquamarine».
• Prototipos rápidos. Escribir background: tomato es más rápido que elegir un hex de una rueda de colores. Los colores nombrados son valores predeterminados sorprendentemente buenos para bocetar diseños antes de que se elijan los colores finales.
• Nombrar colores de marca. Si tu rojo de marca está cerca de crimson (#dc143c), llamarlo «Brand Crimson» internamente es más memorable que «Red 8».
• Coincidencia de muestras. Los diseñadores pegan un color muestreado de una fotografía o captura de pantalla y preguntan «¿de qué color está cerca esto?» para iniciar una paleta desde una referencia del mundo real.

Errores y sorpresas con los colores nombrados de CSS

• gray vs grey. CSS acepta ambas grafías, pero la lista X11 originalmente solo tenía «gray». «grey» fue añadido después. lightgray y lightgrey son alias, mismo color. Mantén una grafía en una base de código.
• Las variantes «dark» no son siempre más oscuras que la base. darkgray (#a9a9a9) es en realidad más claro que gray (#808080), una famosa peculiaridad histórica de la lista X11 que CSS heredó. Misma trampa con darkgrey.
• aqua y cyan son el mismo color. Ambos son #00ffff. CSS incluye ambos como alias heredados. fuchsia y magenta también son idénticos (#ff00ff).
• «orange» es un color nombrado de CSS pero las variantes «pink» son diferentes. orange = #ffa500. Pero no hay un solo «pink», CSS tiene pink, lightpink, hotpink, deeppink, palevioletred, todos notablemente diferentes.
• El «color más cercano» depende de lo que tu cerebro piense que es el color. Dos personas muestreando el mismo chip de pintura pueden elegir diferentes nombres. CIEDE2000 captura la percepción promedio, no la tuya. Siempre verifica las muestras visualmente en lugar de confiar solo en el número de distancia.
• Los colores nombrados son todos sRGB. Los colores nombrados de CSS están definidos como triples sRGB de 8 bits. En una pantalla P3 o BT.2020, los colores vivos como tomato y fuchsia pueden verse más apagados que el mismo tono especificado en color(display-p3 ...). Para prototipos, bien; para producción en hardware moderno, porta a sintaxis wide-gamut.
• Los colores nombrados por sí solos no pasan las verificaciones de accesibilidad. yellow sobre white es ilegible; red sobre black es marginal. El estado nombrado de un color no dice nada sobre el contraste. Siempre empareja una elección de color con una verificación de contraste WCAG.

Más preguntas frecuentes

¿Quién realmente eligió los nombres como «papayawhip» y «peachpuff»?

Ninguna persona individual; el archivo rgb.txt de X11 creció a través de múltiples colaboradores en el MIT y otros proveedores Unix a finales de los 1980s. Muchos nombres vinieron de los catálogos de pintura Sinclair Paints y otros de la época. El nombrado es informal e inconsistente a propósito, los colaboradores nombraron colores según objetos que tenían en su escritorio o fuera de su ventana. No había un comité central. Cuando CSS3 adoptó la lista X11 al por mayor en 2014, todas las peculiaridades vinieron con ella.

¿Debería usar rebeccapurple en producción?

El soporte de navegador es universal desde 2014, así que funciona en todas partes. Es exactamente equivalente a #663399. Usa el nombre que se lea mejor en tu código; «rebeccapurple» es un pequeño pero visible tributo en cada página que lo usa.

¿Cuál es la diferencia entre CIEDE2000 y las fórmulas ΔE más simples?

ΔE76 (distancia euclidiana en CIE Lab) es rápida y da respuestas razonables pero subestima diferencias en colores saturados y sobreestima en colores oscuros. CIEDE2000 añade cinco términos de corrección (para luminosidad, croma, rotación de tono y dos términos cruzados) que se ajustan a datos empíricos sobre cómo las personas perciben realmente las diferencias de color. La corrección es significativa; el mismo par de colores puede dar ΔE76 = 4 y ΔE2000 = 2 (veredicto perceptual muy diferente). Para «¿está este color lo suficientemente cerca de ese otro?», usa ΔE2000. Para procesamiento por lotes donde la velocidad importa, la distancia euclidiana OKLab es una aproximación rápida.

¿Puedo añadir mis propios nombres de color personalizados?

No como palabras clave CSS, la lista de colores nombrados está fija por la spec. Pero las Custom Properties de CSS (variables) te dan la misma ergonomía: :root { --brand-coral: #ff7f50; } luego color: var(--brand-coral). Los design tokens son esencialmente esta idea formalizada, y los sistemas de diseño modernos los usan universalmente.

¿Se envían mis datos de color a alguna parte?

No. Toda conversión de color y cálculo de distancia se ejecuta en tu navegador. Abre la pestaña Red en DevTools y elige un color, verás cero solicitudes salientes. Seguro para colores de marca no publicados o cualquier trabajo de paleta interna.