Nombres de colores HTML y CSS
Consulta los 148 colores con nombre que reconocen HTML y CSS, con su código HEX, su valor RGB y una traducción orientativa al español. Busca por nombre en inglés o en español, filtra por familia de color y copia el valor con un clic.
| Muestra | Nombre CSS | HEX | RGB | En español (orientativo) | Copiar |
|---|---|---|---|---|---|
| aliceblue | #F0F8FF | 240, 248, 255 | azul Alicia | ||
| antiquewhite | #FAEBD7 | 250, 235, 215 | blanco antiguo | ||
| aqua | #00FFFF | 0, 255, 255 | agua (cian) | ||
| aquamarine | #7FFFD4 | 127, 255, 212 | aguamarina | ||
| azure | #F0FFFF | 240, 255, 255 | azur claro | ||
| beige | #F5F5DC | 245, 245, 220 | beis | ||
| bisque | #FFE4C4 | 255, 228, 196 | bizcocho | ||
| black | #000000 | 0, 0, 0 | negro | ||
| blanchedalmond | #FFEBCD | 255, 235, 205 | almendra blanqueada | ||
| blue | #0000FF | 0, 0, 255 | azul | ||
| blueviolet | #8A2BE2 | 138, 43, 226 | azul violeta | ||
| brown | #A52A2A | 165, 42, 42 | marrón | ||
| burlywood | #DEB887 | 222, 184, 135 | madera | ||
| cadetblue | #5F9EA0 | 95, 158, 160 | azul cadete | ||
| chartreuse | #7FFF00 | 127, 255, 0 | verde chartreuse | ||
| chocolate | #D2691E | 210, 105, 30 | chocolate | ||
| coral | #FF7F50 | 255, 127, 80 | coral | ||
| cornflowerblue | #6495ED | 100, 149, 237 | azul aciano | ||
| cornsilk | #FFF8DC | 255, 248, 220 | seda de maíz | ||
| crimson | #DC143C | 220, 20, 60 | carmesí | ||
| cyan | #00FFFF | 0, 255, 255 | cian | ||
| darkblue | #00008B | 0, 0, 139 | azul oscuro | ||
| darkcyan | #008B8B | 0, 139, 139 | cian oscuro | ||
| darkgoldenrod | #B8860B | 184, 134, 11 | vara de oro oscuro | ||
| darkgray | #A9A9A9 | 169, 169, 169 | gris oscuro | ||
| darkgreen | #006400 | 0, 100, 0 | verde oscuro | ||
| darkgrey | #A9A9A9 | 169, 169, 169 | gris oscuro | ||
| darkkhaki | #BDB76B | 189, 183, 107 | caqui oscuro | ||
| darkmagenta | #8B008B | 139, 0, 139 | magenta oscuro | ||
| darkolivegreen | #556B2F | 85, 107, 47 | verde oliva oscuro | ||
| darkorange | #FF8C00 | 255, 140, 0 | naranja oscuro | ||
| darkorchid | #9932CC | 153, 50, 204 | orquídea oscuro | ||
| darkred | #8B0000 | 139, 0, 0 | rojo oscuro | ||
| darksalmon | #E9967A | 233, 150, 122 | salmón oscuro | ||
| darkseagreen | #8FBC8F | 143, 188, 143 | verde mar oscuro | ||
| darkslateblue | #483D8B | 72, 61, 139 | azul pizarra oscuro | ||
| darkslategray | #2F4F4F | 47, 79, 79 | gris pizarra oscuro | ||
| darkslategrey | #2F4F4F | 47, 79, 79 | gris pizarra oscuro | ||
| darkturquoise | #00CED1 | 0, 206, 209 | turquesa oscuro | ||
| darkviolet | #9400D3 | 148, 0, 211 | violeta oscuro | ||
| deeppink | #FF1493 | 255, 20, 147 | rosa intenso | ||
| deepskyblue | #00BFFF | 0, 191, 255 | azul cielo intenso | ||
| dimgray | #696969 | 105, 105, 105 | gris tenue | ||
| dimgrey | #696969 | 105, 105, 105 | gris tenue | ||
| dodgerblue | #1E90FF | 30, 144, 255 | azul Dodger | ||
| firebrick | #B22222 | 178, 34, 34 | rojo ladrillo | ||
| floralwhite | #FFFAF0 | 255, 250, 240 | blanco floral | ||
| forestgreen | #228B22 | 34, 139, 34 | verde bosque | ||
| fuchsia | #FF00FF | 255, 0, 255 | fucsia | ||
| gainsboro | #DCDCDC | 220, 220, 220 | gris Gainsboro | ||
| ghostwhite | #F8F8FF | 248, 248, 255 | blanco fantasma | ||
| gold | #FFD700 | 255, 215, 0 | oro | ||
| goldenrod | #DAA520 | 218, 165, 32 | vara de oro | ||
| gray | #808080 | 128, 128, 128 | gris | ||
| green | #008000 | 0, 128, 0 | verde | ||
| greenyellow | #ADFF2F | 173, 255, 47 | verde amarillo | ||
| grey | #808080 | 128, 128, 128 | gris | ||
| honeydew | #F0FFF0 | 240, 255, 240 | melón verde | ||
| hotpink | #FF69B4 | 255, 105, 180 | rosa fuerte | ||
| indianred | #CD5C5C | 205, 92, 92 | rojo indio | ||
| indigo | #4B0082 | 75, 0, 130 | índigo | ||
| ivory | #FFFFF0 | 255, 255, 240 | marfil | ||
| khaki | #F0E68C | 240, 230, 140 | caqui | ||
| lavender | #E6E6FA | 230, 230, 250 | lavanda | ||
| lavenderblush | #FFF0F5 | 255, 240, 245 | rubor lavanda | ||
| lawngreen | #7CFC00 | 124, 252, 0 | verde césped | ||
| lemonchiffon | #FFFACD | 255, 250, 205 | gasa limón | ||
| lightblue | #ADD8E6 | 173, 216, 230 | azul claro | ||
| lightcoral | #F08080 | 240, 128, 128 | coral claro | ||
| lightcyan | #E0FFFF | 224, 255, 255 | cian claro | ||
| lightgoldenrodyellow | #FAFAD2 | 250, 250, 210 | amarillo vara de oro claro | ||
| lightgray | #D3D3D3 | 211, 211, 211 | gris claro | ||
| lightgreen | #90EE90 | 144, 238, 144 | verde claro | ||
| lightgrey | #D3D3D3 | 211, 211, 211 | gris claro | ||
| lightpink | #FFB6C1 | 255, 182, 193 | rosa claro | ||
| lightsalmon | #FFA07A | 255, 160, 122 | salmón claro | ||
| lightseagreen | #20B2AA | 32, 178, 170 | verde mar claro | ||
| lightskyblue | #87CEFA | 135, 206, 250 | azul cielo claro | ||
| lightslategray | #778899 | 119, 136, 153 | gris pizarra claro | ||
| lightslategrey | #778899 | 119, 136, 153 | gris pizarra claro | ||
| lightsteelblue | #B0C4DE | 176, 196, 222 | azul acero claro | ||
| lightyellow | #FFFFE0 | 255, 255, 224 | amarillo claro | ||
| lime | #00FF00 | 0, 255, 0 | lima (verde puro) | ||
| limegreen | #32CD32 | 50, 205, 50 | verde lima | ||
| linen | #FAF0E6 | 250, 240, 230 | lino | ||
| magenta | #FF00FF | 255, 0, 255 | magenta | ||
| maroon | #800000 | 128, 0, 0 | granate | ||
| mediumaquamarine | #66CDAA | 102, 205, 170 | aguamarina medio | ||
| mediumblue | #0000CD | 0, 0, 205 | azul medio | ||
| mediumorchid | #BA55D3 | 186, 85, 211 | orquídea medio | ||
| mediumpurple | #9370DB | 147, 112, 219 | púrpura medio | ||
| mediumseagreen | #3CB371 | 60, 179, 113 | verde mar medio | ||
| mediumslateblue | #7B68EE | 123, 104, 238 | azul pizarra medio | ||
| mediumspringgreen | #00FA9A | 0, 250, 154 | verde primavera medio | ||
| mediumturquoise | #48D1CC | 72, 209, 204 | turquesa medio | ||
| mediumvioletred | #C71585 | 199, 21, 133 | rojo violáceo medio | ||
| midnightblue | #191970 | 25, 25, 112 | azul medianoche | ||
| mintcream | #F5FFFA | 245, 255, 250 | crema de menta | ||
| mistyrose | #FFE4E1 | 255, 228, 225 | rosa brumoso | ||
| moccasin | #FFE4B5 | 255, 228, 181 | mocasín | ||
| navajowhite | #FFDEAD | 255, 222, 173 | blanco navajo | ||
| navy | #000080 | 0, 0, 128 | azul marino | ||
| oldlace | #FDF5E6 | 253, 245, 230 | encaje antiguo | ||
| olive | #808000 | 128, 128, 0 | oliva | ||
| olivedrab | #6B8E23 | 107, 142, 35 | verde oliva apagado | ||
| orange | #FFA500 | 255, 165, 0 | naranja | ||
| orangered | #FF4500 | 255, 69, 0 | rojo anaranjado | ||
| orchid | #DA70D6 | 218, 112, 214 | orquídea | ||
| palegoldenrod | #EEE8AA | 238, 232, 170 | vara de oro pálido | ||
| palegreen | #98FB98 | 152, 251, 152 | verde pálido | ||
| paleturquoise | #AFEEEE | 175, 238, 238 | turquesa pálido | ||
| palevioletred | #DB7093 | 219, 112, 147 | rojo violáceo pálido | ||
| papayawhip | #FFEFD5 | 255, 239, 213 | crema de papaya | ||
| peachpuff | #FFDAB9 | 255, 218, 185 | melocotón | ||
| peru | #CD853F | 205, 133, 63 | Perú (ocre) | ||
| pink | #FFC0CB | 255, 192, 203 | rosa | ||
| plum | #DDA0DD | 221, 160, 221 | ciruela | ||
| powderblue | #B0E0E6 | 176, 224, 230 | azul pólvora | ||
| purple | #800080 | 128, 0, 128 | púrpura | ||
| rebeccapurple | #663399 | 102, 51, 153 | púrpura Rebecca | ||
| red | #FF0000 | 255, 0, 0 | rojo | ||
| rosybrown | #BC8F8F | 188, 143, 143 | marrón rosado | ||
| royalblue | #4169E1 | 65, 105, 225 | azul real | ||
| saddlebrown | #8B4513 | 139, 69, 19 | marrón cuero | ||
| salmon | #FA8072 | 250, 128, 114 | salmón | ||
| sandybrown | #F4A460 | 244, 164, 96 | marrón arena | ||
| seagreen | #2E8B57 | 46, 139, 87 | verde mar | ||
| seashell | #FFF5EE | 255, 245, 238 | concha marina | ||
| sienna | #A0522D | 160, 82, 45 | siena | ||
| silver | #C0C0C0 | 192, 192, 192 | plata | ||
| skyblue | #87CEEB | 135, 206, 235 | azul cielo | ||
| slateblue | #6A5ACD | 106, 90, 205 | azul pizarra | ||
| slategray | #708090 | 112, 128, 144 | gris pizarra | ||
| slategrey | #708090 | 112, 128, 144 | gris pizarra | ||
| snow | #FFFAFA | 255, 250, 250 | nieve | ||
| springgreen | #00FF7F | 0, 255, 127 | verde primavera | ||
| steelblue | #4682B4 | 70, 130, 180 | azul acero | ||
| tan | #D2B48C | 210, 180, 140 | bronceado (canela) | ||
| teal | #008080 | 0, 128, 128 | verde azulado | ||
| thistle | #D8BFD8 | 216, 191, 216 | cardo | ||
| tomato | #FF6347 | 255, 99, 71 | tomate | ||
| turquoise | #40E0D0 | 64, 224, 208 | turquesa | ||
| violet | #EE82EE | 238, 130, 238 | violeta | ||
| wheat | #F5DEB3 | 245, 222, 179 | trigo | ||
| white | #FFFFFF | 255, 255, 255 | blanco | ||
| whitesmoke | #F5F5F5 | 245, 245, 245 | humo blanco | ||
| yellow | #FFFF00 | 255, 255, 0 | amarillo | ||
| yellowgreen | #9ACD32 | 154, 205, 50 | verde amarillento |
Cómo usar esta lista
Escribe en el buscador parte de un nombre en inglés (blue), en español (azul), un código HEX (#FF6347) o un componente RGB. Los botones de familia muestran solo rojos, verdes, azules, etc., y el selector de orden agrupa los colores por tono o los ordena del más claro al más oscuro. Con «Al copiar, llevar» eliges si el botón copia el nombre, el HEX o la función rgb().
Los nombres en español son traducciones orientativas para ayudarte a buscar: en el código siempre hay que escribir el nombre CSS en inglés.
Cómo se usan los nombres de colores en CSS
Un nombre de color es un valor válido en cualquier propiedad que acepte colores:
color: tomato; · background-color: whitesmoke; · border: 2px solid steelblue;
El navegador lo traduce internamente a su valor sRGB, así que tomato y #FF6347 son exactamente el mismo color. Si necesitas ese valor en otro formato (HSL, CMYK u OKLCH), pásalo por el conversor de colores.
De dónde vienen estos nombres
Los 16 colores básicos (black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal y aqua) proceden de HTML 3.2 y de la paleta VGA de Windows. CSS 2.1 añadió orange, y CSS3 incorporó la lista completa de colores del sistema de ventanas X11 de Unix, de ahí nombres tan peculiares como papayawhip, peachpuff o lightgoldenrodyellow. El último en llegar fue rebeccapurple.
Esa doble procedencia explica algunas rarezas: en X11 «green» era el verde puro, que en CSS se llama lime, mientras que green (#008000) es un verde medio. Y darkgray (#A9A9A9) es más claro que gray (#808080).
Sinónimos y casos curiosos
| Sinónimos | Valor | Nota |
|---|---|---|
| aqua = cyan | #00FFFF | Cian puro |
| fuchsia = magenta | #FF00FF | Magenta puro |
| gray = grey | #808080 | Todas las variantes de gris admiten ambas grafías |
| lime | #00FF00 | El verde puro de RGB, no green |
| transparent | #00000000 | Palabra clave aparte; no cuenta entre los 148 |
Consejos de uso
- Prototipos y ejemplos: los nombres son fáciles de leer y recordar, ideales para maquetas rápidas o para enseñar CSS.
- Contraste: muchos colores con nombre no son legibles como texto sobre blanco (
gold,orange,lime). Compruébalo con el comprobador de contraste. - Diseños de marca: en proyectos reales, define tus propios colores con el selector de color y organízalos con el generador de paletas.
- Escribir HTML con símbolos: si necesitas mostrar caracteres especiales junto a los colores, consulta las entidades HTML.
Preguntas frecuentes
¿Cuántos nombres de colores admite CSS?
148 nombres (sin contar transparent ni currentcolor). Representan 139 colores distintos, porque hay sinónimos como gray/grey, aqua/cyan y fuchsia/magenta.
¿Distinguen mayúsculas los nombres de colores?
No. DodgerBlue, dodgerblue y DODGERBLUE son el mismo color, aunque por convención se escriben en minúsculas.
¿Por qué darkgray es más claro que gray?
Es una herencia histórica: gray (#808080) viene de los 16 colores de HTML 3.2 y darkgray (#A9A9A9) de la lista de colores del sistema X11, que usaba otro gris como referencia. Por eso darkgray es más claro que gray.
¿Es mejor usar nombres o códigos HEX?
Funcionan igual en todos los navegadores. Los nombres son prácticos para prototipos y ejemplos; en un proyecto real suele preferirse HEX o variables CSS porque los nombres no cubren los colores exactos de una marca.
¿Qué es rebeccapurple?
El color #663399, añadido a CSS en 2014 en memoria de Rebecca Meyer, hija del experto en CSS Eric Meyer. Es el único nombre incorporado en la especificación moderna.