Nombres de colores HTML: los 148 con HEX, RGB, HSL y OKLCH | We.Inc
Los 148 nombres de colores CSS y HTML con códigos HEX, RGB, HSL y OKLCH, contraste sobre blanco y negro, la clase Tailwind más cercana y orden por tono, luminosidad o familia.
Nombres de colores HTML
CSS define 148 nombres de colores, de aliceblue a yellowgreen, y todos los navegadores los entienden en HTML y CSS. Nueve son una segunda grafía de otro nombre, como grey para gray y cyan para aqua, así que hay 139 colores distintos. La tabla de abajo muestra para cada uno sus valores HEX, RGB, HSL y OKLCH, el contraste del texto y la clase Tailwind más cercana.
Datos sobre los colores con nombre
Pregunta
Respuesta
¿Cuántos nombres hay?
148 (139 colores distintos)
¿Distingue mayúsculas?
No: Red, RED y red son lo mismo
¿Dónde se definen?
CSS Color Module Level 4
Nombre más reciente
rebeccapurple (#663399), añadido en 2014
Busca por nombre o HEX, filtra por familia de color, ordena por tono, luminosidad o nombre, y copia cualquier valor con un clic. Cada fila indica además si el texto negro o blanco se lee bien sobre ese color y qué color de Tailwind es el más cercano.
Escribe parte de un nombre o un código HEX en el buscador para filtrar la tabla.
Elige una familia, como Azul o Marrón, para ver solo esos colores. Las familias se agrupan por tono percibido.
Ordena por nombre, por tono (para ver los colores como un espectro) o por luminosidad (de oscuro a claro).
Haz clic en cualquier valor para copiarlo. Las columnas de contraste muestran la relación para texto blanco y para texto negro sobre ese color.
Los colores con nombre son prácticos para prototipos y ejemplos, pero un diseño real suele necesitar los valores exactos de la marca. Cambia los nombres por HEX o custom properties antes del lanzamiento.
Algunos nombres engañan: darkgray (#A9A9A9) es más claro que gray (#808080), y lightgoldenrodyellow es un crema pálido más que un amarillo.
Usa transparent y currentColor junto a los nombres. También son palabras clave de CSS, pero no forman parte de los 148 porque no son colores fijos.
Comprueba el contraste antes de usar un color con nombre para texto. Muchos de los brillantes, como yellow, gold y lime, no pasan sobre un fondo blanco.
Preguntas frecuentes
¿Cuántos nombres de colores HTML hay?
Hay 148 colores con nombre en CSS Color Module Level 4, que es lo que usa HTML. Nueve pares son alias del mismo color: aqua y cyan, fuchsia y magenta, y siete nombres que se pueden escribir con gray o grey, como darkgray y darkgrey. Así que la lista describe 139 colores distintos.
¿Los nombres de colores funcionan en todos los navegadores?
Sí. Todos los navegadores actuales admiten los 148 nombres. Los 16 nombres originales de HTML 4, como red, navy y teal, funcionan desde hace décadas; el resto viene de la lista de colores de X11 y también tiene soporte desde hace mucho.
¿Por qué darkgray es más claro que gray?
Los nombres vienen de dos fuentes distintas. gray se definió en HTML con un 50% de luminosidad (#808080), mientras que darkgray venía de la lista de colores de X11, más antigua, donde era #A9A9A9. Al unir las listas se mantuvieron ambos valores tal cual.
¿Qué es rebeccapurple?
Es #663399, añadido a CSS en 2014 en memoria de Rebecca Meyer, hija del autor de CSS Eric Meyer. Es el nombre de color más reciente añadido a CSS.
¿Uso nombres de colores o códigos HEX?
Para el diseño en producción usa valores HEX, RGB, HSL u OKLCH, idealmente guardados como custom properties, porque los nombres solo cubren 148 puntos fijos. Los nombres sirven para pruebas rápidas, documentación y enseñanza, donde la legibilidad importa más que la precisión.
De dónde vienen los nombres
HTML 4 definió 16 nombres de colores básicos: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal y aqua. Los navegadores también habían adoptado una lista mucho más larga del X Window System, y CSS3 la hizo oficial. CSS Color Level 4 añade rebeccapurple y deja el resto sin cambios.
Como los nombres de X11 los eligieron personas y no una fórmula, son irregulares. Hay muchos casi blancos y varios verdes casi idénticos, mientras que algunos tonos no tienen ningún nombre. Ordenar la tabla por tono deja ver los huecos con claridad.
Cómo leer las columnas extra
OKLCH describe un color por su luminosidad, su croma (cuánto color tiene) y su tono, en un espacio diseñado para que pasos iguales se vean iguales. Es útil para crear paletas a partir de un color con nombre, porque si cambias solo la luminosidad el tono se sigue viendo igual.
Las columnas de contraste usan la fórmula de WCAG 2. Se necesita 4.5:1 o más para el texto normal y 3:1 para el texto grande. La columna de Tailwind indica la clase de la paleta por defecto de Tailwind que más se parece, con una cifra de diferencia: por debajo de 2 cuesta distinguirlos.
Nombre
HEX
RGB
HSL
OKLCH
Sobre blanco
Sobre negro
Tailwind más cercano
Rojo
Rosa
Naranja
Amarillo
Marrón
Verde
Cian
Azul
Morado
Blanco
Negro y gris
Copiar
Los 148 de un vistazo, por tono
Los 148 nombres de colores
Buscar nombre o HEX
Ordenar por
Nombre
Tono (espectro)
Luminosidad (de oscuro a claro)
{n} visibles
· Copiado {v}
Familia de color
Todos
Colores con nombre de CSS y HTML
Muestra
diferencia {d}
Las cifras de contraste en verde cumplen 4.5:1, suficiente para texto normal. La muestra Aa usa el negro o el blanco, el que se lea mejor.