Tabla de colores HTML: nombres, hex y RGB

Cómo se lee la tabla

Cada fila da el mismo color en las tres notaciones que vas a necesitar. Las cuatro columnas de abajo son intercambiables en una hoja de estilos y el navegador las trata igual.

Los valores HSL de las tablas están redondeados a grados y puntos porcentuales enteros, que es como se escriben normalmente. Al convertirlos de vuelta a RGB quedan a menos de una unidad de los bytes exactos, así que si necesitas coincidencia exacta usa la columna hex o la RGB.

Los dieciséis originales

Estos dieciséis vienen de la paleta VGA, pasaron al HTML y son las únicas palabras clave de color que funcionan incluso en los navegadores más viejos. Los otros 132 nombres llegaron después, de la paleta X11 de los sistemas Unix.

Rosados

Seis nombres, todos en el arco que va del magenta al rojo. mediumvioletred es el más oscuro y pink el más pálido.

Rojos

Nueve rojos, desde darkred hasta el lightsalmon pálido, pasando por el rojo puro de la paleta original.

Naranjas

Solo hay cinco nombres en la franja naranja, y por eso tantos diseños terminan usando aquí un valor hexadecimal en vez de un nombre.

Amarillos

Los amarillos se van hacia los caquis y las cremas. Varios son mucho más pálidos de lo que sugiere el nombre: lightyellow es casi blanco.

Marrones y tierras

El grupo cálido más grande. maroon y olive vienen de los dieciséis originales; el resto llegó con la paleta X11.

Verdes

Veinte verdes, con el par que más confunde: green es el oscuro original, #008000, mientras que lime es el brillante a intensidad completa, #00ff00.

Cianes y turquesas

aqua y cyan son dos nombres del mismo color. El resto va desde el teal muy oscuro hasta el lightcyan casi blanco.

Azules

Quince azules, de navy a powderblue. cornflowerblue y dodgerblue son los dos que se usan muchísimo más allá de su propósito original.

Morados, violetas y magentas

Diecinueve nombres, incluido rebeccapurple, que se agregó a la especificación en memoria de la hija del desarrollador web Eric Meyer y es el único color con nombre que lleva una dedicatoria detrás.

Blancos y casi blancos

Diecisiete nombres que están todos a pocos puntos porcentuales del blanco. Sirven de fondo de página y son casi imposibles de distinguir sin una muestra al lado.

Grises y negro

La rampa neutra que va del negro a gainsboro. Siete de estos tienen grafía con gray y con grey, y aquí aparecen como filas separadas porque ambas son CSS válido.

Nueve pares de nombres que son el mismo color

Hay 148 palabras clave pero solo 139 colores distintos, porque nueve pares son duplicados exactos. Siete son la grafía británica y la estadounidense de grey; los otros dos son remanentes de los dieciséis originales.

Lo que la tabla no dice

1. transparent y currentcolor parecen palabras clave de color pero no están en esta lista. La especificación las define aparte: transparent equivale a rgb(0 0 0 / 0) y currentcolor toma el valor que tenga en ese momento la propiedad color del elemento.
2. Ninguna de las 148 palabras clave lleva canal alfa. Para transparencia necesitas rgb(255 99 71 / 50%), hsl() con barra, o la forma hexadecimal de ocho dígitos #ff634780.
3. Los nombres son históricos, no sistemáticos. darkgray (#a9a9a9) es más claro que gray (#808080), y green no es el verde más brillante: ese es lime. Elegir una palabra clave porque suena bien te va a sorprender; mira siempre la muestra.
4. Estas palabras clave se resuelven en el espacio de color sRGB. Si trabajas en display-p3 o en oklch, un color con nombre sigue siendo sRGB y no alcanza la gama más amplia.

Convertir un color que no está en esta lista

Esta tabla cubre el conjunto finito de nombres que define la especificación de CSS. Para todo lo demás —un hexadecimal de un manual de marca, un RGB sacado de una captura, un HSL que quieres ajustar— usa el convertidor de colores de este sitio. Convierte entre hex, RGB, HSL y colores con nombre en todas las direcciones, muestra una muestra en vivo y corre completo en tu navegador, así que nada de lo que pegues sale de tu equipo.