Colores HTML y CSS

Cómo usar un nombre de color en CSS

Cualquier propiedad de CSS que acepta un color acepta también uno de estos 148 nombres, en mayúsculas o minúsculas. Las tres líneas de abajo pintan el mismo rojo.

El nombre es fácil de leer, pero no siempre se adivina: gainsboro, peru y moccasin son colores de verdad. Para el color de tu marca, usa HEX o rgb().

color: tomato;
color: #ff6347;
color: rgb(255 99 71);

HEX, RGB, HSL y OKLCH

La tabla muestra cada color en cuatro notaciones de CSS. HEX es la más corta y la más común. RGB da la cantidad de rojo, verde y azul, de 0 a 255. HSL describe tono, saturación y luminosidad, y ayuda a hacer una versión más clara u oscura del mismo color.

OKLCH también usa tono, pero su luminosidad (el primer número) sigue lo que percibe el ojo: dos colores con el mismo valor parecen igual de claros. En HSL eso no pasa, y yellow se ve mucho más claro que blue aunque tengan la misma luminosidad nominal. El blanco, el negro y los grises no tienen croma, así que su tono aparece como 0.

Para convertir un color que no está en la lista, usa uno de los conversores de abajo.

• Convertir HEX a RGB
• Convertir RGB a HEX
• Elegir un color con el Color Picker

Nombres distintos, mismo color

Nueve pares de nombres valen el mismo color: aqua y cyan, fuchsia y magenta, y las grafías gray y grey de gray, darkgray, darkslategray, dimgray, lightgray, lightslategray y slategray. Por eso la lista tiene 148 nombres y 139 colores distintos. En la tabla, el otro nombre aparece debajo del nombre de la fila.

Las listas más antiguas hablan de 140 nombres. Cuentan una sola grafía de cada gris y no incluyen rebeccapurple (#663399), que llegó con CSS Color Level 4.

transparent, currentColor y colores del sistema

Dos palabras valen como color, pero quedan fuera de la tabla porque no tienen un valor fijo. transparent es negro con alfa cero. currentColor repite el valor de color del elemento y sirve para un borde o un icono SVG que debe seguir el color del texto.

CSS también define 19 colores del sistema, como Canvas, CanvasText, LinkText, Highlight y AccentColor. Su valor depende del navegador, del sistema operativo y del tema claro u oscuro, así que no existe un HEX para ellos. Sirven para que un componente siga el tema de quien lee.

Contraste del texto

La última columna muestra si el texto blanco o el negro se lee mejor sobre cada color, con la razón de contraste de la fórmula de WCAG 2. WCAG pide al menos 4,5 a 1 para texto normal y 3 a 1 para texto grande. El texto blanco sobre yellow da solo 1,07 a 1, y el negro llega a 19,56 a 1.

Comprobar el contraste de cualquier par de colores

Fuentes

Comprobadas el 5 de noviembre de 2026:

• W3C, CSS Color Module Level 4: named colors
• MDN: el tipo de dato named-color
• W3C, WCAG 2.1: definición de razón de contraste