Colores en HTML
Aplica colores en HTML con nombres, códigos hex (#RRGGBB, #RGB, #RRGGBBAA), rgb()/rgba() y hsl()/hsla(). Ejemplos, tabla de nombres y consejos de contraste.
Los colores en HTML se aplican con CSS, ya sea de forma inline mediante el atributo style o en una hoja de estilos. Nunca se define un color solo en HTML — se establece una propiedad CSS como color (color del texto), background-color o border-color, y se le asigna un valor de color. Esta página cubre todos los formatos de valor de color que puedes usar:
- Nombres de color — palabras clave como
red,tomatoorebeccapurple. - Hexadecimal —
#RRGGBB, la forma abreviada#RGBy el formato de 8 dígitos#RRGGBBAA(con canal alfa). rgb()/rgba()— canales rojo, verde y azul (más opacidad opcional).hsl()/hsla()— matiz, saturación, luminosidad (más opacidad opcional).
Todos estos formatos son intercambiables: #FF0000, red, rgb(255, 0, 0) y hsl(0, 100%, 50%) describen el mismo rojo puro. Para una referencia más completa en el lado de CSS, consulta los capítulos CSS color y CSS background-color.
Códigos de color hexadecimal
Un código de color hexadecimal es una tripleta hexadecimal que representa tres valores separados que definen los niveles de los colores componentes. Se especifica con notación hexadecimal (hex) para una mezcla de valores de color Rojo, Verde y Azul. El valor más bajo que se puede asignar a una de las fuentes de luz es 0 (hex 00). El valor más alto es 255 (hex FF).
Los valores hex se escriben como números de seis dígitos, comenzando con el signo #. Las letras usadas en un dígito hexadecimal pueden ser mayúsculas o minúsculas. Por ejemplo, para especificar el color blanco puedes escribir #FFFFFF o #ffffff.
Existen dos formas adicionales de hex que conviene conocer:
- Forma abreviada
#RGB— cuando cada canal utiliza un par repetido, se puede compactar.#FF0000se convierte en#F00, y#FFCC00en#FC0. El navegador expande cada dígito duplicándolo. - 8 dígitos
#RRGGBBAA— añade un par final para el canal alfa (opacidad), desde00(completamente transparente) hastaFF(completamente opaco). Por ejemplo,#1c87c980es el azul#1c87c9con aproximadamente un 50% de opacidad.
Para añadir un color a un elemento de texto, usa el atributo style (donde la propiedad color es tu código hex) o las propiedades CSS correspondientes como color: o background-color:.
Ejemplo de la propiedad background-color usada con el valor "hex":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #d5dce8;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:#8ebf42;"> This is a text in green</p>
</body>
</html>Resultado
Puedes usar nuestra herramienta Selector de color para explorar millones de colores y copiar sus valores Hex, RGB y HSL.
Nombres de colores HTML
Para colorear el elemento de texto usando un nombre de color HTML, escribe el nombre del color (blue, por ejemplo) en lugar del código hex del paso anterior.
Ejemplo de la propiedad color usada con el valor "nombre de color":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: blue;
color: white;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:blue;"> This is a text in blue</p>
</body>
</html>Valores de color RGB
Un valor rgb() combina canales rojo, verde y azul (blue en inglés), cada uno de 0 a 255 — exactamente el mismo modelo que hex, pero escrito en decimal. rgb(255, 0, 0) es rojo, rgb(0, 0, 0) es negro y rgb(255, 255, 255) es blanco.
Para añadir un color a un elemento de texto, usa el atributo style (donde la propiedad color es tu valor RGB) o las propiedades CSS correspondientes.
Ejemplo de la propiedad background-color usada con el valor "RGB":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color:rgb(25,25,112);
color: rgb(169,169,169);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:rgb(25,25,112);"> This is a text in blue</p>
</body>
</html>RGBA: añadir opacidad
rgba() extiende rgb() con un cuarto valor, el canal alfa, que controla la opacidad de 0 (completamente transparente) a 1 (completamente opaco). Es útil para superposiciones con tinte o fondos semitransparentes donde deseas que la capa inferior sea visible.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: rgba(25, 25, 112, 0.5);
color: rgb(33, 33, 33);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This box uses a semi-transparent navy background</p>
</div>
</body>
</html>En CSS moderno, rgb(25 25 112 / 50%) es la sintaxis equivalente con espacios, y el hex de 8 dígitos #19197080 hace lo mismo.
Valores de color HSL y HSLA
hsl() describe un color de la manera en que muchos diseñadores lo piensan — por matiz (hue), saturación y luminosidad — lo que facilita crear una familia de tonos relacionados ajustando un único valor.
- Matiz es un ángulo en la rueda de color de
0a360:0(y360) es rojo,120es verde,240es azul. - Saturación es un porcentaje:
0%es gris,100%es la versión más vívida del matiz. - Luminosidad es un porcentaje:
0%es negro,50%es el color "normal",100%es blanco.
hsla() añade un canal alfa para la opacidad, igual que rgba().
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
background-color: hsl(210, 79%, 46%);
color: white;
padding: 22px;
}
.faded {
background-color: hsla(210, 79%, 46%, 0.4);
padding: 22px;
}
</style>
</head>
<body>
<div class="solid"><p>hsl background</p></div>
<div class="faded"><p>hsla background with 40% opacity</p></div>
</body>
</html>Dado que la luminosidad y la saturación son independientes del matiz, HSL resulta muy práctico para generar variantes de hover o versiones "más oscuras/más claras" de un color de marca: mantén el matiz y reduce la luminosidad.
Color y accesibilidad
El color también tiene que ver con la legibilidad. Las Pautas de Accesibilidad para el Contenido Web (WCAG) exigen una relación de contraste de al menos:
- 4.5:1 para texto de cuerpo normal sobre su fondo (nivel AA).
- 3:1 para texto grande (aproximadamente 18pt / 24px, o 14pt / 19px en negrita) y para componentes de interfaz y gráficos.
Dos consecuencias que conviene recordar:
- Nunca te bases solo en el color para transmitir información — por ejemplo, marca los campos de formulario obligatorios o los estados de error también con texto o un icono, para que los usuarios con daltonismo y los usuarios de lectores de pantalla no queden excluidos.
- Comprueba tus combinaciones. Un gris claro sobre blanco puede parecer elegante pero no superar el mínimo de 4.5:1. Usa nuestro Verificador de contraste de color para probar un par primer plano/fondo antes de publicarlo.
La paleta "web-safe" de 216 colores que mencionan los tutoriales más antiguos (colores formados únicamente a partir de los pares hex
00,33,66,99,CC,FF) era una solución alternativa para pantallas limitadas a 256 colores. Las pantallas modernas muestran millones de colores, por lo que esta paleta está obsoleta y debes elegir el valor que mejor se adapte a tu diseño.
Lista de nombres de colores HTML:
Aquí tienes una lista de algunos de los nombres de color HTML estándar:
| Nombre del color | Valor hexadecimal |
|---|---|
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGrey | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkSlateGrey | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DimGrey | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Gray | #808080 |
| Grey | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenRodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSlateGrey | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | #000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
| Salmon | #FA8072 |
| SandyBrown | #F4A460 |
| SeaGreen | #2E8B57 |
| SeaShell | #FFF5EE |
| Sienna | #A0522D |
| Silver | #C0C0C0 |
| SkyBlue | #87CEEB |
| SlateBlue | #6A5ACD |
| SlateGray | #708090 |
| SlateGrey | #708090 |
| Snow | #FFFAFA |
| SpringGreen | #00FF7F |
| SteelBlue | #4682B4 |
| Tan | #D2B48C |
| Teal | #008080 |
| Thistle | #D8BFD8 |
| Tomato | #FF6347 |
| Turquoise | #40E0D0 |
| Violet | #EE82EE |
| Wheat | #F5DEB3 |
| White | #FFFFFF |
| WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
| YellowGreen | #9ACD32 |
Estos nombres de color se pueden usar en código HTML y CSS para especificar el color del texto, el fondo, los bordes y otros elementos. Para profundizar en el lado de CSS, lee los capítulos CSS color, CSS background-color y nombres de color CSS.