Nombres de color CSS

Funciones

• Los 148 colores con nombre de CSS, la lista completa de CSS Color 4
• De nombre a valor: escribe tomato y obtienes su valor, su RGB, su HSL y la forma `color: tomato`
• De valor a nombre: pega #2f4f4f para ver si tiene nombre estándar
• Se señalan los nueve pares del mismo color (aqua / cyan, fuchsia / magenta, siete pares gray / grey)
• Hex, RGB y HSL para cada color, listos para pegar en una hoja de estilos
• Una muestra dibujada en cada fila, sin tener que convertir el código en color mentalmente
• Cada color indica si sobre él se lee mejor en negro o en blanco, con la relación de contraste WCAG y si alcanza el nivel AA
• Recorrido por familia de tono: rojos, naranjas y marrones, amarillos, verdes, azules y turquesas, morados, neutros
• Búsqueda por fragmento de nombre: escribe dark y lista todos los oscuros
• Los 148 nombres en un desplegable con búsqueda, con el valor en la sugerencia
• Vacío lista la tabla entera, recorrible como carta de color
• Tolerancia al pegado: las comillas y los caracteres de ancho completo no rompen la búsqueda

Cómo se usa

1. Escribe un nombre de color, como tomato o rebeccapurple
2. O pega un valor como #2f4f4f para ver si tiene nombre estándar
3. Para ver qué nombres pertenecen a una familia, escribe una familia de tono como «morados»
4. Deja el cuadro vacío para listar los 148 nombres, agrupados por tono

Preguntas frecuentes

¿Por qué dos nombres comparten un valor, y cuál uso?

Porque la lista de colores de CSS fusiona los nombres históricos de HTML con los de SVG, y los dos conjuntos se solapan y además difieren en la ortografía. De ahí salen nueve pares: `aqua` (HTML) y `cyan` (SVG), `fuchsia` y `magenta`, y siete diferencias ortográficas como `gray` / `grey`. Cualquiera vale; los navegadores los tratan igual. En la práctica: mantén la coherencia con lo que ya usa el proyecto (mezclar `gray` y `grey` en un mismo código los hace parecer cosas distintas) y elegid una convención de ortografía para el equipo.

¿Debería usar nombres de color o hexadecimal en mi código?

Los nombres van bien donde lo importante es que se entienda de un vistazo: `color: tomato` se lee mejor que `color: #ff6347`, no exige consultar nada y facilita la revisión. Pero solo hay 148, así que cualquier color más preciso se queda sin nombre. Por eso los proyectos reales mezclan: nombres para expresar intención (un acento, un color de peligro), hex o una forma moderna como `oklch()` donde importa un valor de marca o la precisión. Un aviso: un nombre de color no se puede tematizar —no puedes hacer que `tomato` sea otro rojo en modo oscuro—, mientras que una variable CSS sí.

¿Funcionan estos nombres en todos los navegadores?

Los 148 nombres forman parte de CSS Color Module Level 4 y están soportados en todos los navegadores modernos. El único a vigilar es `rebeccapurple`, que llegó con el nivel 4 (en memoria de Rebecca Meyer): los navegadores muy antiguos, todas las versiones de IE, no lo reconocen y descartarán la declaración entera por inválida. Si aún das soporte a esos, trata `rebeccapurple` como un valor que necesita alternativa. Los otros 147 están desde los primeros días de CSS.

¿Por qué no hay una carta de colores de ceras o lápices?

Porque no hay una fuente fiable para ella. Los nombres de colores de ceras y lápices son datos de producto de cada fabricante, ligados a su propio sistema de numeración: ni son un estándar público ni conocimiento común que se pueda copiar libremente. Una «carta de 48 colores de cera» inventada tendría nombres y valores inventados por nosotros: verosímil, sin corresponder a ninguna caja real y peor que nada. Lo que hay aquí son los nombres de color estándar del W3C: una especificación abierta, con los 148 directamente usables en el navegador y más adecuada para el trabajo en pantalla que cualquier carta de fabricante.

Al buscar por valor, ¿por qué a veces dice «sin nombre»?

Porque los 148 nombres cubren valores discretos, mientras que el RGB tiene más de 16 millones de colores. Cualquier valor fuera de esos 139 simplemente no tiene nombre estándar: no es un error ni te impide nada, escribe el valor tal cual en tu hoja de estilos, que CSS no necesita un nombre. En esta rama la herramienta dice a propósito «no tiene nombre» y no «lo has escrito mal», porque eso es lo que ocurre.