Nombres de Colores CSS

Un nombre de color es una palabra clave legible por humanos — como red, tomato o rebeccapurple — que puedes usar en cualquier lugar donde CSS espera un valor de color, en lugar de una notación numérica como #FF0000 o rgb(255 0 0). Los nombres son la forma más sencilla de escribir un color: se documentan a sí mismos y es imposible escribir mal uno de manera que genere un color diferente pero válido, como puede ocurrir con los códigos hexadecimales.

Este capítulo lista todos los colores con nombre, explica cuándo usar un nombre en lugar de un valor hex o rgb(), y cubre las pocas palabras clave especiales (transparent, currentColor) que no están en la tabla.

Usar un nombre de color

Escribe la palabra clave directamente en cualquier propiedad de color. Los nombres no distinguen entre mayúsculas y minúsculas, por lo que Tomato, tomato y TOMATO son idénticos:

h1 {
  color: tomato;
}

button {
  background-color: SeaGreen;
  border: 2px solid darkslategray;
}

Son intercambiables con las formas hex y rgb() — color: tomato pinta exactamente los mismos píxeles que color: #FF6347 o color: rgb(255 99 71). Usa nombres para mayor legibilidad durante el desarrollo; recurre al hex cuando necesites un color de marca preciso que no tenga palabra clave.

Los colores con nombre

Los 147 nombres de color a continuación son compatibles con todos los navegadores modernos. Cada fila muestra la palabra clave y su valor HEX equivalente:

Cómo se relacionan los valores HEX con los nombres

Cada nombre de la tabla es simplemente un atajo para un color RGB — una mezcla de luz Roja, Verde y Azul. CSS escribe esa mezcla como un valor hexadecimal (HEX): un # seguido de seis dígitos, dos por canal. El valor más bajo que puede tener un canal es 0 (hex 00) y el más alto es 255 (hex FF).

#FF6347   →   FF = red 255   63 = green 99   47 = blue 71   →   "tomato"

El HEX no distingue entre mayúsculas y minúsculas, por lo que #FFFFFF y #ffffff son el mismo color (blanco). Cuando los tres canales comparten ambos dígitos, también puedes usar la forma abreviada de 3 dígitos — #FFF se expande a #FFFFFF y #F00 a #FF0000.

Conocer esta correspondencia es útil cuando una herramienta de diseño te entrega un código hex que casi coincide con una palabra clave: puedes sustituir por el nombre legible solo cuando los valores coincidan exactamente.

Palabras clave de color especiales

Dos palabras clave se comportan como nombres de color pero no están en la tabla:

• transparent — un color completamente transparente, equivalente a rgba(0, 0, 0, 0). Úsalo para ocultar un borde o fondo sin eliminar la propiedad.
• currentColor — se resuelve al valor actual de color del elemento. Es útil para mantener un borde o relleno SVG sincronizado automáticamente con el color del texto.

.ghost-button {
  color: royalblue;
  background-color: transparent;
  border: 2px solid currentColor; /* follows the royalblue text color */
}

Capítulos relacionados

• Propiedad CSS color — establece el color del texto de un elemento.
• Propiedad CSS background-color — rellena el fondo de un elemento.
• Colores HTML — los modelos de color RGB / HEX / HSL explicados.

Práctica