Nombres de colores CSS: Guía de referencia completa

Los colores son el alma del diseño web. Aunque la mayoría de los desarrolladores utilizan códigos HEX o valores RGB para mayor precisión, los nombres de colores CSS ofrecen una forma legible para los humanos de aplicar estilos rápidamente. Los navegadores modernos admiten más de 140 colores con nombre, desde los comunes como Red (rojo) y Blue (azul) hasta nombres más exóticos como AliceBlue o PapayaWhip.

Esta guía proporciona una referencia completa y buscable de cada color con nombre en CSS, categorizada por tono para ayudarte a encontrar la sombra perfecta para tu proyecto.

1. Referencia rápida: Los 16 colores básicos

Estos son los colores originales definidos en la especificación HTML 4.01 y son compatibles con todos los navegadores y dispositivos.

Nombre del color	HEX	RGB
White (Blanco)	`#FFFFFF`	`(255, 255, 255)`
Silver (Plata)	`#C0C0C0`	`(192, 192, 192)`
Gray (Gris)	`#808080`	`(128, 128, 128)`
Black (Negro)	`#000000`	`(0, 0, 0)`
Red (Rojo)	`#FF0000`	`(255, 0, 0)`
Maroon (Granate)	`#800000`	`(128, 0, 0)`
Yellow (Amarillo)	`#FFFF00`	`(255, 255, 0)`
Olive (Oliva)	`#808000`	`(128, 128, 0)`
Lime (Lima)	`#00FF00`	`(0, 255, 0)`
Green (Verde)	`#008000`	`(0, 128, 0)`
Aqua (Agua)	`#00FFFF`	`(0, 255, 255)`
Teal (Cerceta)	`#008080`	`(0, 128, 128)`
Blue (Azul)	`#0000FF`	`(0, 0, 255)`
Navy (Marina)	`#000080`	`(0, 0, 128)`
Fuchsia (Fucsia)	`#FF00FF`	`(255, 0, 255)`
Purple (Púrpura)	`#800080`	`(128, 0, 128)`

2. Lista completa de más de 140 colores CSS

A continuación se muestra el conjunto completo de colores extendidos compatibles con los navegadores modernos (SVG 1.0/CSS3).

Colores Rosas (Pink Colors)

Nombre	HEX	RGB	Categoría
Pink	`#FFC0CB`	`(255, 192, 203)`	Rosa
LightPink	`#FFB6C1`	`(255, 182, 193)`	Rosa
HotPink	`#FF69B4`	`(255, 105, 180)`	Rosa
DeepPink	`#FF1493`	`(255, 20, 147)`	Rosa
PaleVioletRed	`#DB7093`	`(219, 112, 147)`	Rosa
MediumVioletRed	`#C71585`	`(199, 21, 133)`	Rosa

Colores Rojos (Red Colors)

Nombre	HEX	RGB	Categoría
LightSalmon	`#FFA07A`	`(255, 160, 122)`	Rojo
Salmon	`#FA8072`	`(250, 128, 114)`	Rojo
DarkSalmon	`#E9967A`	`(233, 150, 122)`	Rojo
LightCoral	`#F08080`	`(240, 128, 128)`	Rojo
IndianRed	`#CD5C5C`	`(205, 92, 92)`	Rojo
Crimson	`#DC143C`	`(220, 20, 60)`	Rojo
FireBrick	`#B22222`	`(178, 34, 34)`	Rojo
DarkRed	`#8B0000`	`(139, 0, 0)`	Rojo
Red	`#FF0000`	`(255, 0, 0)`	Rojo

Colores Naranjas (Orange Colors)

Nombre	HEX	RGB	Categoría
Orange	`#FFA500`	`(255, 165, 0)`	Naranja
DarkOrange	`#FF8C00`	`(255, 140, 0)`	Naranja
Coral	`#FF7F50`	`(255, 127, 80)`	Naranja
Tomato	`#FF6347`	`(255, 99, 71)`	Naranja
OrangeRed	`#FF4500`	`(255, 69, 0)`	Naranja

Colores Amarillos (Yellow Colors)

Nombre	HEX	RGB	Categoría
Yellow	`#FFFF00`	`(255, 255, 0)`	Amarillo
LightYellow	`#FFFFE0`	`(255, 255, 224)`	Amarillo
LemonChiffon	`#FFFACD`	`(255, 250, 205)`	Amarillo
LightGoldenRodYellow	`#FAFAD2`	`(250, 250, 210)`	Amarillo
PapayaWhip	`#FFEFD5`	`(255, 239, 213)`	Amarillo
Moccasin	`#FFE4B5`	`(255, 228, 181)`	Amarillo
PeachPuff	`#FFDAB9`	`(255, 218, 185)`	Amarillo
PaleGoldenRod	`#EEE8AA`	`(238, 232, 170)`	Amarillo
Khaki	`#F0E68C"	`(240, 230, 140)`	Amarillo
DarkKhaki	`#BDB76B"	`(189, 183, 107)`	Amarillo
Gold	`#FFD700`	`(255, 215, 0)`	Amarillo

Colores Marrones (Brown Colors)

Nombre	HEX	RGB	Categoría
Cornsilk	`#FFF8DC`	`(255, 248, 220)`	Marrón
BlanchedAlmond	`#FFEBCD`	`(255, 235, 205)`	Marrón
Bisque	`#FFE4C4`	`(255, 228, 196)`	Marrón
NavajoWhite	`#FFDEAD`	`(255, 222, 173)`	Marrón
Wheat	`#F5DEB3`	`(245, 222, 179)`	Marrón
BurlyWood	`#DEB887`	`(222, 184, 135)`	Marrón
Tan	`#D2B48C`	`(210, 180, 140)`	Marrón
RosyBrown	`#BC8F8F`	`(188, 143, 143)`	Marrón
SandyBrown	`#F4A460`	`(244, 164, 96)`	Marrón
GoldenRod	`#DAA520`	`(218, 165, 32)`	Marrón
Peru	`#CD853F`	`(205, 133, 63)`	Marrón
Chocolate	`#D2691E`	`(210, 105, 30)`	Marrón
SaddleBrown	`#8B4513`	`(139, 69, 19)`	Marrón
Sienna	`#A0522D`	`(160, 82, 45)`	Marrón
Brown	`#A52A2A`	`(165, 42, 42)`	Marrón
Maroon	`#800000`	`(128, 0, 0)`	Marrón

Colores Verdes (Green Colors)

Nombre	HEX	RGB	Categoría
DarkOliveGreen	`#556B2F`	`(85, 107, 47)`	Verde
Olive	`#808000`	`(128, 128, 0)`	Verde
OliveDrab	`#6B8E23`	`(107, 142, 35)`	Verde
YellowGreen	`#9ACD32`	`(154, 205, 50)`	Verde
LimeGreen	`#32CD32`	`(50, 205, 50)`	Verde
Lime	`#00FF00`	`(0, 255, 0)`	Verde
LawnGreen	`#7CFC00`	`(124, 252, 0)`	Verde
Chartreuse	`#7FFF00`	`(127, 255, 0)`	Verde
GreenYellow	`#ADFF2F`	`(173, 255, 47)`	Verde
SpringGreen	`#00FF7F`	`(0, 255, 127)`	Verde
MediumSpringGreen	`#00FA9A`	`(0, 250, 154)`	Verde
LightGreen	`#90EE90`	`(144, 238, 144)`	Verde
PaleGreen	`#98FB98`	`(152, 251, 152)`	Verde
DarkSeaGreen	`#8FBC8F`	`(143, 188, 143)`	Verde
MediumSeaGreen	`#3CB371`	`(60, 179, 113)`	Verde
SeaGreen	`#2E8B57`	`(46, 139, 87)`	Verde
ForestGreen	`#228B22`	`(34, 139, 34)`	Verde
Green	`#008000`	`(0, 128, 0)`	Verde
DarkGreen	`#006400`	`(0, 100, 0)`	Verde

Colores Cian y Cerceta (Cyan and Teal Colors)

Nombre	HEX	RGB	Categoría
Aqua	`#00FFFF`	`(0, 255, 255)`	Cian
Cyan	`#00FFFF`	`(0, 255, 255)`	Cian
LightCyan	`#E0FFFF`	`(224, 255, 255)`	Cian
PaleTurquoise	`#AFEEEE`	`(175, 238, 238)`	Cian
Aquamarine	`#7FFFD4`	`(127, 255, 212)`	Cian
Turquoise	`#40E0D0`	`(64, 224, 208)`	Cian
MediumTurquoise	`#48D1CC`	`(72, 209, 204)`	Cian
DarkTurquoise	`#00CED1`	`(0, 206, 209)`	Cian
LightSeaGreen	`#20B2AA`	`(32, 178, 170)`	Cian
CadetBlue	`#5F9EA0`	`(95, 158, 160)`	Cian
DarkCyan	`#008B8B`	`(0, 139, 139)`	Cian
Teal	`#008080`	`(0, 128, 128)`	Cian

Colores Azules (Blue Colors)

Nombre	HEX	RGB	Categoría
LightSteelBlue	`#B0C4DE`	`(176, 196, 222)`	Azul
PowderBlue	`#B0E0E6`	`(176, 224, 230)`	Azul
LightBlue	`#ADD8E6`	`(173, 216, 230)`	Azul
SkyBlue	`#87CEEB`	`(135, 206, 235)`	Azul
LightSkyBlue	`#87CEFA`	`(135, 206, 250)`	Azul
DeepSkyBlue	`#00BFFF`	`(0, 191, 255)`	Azul
DodgerBlue	`#1E90FF`	`(30, 144, 255)`	Azul
CornflowerBlue	`#6495ED`	`(100, 149, 237)`	Azul
MediumSlateBlue	`#7B68EE`	`(123, 104, 238)`	Azul
RoyalBlue	`#4169E1`	`(65, 105, 225)`	Azul
Blue	`#0000FF`	`(0, 0, 255)`	Azul
MediumBlue	`#0000CD`	`(0, 0, 205)`	Azul
DarkBlue	`#00008B`	`(0, 0, 139)`	Azul
Navy	`#000080`	`(0, 0, 128)`	Azul
MidnightBlue	`#191970`	`(25, 25, 112)`	Azul

Colores Púrpuras y Violetas (Purple and Violet Colors)

Nombre	HEX	RGB	Categoría
Lavender	`#E6E6FA`	`(230, 230, 250)`	Púrpura
Thistle	`#D8BFD8`	`(216, 191, 216)`	Púrpura
Plum	`#DDA0DD`	`(221, 160, 221)`	Púrpura
Violet	`#EE82EE`	`(238, 130, 238)`	Púrpura
Orchid	`#DA70D6`	`(218, 112, 214)`	Púrpura
Fuchsia	`#FF00FF`	`(255, 0, 255)`	Púrpura
Magenta	`#FF00FF`	`(255, 0, 255)`	Púrpura
MediumOrchid	`#BA55D3`	`(186, 85, 211)`	Púrpura
MediumPurple	`#9370DB`	`(147, 112, 219)`	Púrpura
BlueViolet	`#8A2BE2`	`(138, 43, 226)`	Púrpura
DarkViolet	`#9400D3`	`(148, 0, 211)`	Púrpura
DarkOrchid	`#9932CC`	`(153, 50, 204)`	Púrpura
DarkMagenta	`#8B008B`	`(139, 0, 139)`	Púrpura
Purple	`#800080`	`(128, 0, 128)`	Púrpura
Indigo	`#4B0082`	`(75, 0, 130)`	Púrpura
DarkSlateBlue	`#483D8B`	`(72, 61, 139)`	Púrpura
SlateBlue	`#6A5ACD`	`(106, 90, 205)`	Púrpura
RebeccaPurple	`#663399`	`(102, 51, 153)`	Púrpura

Colores Blancos (White and Off-White Colors)

Nombre	HEX	RGB	Categoría
White	`#FFFFFF`	`(255, 255, 255)`	Blanco
Snow	`#FFFAFA`	`(255, 250, 250)`	Blanco
HoneyDew	`#F0FFF0`	`(240, 255, 240)`	Blanco
MintCream	`#F5FFFA`	`(245, 255, 250)`	Blanco
Azure	`#F0FFFF`	`(240, 255, 255)`	Blanco
AliceBlue	`#F0F8FF`	`(240, 248, 255)`	Blanco
GhostWhite	`#F8F8FF`	`(248, 248, 255)`	Blanco
WhiteSmoke	`#F5F5F5`	`(245, 245, 245)`	Blanco
SeaShell	`#FFF5EE`	`(255, 245, 238)`	Blanco
Beige	`#F5F5DC`	`(245, 245, 220)`	Blanco
OldLace	`#FDF5E6`	`(253, 245, 230)`	Blanco
FloralWhite	`#FFFAF0"	`(255, 250, 240)`	Blanco
Ivory	`#FFFFF0`	`(255, 255, 240)`	Blanco
AntiqueWhite	`#FAEBD7`	`(250, 235, 215)`	Blanco
Linen	`#FAF0E6`	`(250, 240, 230)`	Blanco
MistyRose	`#FFE4E1`	`(255, 228, 225)`	Blanco
LavenderBlush	`#FFF0F5`	`(255, 240, 245)`	Blanco

Colores Grises y Negros (Gray and Black Colors)

Nombre	HEX	RGB	Categoría
Gainsboro	`#DCDCDC`	`(220, 220, 220)`	Gris
LightGray	`#D3D3D3`	`(211, 211, 211)`	Gris
LightGrey	`#D3D3D3`	`(211, 211, 211)`	Gris
Silver	`#C0C0C0`	`(192, 192, 192)`	Gris
DarkGray	`#A9A9A9`	`(169, 169, 169)`	Gris
DarkGrey	`#A9A9A9`	`(169, 169, 169)`	Gris
Gray	`#808080`	`(128, 128, 128)`	Gris
Grey	`#808080"	`(128, 128, 128)`	Gris
DimGray	`#696969`	`(105, 105, 105)`	Gris
DimGrey	`#696969"	`(105, 105, 105)`	Gris
LightSlateGray	`#778899`	`(119, 136, 153)`	Gris
LightSlateGrey	`#778899"	`(119, 136, 153)`	Gris
SlateGray	`#708090`	`(112, 128, 144)`	Gris
SlateGrey	`#708090"	`(112, 128, 144)`	Gris
DarkSlateGray	`#2F4F4F`	`(47, 79, 79)`	Gris
DarkSlateGrey	`#2F4F4F"	`(47, 79, 79)`	Gris
Black	`#000000`	`(0, 0, 0)`	Gris

3. Cómo usar los nombres de colores CSS

Usar estos nombres en tu código es sencillo. Se pueden aplicar a cualquier propiedad que acepte un valor <color>.

Propiedades CSS estándar

/* Usando el nombre para el color del texto */
h1 {
  color: Crimson;
}

/* Usando el nombre para el fondo */
.alert {
  background-color: PapayaWhip;
  border: 1px solid OrangeRed;
}

Propiedades SVG

Los nombres de colores CSS también funcionan perfectamente con los atributos SVG:

<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />

La palabra clave 'currentColor'

currentColor es un valor especial que hereda el valor de la propiedad color del elemento.

div {
  color: SeaGreen;
  border: 2px solid currentColor; /* El borde también será SeaGreen */
}

4. Preguntas frecuentes (FAQ)

P: ¿Los nombres de colores CSS distinguen entre mayúsculas y minúsculas?

R: No. Puedes escribir AliceBlue, aliceblue o incluso ALICEBLUE. Todos se tratan como el mismo color. Sin embargo, CamelCase (como AliceBlue) es preferido por muchos desarrolladores por legibilidad.

P: ¿Qué nombres de colores son "seguros para la web"?

R: Los "colores seguros para la web" son una reliquia del pasado cuando los monitores solo admitían 256 colores. Hoy en día, todos los más de 140 colores con nombre de CSS son seguros de usar en cualquier dispositivo moderno.

P: ¿Por qué usar un nombre de color en lugar de un código HEX?

R: Los nombres de colores son mucho más fáciles de recordar y hacen que tu código sea más legible. background-color: White se entiende instantáneamente, mientras que #FFFFFF requiere un pequeño esfuerzo mental de traducción. Sin embargo, para colores de marca precisos, HEX, RGB o HSL siguen siendo las mejores opciones.

P: ¿Hay nombres duplicados?

R: Sí. Aqua y Cyan son exactamente iguales (#00FFFF), y Fuchsia y Magenta son iguales (#FF00FF). Además, muchos colores grises tienen las ortografías "Gray" y "Grey" (por ejemplo, DarkGray y DarkGrey).

P: ¿Cómo manejo los problemas de contraste?

R: Al usar colores con nombre, asegúrate siempre de que haya suficiente contraste entre el texto y el fondo. Por ejemplo, el texto Yellow sobre un fondo White es casi imposible de leer y no cumple con los estándares de accesibilidad (WCAG).

Herramientas relacionadas en Tool3M

Convertidor de color: Convierte estos colores con nombre a formatos HEX, RGB, HSL o CMYK al instante.
Imagen a Base64: Convierte imágenes a cadenas Base64 para usarlas en CSS/HTML.

Nombres de colores CSS: Guía de referencia completa con HEX y RGB