Colores HTML
Hay tres formas de cambiar el color del texto en HTML: usando códigos de color Hex, nombres de colores HTML o valores RGB.
Códigos de color Hex
Un código de color hex es un triplete hexadecimal, que representa tres valores separados que definen los niveles de los colores componentes. Se especifica con una notación hexadecimal (hex) para una mezcla de valores de color Rojo, Verde y Azul. El valor más bajo que se puede dar 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.
Para añadir un color a un elemento de texto, usa el atributo style (donde la propiedad color es tu código Hex) o propiedades CSS correspondientes como color: o background-color:.
Ejemplo de la propiedad background-color usada con el valor "hex":
Colores de texto y fondo|Ejemplo de colores HTML|Códigos de color Hex|W3Docs
<!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
En la tabla de abajo puedes ver los valores Hex de los colores web. También puedes usar nuestra herramienta Selector de color para explorar millones de colores con códigos de color Hex.
Nombres de colores HTML
Para colorear el elemento de texto usando un nombre de color HTML, coloca 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":
Ejemplo de nombres de colores HTML|Colores HTML|W3Docs
<!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
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":
Ejemplo de valores de color RGB|Colores HTML|W3Docs
<!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>Aquí tienes la paleta de 216 colores compatible con distintos navegadores que se usa para crear páginas web. Esta paleta está en gran parte obsoleta para las pantallas modernas, pero aún se muestra aquí como referencia.
| Hex Value | Color | RGB Value |
|---|---|---|
| #000000 | black | rgb(0,0,0) |
| #FFFFFF | white | rgb(255,255,255) |
| #FF0000 | red | rgb(255,0,0) |
| #00FFFF | aqua | rgb(0,255,255) |
| #0000FF | blue | rgb(0,0,255) |
| #C0C0C0 | silver | rgb(192,192,192) |
| #FF00FF | fuchsia | rgb(255,0,255) |
| #000000 | black | rgb(0,0,0) |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) | |
| #000000 | #000033 | #000066 |
| #003300 | #003333 | #003366 |
| #006600 | #006633 | #006666 |
| #009900 | #009933 | #009966 |
| #00CC00 | #00CC33 | #00CC66 |
| #00FF00 | #00FF33 | #00FF66 |
| #330000 | #330033 | #330066 |
| #333300 | #333333 | #333366 |
| #336600 | #336633 | #336666 |
| #339900 | #339933 | #339966 |
| #33CC00 | #33CC33 | #33CC66 |
| #33FF00 | #33FF33 | #33FF66 |
| #660000 | #660033 | #660066 |
| #663300 | #663333 | #663366 |
| #666600 | #666633 | #666666 |
| #669900 | #669933 | #669966 |
| #66CC00 | #66CC33 | #66CC66 |
| #66FF00 | #66FF33 | #66FF66 |
| #990000 | #990033 | #990066 |
| #993300 | #993333 | #993366 |
| #996600 | #996633 | #996666 |
| #999900 | #999933 | #999966 |
| #99CC00 | #99CC33 | #99CC66 |
| #99FF00 | #99FF33 | #99FF66 |
| #CC0000 | #CC0033 | #CC0066 |
| #CC3300 | #CC3333 | #CC3366 |
| #CC6600 | #CC6633 | #CC6666 |
| #CC9900 | #CC9933 | #CC9966 |
| #CCCC00 | #CCCC33 | #CCCC66 |
| #CCFF00 | #CCFF33 | #CCFF66 |
| #FF0000 | #FF0033 | #FF0066 |
| #FF3300 | #FF3333 | #FF3366 |
| #FF6600 | #FF6633 | #FF6666 |
| #FF9900 | #FF9933 | #FF9966 |
| #FFCC00 | #FFCC33 | #FFCC66 |
| #FFFF00 | #FFFF33 | #FFFF66 |
Lista de nombres de colores HTML:
Aquí tienes una lista de algunos de los nombres de colores HTML estándar:
| Color Name | Hexadecimal Value |
|---|---|
| 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 colores pueden usarse en código HTML y CSS para especificar el color del texto, el fondo, los bordes y otros elementos.
Practice
Which of the following are ways to specify colors in HTML?