Códigos de color

Códigos de color es la lista completa de los 148 nombres de color que entiende CSS, cada uno con su código hex, RGB y HSL y su contraste contra blanco y negro. Busca por nombre o pega un valor hex para averiguar cómo se llama un color, filtra por familia y ordena por tono o luminosidad para ver todo el conjunto organizado como lo lee el ojo y no alfabéticamente.

Solo local

Buscar por nombre o código hexadecimal

Ordenar

148 de 148 colores

Nombres de colores CSS con sus códigos hexadecimales, RGB y HSL y sus relaciones de contraste
Nombre	Sobre blanco	Sobre negro
aliceblue	1.07	19.58
antiquewhite	1.17	17.93
aqua	1.25	16.75
aquamarine	1.22	17.16
azure	1.03	20.45
beige	1.11	18.98
bisque	1.22	17.15
black	21.00	1.00
blanchedalmond	1.17	18.02
blue	8.59	2.44
blueviolet	5.96	3.52
brown	7.08	2.96
burlywood	1.86	11.31
cadetblue	3.05	6.88
chartreuse	1.30	16.21
chocolate	3.63	5.78
coral	2.50	8.40
cornflowerblue	2.97	7.06
cornsilk	1.07	19.71
crimson	4.99	4.21
cyan	1.25	16.75
darkblue	15.30	1.37
darkcyan	4.15	5.07
darkgoldenrod	3.25	6.45
darkgray	2.35	8.94
darkgreen	7.44	2.82
darkgrey	2.35	8.94
darkkhaki	2.07	10.15
darkmagenta	8.50	2.47
darkolivegreen	5.95	3.53
darkorange	2.33	9.00
darkorchid	5.70	3.68
darkred	10.01	2.10
darksalmon	2.31	9.11
darkseagreen	2.15	9.76
darkslateblue	9.07	2.32
darkslategray	8.93	2.35
darkslategrey	8.93	2.35
darkturquoise	1.95	10.75
darkviolet	6.56	3.20
deeppink	3.64	5.77
deepskyblue	2.12	9.90
dimgray	5.49	3.83
dimgrey	5.49	3.83
dodgerblue	3.24	6.49
firebrick	6.68	3.14
floralwhite	1.04	20.18
forestgreen	4.39	4.78
fuchsia	3.14	6.70
gainsboro	1.37	15.31
ghostwhite	1.06	19.86
gold	1.40	14.97
goldenrod	2.24	9.38
gray	3.95	5.32
green	5.14	4.09
greenyellow	1.23	17.12
grey	3.95	5.32
honeydew	1.04	20.27
hotpink	2.65	7.93
indianred	3.98	5.28
indigo	12.95	1.62
ivory	1.01	20.81
khaki	1.28	16.40
lavender	1.23	17.06
lavenderblush	1.10	19.03
lawngreen	1.33	15.78
lemonchiffon	1.06	19.81
lightblue	1.53	13.74
lightcoral	2.59	8.10
lightcyan	1.05	19.92
lightgoldenrodyellow	1.07	19.67
lightgray	1.50	14.03
lightgreen	1.42	14.82
lightgrey	1.50	14.03
lightpink	1.65	12.71
lightsalmon	1.99	10.56
lightseagreen	2.62	8.01
lightskyblue	1.72	12.24
lightslategray	3.64	5.77
lightslategrey	3.64	5.77
lightsteelblue	1.78	11.80
lightyellow	1.02	20.63
lime	1.37	15.30
limegreen	2.12	9.91
linen	1.12	18.67
magenta	3.14	6.70
maroon	10.95	1.92
mediumaquamarine	1.93	10.88
mediumblue	11.16	1.88
mediumorchid	3.94	5.33
mediumpurple	3.76	5.58
mediumseagreen	2.67	7.88
mediumslateblue	4.15	5.06
mediumspringgreen	1.39	15.14
mediumturquoise	1.86	11.27
mediumvioletred	5.42	3.87
midnightblue	14.85	1.41
mintcream	1.02	20.57
mistyrose	1.20	17.44
moccasin	1.23	17.02
navajowhite	1.29	16.30
navy	16.01	1.31
oldlace	1.08	19.38
olive	4.20	5.01
olivedrab	3.81	5.52
orange	1.97	10.63
orangered	3.44	6.10
orchid	2.89	7.27
palegoldenrod	1.25	16.76
palegreen	1.27	16.59
paleturquoise	1.29	16.29
palevioletred	3.11	6.75
papayawhip	1.13	18.56
peachpuff	1.31	15.98
peru	2.99	7.02
pink	1.54	13.65
plum	2.07	10.15
powderblue	1.43	14.65
purple	9.42	2.23
rebeccapurple	8.41	2.50
red	4.00	5.25
rosybrown	2.81	7.46
royalblue	4.85	4.33
saddlebrown	7.10	2.96
salmon	2.50	8.40
sandybrown	2.03	10.33
seagreen	4.25	4.95
seashell	1.07	19.55
sienna	5.62	3.74
silver	1.82	11.54
skyblue	1.74	12.06
slateblue	5.31	3.96
slategray	4.05	5.18
slategrey	4.05	5.18
snow	1.03	20.31
springgreen	1.35	15.61
steelblue	4.11	5.11
tan	1.97	10.65
teal	4.77	4.40
thistle	1.70	12.36
tomato	2.95	7.13
turquoise	1.64	12.79
violet	2.32	9.06
wheat	1.31	15.98
white	1.00	21.00
whitesmoke	1.09	19.26
yellow	1.07	19.56
yellowgreen	1.88	11.15

¿Cómo funciona Códigos de color?

CSS tiene 148 palabras clave de color. No son un sistema — se fueron acumulando. Dieciséis vinieron de la paleta original de HTML 4, que a su vez venía de las dieciséis de VGA. Otros 130 llegaron del sistema de ventanas X11 y su rgb.txt, un archivo armado en el MIT a lo largo de los años ochenta por gente que nombraba colores según los necesitaba. Por eso existe tanto gray como grey, por eso darkgray es más claro que gray, y por eso rebeccapurple — añadido en 2014 en memoria de la hija de Eric Meyer — es el único con una historia.

Por qué darkgray es más claro que gray

gray es #808080, el punto medio de la paleta de HTML 4. darkgray es #a9a9a9, que es más claro. Vinieron de fuentes distintas y nunca se reconciliaron, porque para cuando alguien se fijó, cambiar cualquiera de los dos habría roto todas las páginas que lo usaban. Es la forma más fiable de cazar una herramienta de color que generó su tabla en lugar de leer la especificación.

Ordenar por tono y no por nombre

El orden alfabético es inútil para elegir un color y perfecto para encontrar uno que ya sabes nombrar. Ordenar por tono pone la lista en el orden que el ojo espera — los rojos juntos, después los naranjas, y así alrededor de la rueda —, que es la vista que responde a “¿qué más hay cerca de esto?”. El tono usado es el ángulo de OKLCh, no el de HSL, así que las agrupaciones coinciden con cómo se ven los colores y no con lo que dice la aritmética.

Las columnas de contraste

Cada fila lleva su ratio WCAG 2.x contra blanco y contra negro. Ese es el número que decide si el color puede sostener texto, y es la forma más rápida de descartar la mayor parte de esta lista para cualquier cosa que no sea decoración: de los 148, menos de la mitad alcanza 4.5:1 sobre blanco.

Un nombre o un valor hex

navy

Todos sus códigos

hex        #000080
rgb        rgb(0 0 128)
hsl        hsl(240 100% 25.1%)
on white   16.01 : 1
on black   1.31 : 1

¿Qué opciones y casos límite admite Códigos de color?

Referencia técnica y opciones
Parámetro	Tipo	Valor predeterminado	Comportamiento y casos límite
148	recuento	CSS Color 4	El número de colores con nombre, contando los grises escritos de ambas formas como palabras clave separadas. 147 es la cifra que suele citarse, de antes de que se añadiera rebeccapurple.
gray / grey	alias	ambas válidas	Cada palabra clave gris existe en ambas ortografías y son valores idénticos. CSS acepta cualquiera de las dos, siempre lo ha hecho.
darkgray	#a9a9a9	—	Más claro que gray (#808080). Un artefacto de la fusión de las paletas HTML 4 y X11, conservado porque cambiarlo rompería páginas existentes.
rebeccapurple	#663399	2014	La única palabra clave añadida desde la importación de X11, en memoria de Rebecca Meyer. Un alias del valor que su padre usaba para ella.
aqua / cyan	#00ffff	idéntico	Mismo valor, dos nombres, como fuchsia y magenta. Ambos pares sobrevivieron de las dos paletas de origen.
transparent	palabra clave	rgba(0,0,0,0)	Válido dondequiera que haya un color, y no está en esta lista porque no tiene valor que buscar.
Contraste	ratio	vs #fff / #000	Ratio WCAG 2.x. 4.5:1 es el mínimo para texto normal; menos de la mitad de estas palabras clave alcanzan este ratio sobre blanco.
Ordenación por tono	OKLCh	grados	Ordenado por ángulo de tono perceptivo, no por HSL — por eso el rojo queda en 29° aquí en lugar de 0°.

Preguntas frecuentes

¿Cuál es el código hex del rojo?

#FF0000, que es rgb(255 0 0) y hsl(0 100% 50%). Es una de las dieciséis palabras clave originales de HTML 4. Dato útil: el #FF0000 puro es un rojo muy saturado que vibra sobre blanco y cuesta leer como texto — apenas llega a 4.0:1 sobre blanco, lo que suspende el WCAG AA para texto corrido. La mayoría de las interfaces quieren algo más cercano a #C62828 o más oscuro.

¿Cuál es el código hex del azul marino?

#000080. Esa es la palabra clave navy de CSS: rgb(0 0 128), azul exactamente a media intensidad. Es muy oscuro — 16.0:1 contra blanco —, lo que lo hace excelente para texto sobre un fondo claro y casi ilegible sobre uno oscuro. El azul marino más claro que usan la mayoría de las paletas de marca suele rondar #1B3A6B en lugar de la palabra clave.

¿Por qué darkgray es más claro que gray?

Porque vinieron de sitios distintos. gray es #808080, de la paleta de HTML 4; darkgray es #A9A9A9, del rgb.txt de X11. Cuando CSS fusionó las dos listas a finales de los noventa, el conflicto ya estaba publicado en los navegadores, así que se conservó en lugar de corregirse. Es la mejor prueba que existe de si una referencia de color se copió de la especificación o la generó la suposición de alguien.

¿Cuántos nombres de color tiene CSS?

148 palabras clave, o 139 valores de color distintos — la diferencia son los grises escritos de dos formas y los pares aqua/cyan y fuchsia/magenta. La cifra de 147 que circula es anterior a rebeccapurple, que se añadió a la especificación en 2014.

¿Puedo usar un nombre de color en lugar de un código hex en CSS?

Sí, dondequiera que un color sea válido, y todos los navegadores las han soportado durante dos décadas. El argumento práctico en contra es que los nombres no son un sistema: entre darkblue y blue no hay ninguna relación en la que puedas confiar, ni una escala de luminosidad consistente, ni nada sobre lo que interpolar. Para un sistema de diseño quieres valores que hayas generado tú; para un prototipo rápido o un contorno de depuración, `outline: 2px solid hotpink` se escribe más rápido que cualquier hex.

¿Cómo averiguo cómo se llama un color hex?

Pégalo en el cuadro de búsqueda. El filtro encuentra valores hex además de nombres, así que al introducir #4169e1 aparece royalblue. Si el valor no coincide exactamente con una palabra clave no vuelve nada — estos son valores exactos, no los vecinos más cercanos, y una herramienta que te dijera que #4169e2 es 'royalblue' estaría mintiendo sobre un valor que estás a punto de pegar en código.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas