Colores Hexadecimales

Tabla de contenidos

¿Qué es el Código de Colores Hexadecimal?
Transparencia en los Colores Hexadecimales
Tabla de Colores Básicos con Transparencia
Usos del Código Hexadecimal en CSS
Tabla de Opacidad en Hexadecimal (0 % a 100 %)
Lista de Colores con Nombre en CSS y su Código Hexadecimal
Preguntas frecuentes

¿Qué es el Código de Colores Hexadecimal?

El código de colores hexadecimal es una representación compacta y utilizada ampliamente para definir colores en páginas web y otros entornos digitales. Está compuesto por seis caracteres que corresponden a los valores de los colores rojo, verde y azul (RGB), utilizando el sistema de numeración hexadecimal. Los colores se representan en formato #RRGGBB, donde cada par de caracteres indica la intensidad de uno de los tres componentes de color.

Por ejemplo:

#FF0000 representa el rojo puro.
#00FF00 representa el verde puro.
#0000FF representa el azul puro.

Transparencia en los Colores Hexadecimales

Además de los colores opacos definidos por el formato #RRGGBB, existe una extensión que permite definir la transparencia utilizando el formato RGBA en hexadecimal. Este formato es #RRGGBBAA, donde los dos últimos caracteres (AA) indican el nivel de opacidad o transparencia del color.

00 representa completamente transparente.
FF representa completamente opaco.

Por ejemplo:

#FF000080 define un color rojo con un 50% de transparencia.
#0000FF33 define un azul con un 20% de opacidad.

Este formato es especialmente útil cuando quieres definir colores con distintos niveles de opacidad en elementos web, mejorando el control visual en superposiciones y efectos de transparencia.

Tabla de Colores Básicos con Transparencia

A continuación, te mostramos algunos ejemplos de colores en formato hexadecimal, tanto opacos como con diferentes niveles de transparencia:

Color	Hexadecimal (Opaco)	Hexadecimal (50% Transparente)	Hexadecimal (20% Transparente)
Rojo	#FF0000	#FF000080	#FF000033
Verde	#00FF00	#00FF0080	#00FF0033
Azul	#0000FF	#0000FF80	#0000FF33

Usos del Código Hexadecimal en CSS

El código de colores hexadecimal es ampliamente utilizado en CSS para definir colores de fondo, bordes, y textos. Puedes usar tanto el formato #RRGGBB para colores opacos como el formato #RRGGBBAA para definir la opacidad directamente. Esto es ideal para mejorar la estética de los sitios web, especialmente al trabajar con elementos que requieren capas o transparencia ajustable.

Tabla de Opacidad en Hexadecimal (0 % a 100 %)

En el formato de ocho dígitos #RRGGBBAA, los dos últimos dígitos (AA) indican la opacidad: 00 es totalmente transparente y FF es totalmente opaco. Para calcularlo, multiplica el porcentaje por 255, divídelo entre 100 y escribe el resultado en hexadecimal. Por ejemplo, el rojo #FF0000 al 50 % de opacidad es #FF000080, que equivale a rgba(255, 0, 0, 0.5).

Tabla de Opacidad en Hexadecimal (0 % a 100 %)
Opacidad	Valor hex (AA)	Rojo con esa opacidad
100 %	`FF`	`#FF0000FF`
95 %	`F2`	`#FF0000F2`
90 %	`E6`	`#FF0000E6`
85 %	`D9`	`#FF0000D9`
80 %	`CC`	`#FF0000CC`
75 %	`BF`	`#FF0000BF`
70 %	`B3`	`#FF0000B3`
65 %	`A6`	`#FF0000A6`
60 %	`99`	`#FF000099`
55 %	`8C`	`#FF00008C`
50 %	`80`	`#FF000080`
45 %	`73`	`#FF000073`
40 %	`66`	`#FF000066`
35 %	`59`	`#FF000059`
30 %	`4D`	`#FF00004D`
25 %	`40`	`#FF000040`
20 %	`33`	`#FF000033`
15 %	`26`	`#FF000026`
10 %	`1A`	`#FF00001A`
5 %	`0D`	`#FF00000D`
0 %	`00`	`#FF000000`

Lista de Colores con Nombre en CSS y su Código Hexadecimal

CSS define 141 colores con nombre. Puedes escribir el nombre (tomato) o su código hexadecimal (#FF6347) y el resultado es el mismo. Si los tres pares de dígitos se repiten, también puedes usar la forma corta de tres dígitos: #FFAA00 se escribe #FA0. Los códigos hexadecimales no distinguen entre mayúsculas y minúsculas.

Lista de Colores con Nombre en CSS y su Código Hexadecimal
Nombre CSS	Hexadecimal	RGB
`aliceblue`	`#F0F8FF`	240, 248, 255
`antiquewhite`	`#FAEBD7`	250, 235, 215
`aqua`	`#00FFFF`	0, 255, 255
`aquamarine`	`#7FFFD4`	127, 255, 212
`azure`	`#F0FFFF`	240, 255, 255
`beige`	`#F5F5DC`	245, 245, 220
`bisque`	`#FFE4C4`	255, 228, 196
`black`	`#000000`	0, 0, 0
`blanchedalmond`	`#FFEBCD`	255, 235, 205
`blue`	`#0000FF`	0, 0, 255
`blueviolet`	`#8A2BE2`	138, 43, 226
`brown`	`#A52A2A`	165, 42, 42
`burlywood`	`#DEB887`	222, 184, 135
`cadetblue`	`#5F9EA0`	95, 158, 160
`chartreuse`	`#7FFF00`	127, 255, 0
`chocolate`	`#D2691E`	210, 105, 30
`coral`	`#FF7F50`	255, 127, 80
`cornflowerblue`	`#6495ED`	100, 149, 237
`cornsilk`	`#FFF8DC`	255, 248, 220
`crimson`	`#DC143C`	220, 20, 60
`cyan`	`#00FFFF`	0, 255, 255
`darkblue`	`#00008B`	0, 0, 139
`darkcyan`	`#008B8B`	0, 139, 139
`darkgoldenrod`	`#B8860B`	184, 134, 11
`darkgray`	`#A9A9A9`	169, 169, 169
`darkgreen`	`#006400`	0, 100, 0
`darkkhaki`	`#BDB76B`	189, 183, 107
`darkmagenta`	`#8B008B`	139, 0, 139
`darkolivegreen`	`#556B2F`	85, 107, 47
`darkorange`	`#FF8C00`	255, 140, 0
`darkorchid`	`#9932CC`	153, 50, 204
`darkred`	`#8B0000`	139, 0, 0
`darksalmon`	`#E9967A`	233, 150, 122
`darkseagreen`	`#8FBC8F`	143, 188, 143
`darkslateblue`	`#483D8B`	72, 61, 139
`darkslategray`	`#2F4F4F`	47, 79, 79
`darkturquoise`	`#00CED1`	0, 206, 209
`darkviolet`	`#9400D3`	148, 0, 211
`deeppink`	`#FF1493`	255, 20, 147
`deepskyblue`	`#00BFFF`	0, 191, 255
`dimgray`	`#696969`	105, 105, 105
`dodgerblue`	`#1E90FF`	30, 144, 255
`firebrick`	`#B22222`	178, 34, 34
`floralwhite`	`#FFFAF0`	255, 250, 240
`forestgreen`	`#228B22`	34, 139, 34
`fuchsia`	`#FF00FF`	255, 0, 255
`gainsboro`	`#DCDCDC`	220, 220, 220
`ghostwhite`	`#F8F8FF`	248, 248, 255
`gold`	`#FFD700`	255, 215, 0
`goldenrod`	`#DAA520`	218, 165, 32
`gray`	`#808080`	128, 128, 128
`green`	`#008000`	0, 128, 0
`greenyellow`	`#ADFF2F`	173, 255, 47
`honeydew`	`#F0FFF0`	240, 255, 240
`hotpink`	`#FF69B4`	255, 105, 180
`indianred`	`#CD5C5C`	205, 92, 92
`indigo`	`#4B0082`	75, 0, 130
`ivory`	`#FFFFF0`	255, 255, 240
`khaki`	`#F0E68C`	240, 230, 140
`lavender`	`#E6E6FA`	230, 230, 250
`lavenderblush`	`#FFF0F5`	255, 240, 245
`lawngreen`	`#7CFC00`	124, 252, 0
`lemonchiffon`	`#FFFACD`	255, 250, 205
`lightblue`	`#ADD8E6`	173, 216, 230
`lightcoral`	`#F08080`	240, 128, 128
`lightcyan`	`#E0FFFF`	224, 255, 255
`lightgoldenrodyellow`	`#FAFAD2`	250, 250, 210
`lightgray`	`#D3D3D3`	211, 211, 211
`lightgreen`	`#90EE90`	144, 238, 144
`lightpink`	`#FFB6C1`	255, 182, 193
`lightsalmon`	`#FFA07A`	255, 160, 122
`lightseagreen`	`#20B2AA`	32, 178, 170
`lightskyblue`	`#87CEFA`	135, 206, 250
`lightslategray`	`#778899`	119, 136, 153
`lightsteelblue`	`#B0C4DE`	176, 196, 222
`lightyellow`	`#FFFFE0`	255, 255, 224
`lime`	`#00FF00`	0, 255, 0
`limegreen`	`#32CD32`	50, 205, 50
`linen`	`#FAF0E6`	250, 240, 230
`magenta`	`#FF00FF`	255, 0, 255
`maroon`	`#800000`	128, 0, 0
`mediumaquamarine`	`#66CDAA`	102, 205, 170
`mediumblue`	`#0000CD`	0, 0, 205
`mediumorchid`	`#BA55D3`	186, 85, 211
`mediumpurple`	`#9370DB`	147, 112, 219
`mediumseagreen`	`#3CB371`	60, 179, 113
`mediumslateblue`	`#7B68EE`	123, 104, 238
`mediumspringgreen`	`#00FA9A`	0, 250, 154
`mediumturquoise`	`#48D1CC`	72, 209, 204
`mediumvioletred`	`#C71585`	199, 21, 133
`midnightblue`	`#191970`	25, 25, 112
`mintcream`	`#F5FFFA`	245, 255, 250
`mistyrose`	`#FFE4E1`	255, 228, 225
`moccasin`	`#FFE4B5`	255, 228, 181
`navajowhite`	`#FFDEAD`	255, 222, 173
`navy`	`#000080`	0, 0, 128
`oldlace`	`#FDF5E6`	253, 245, 230
`olive`	`#808000`	128, 128, 0
`olivedrab`	`#6B8E23`	107, 142, 35
`orange`	`#FFA500`	255, 165, 0
`orangered`	`#FF4500`	255, 69, 0
`orchid`	`#DA70D6`	218, 112, 214
`palegoldenrod`	`#EEE8AA`	238, 232, 170
`palegreen`	`#98FB98`	152, 251, 152
`paleturquoise`	`#AFEEEE`	175, 238, 238
`palevioletred`	`#DB7093`	219, 112, 147
`papayawhip`	`#FFEFD5`	255, 239, 213
`peachpuff`	`#FFDAB9`	255, 218, 185
`peru`	`#CD853F`	205, 133, 63
`pink`	`#FFC0CB`	255, 192, 203
`plum`	`#DDA0DD`	221, 160, 221
`powderblue`	`#B0E0E6`	176, 224, 230
`purple`	`#800080`	128, 0, 128
`rebeccapurple`	`#663399`	102, 51, 153
`red`	`#FF0000`	255, 0, 0
`rosybrown`	`#BC8F8F`	188, 143, 143
`royalblue`	`#4169E1`	65, 105, 225
`saddlebrown`	`#8B4513`	139, 69, 19
`salmon`	`#FA8072`	250, 128, 114
`sandybrown`	`#F4A460`	244, 164, 96
`seagreen`	`#2E8B57`	46, 139, 87
`seashell`	`#FFF5EE`	255, 245, 238
`sienna`	`#A0522D`	160, 82, 45
`silver`	`#C0C0C0`	192, 192, 192
`skyblue`	`#87CEEB`	135, 206, 235
`slateblue`	`#6A5ACD`	106, 90, 205
`slategray`	`#708090`	112, 128, 144
`snow`	`#FFFAFA`	255, 250, 250
`springgreen`	`#00FF7F`	0, 255, 127
`steelblue`	`#4682B4`	70, 130, 180
`tan`	`#D2B48C`	210, 180, 140
`teal`	`#008080`	0, 128, 128
`thistle`	`#D8BFD8`	216, 191, 216
`tomato`	`#FF6347`	255, 99, 71
`turquoise`	`#40E0D0`	64, 224, 208
`violet`	`#EE82EE`	238, 130, 238
`wheat`	`#F5DEB3`	245, 222, 179
`white`	`#FFFFFF`	255, 255, 255
`whitesmoke`	`#F5F5F5`	245, 245, 245
`yellow`	`#FFFF00`	255, 255, 0
`yellowgreen`	`#9ACD32`	154, 205, 50

Preguntas frecuentes

¿Qué significa el código de color hexadecimal en diseño web?

El código de color hexadecimal es una forma de representar colores mediante seis caracteres que combinan los valores de rojo, verde y azul en formato #RRGGBB.

¿Cómo se agrega transparencia en un color hexadecimal?

Se utiliza el formato #RRGGBBAA, donde los dos últimos caracteres (AA) representan el nivel de opacidad, siendo 00 totalmente transparente y FF totalmente opaco.

¿Cómo escribo un color transparente en hexadecimal?

Añade dos dígitos al final del código: #RRGGBBAA. Los dos últimos indican la opacidad: 00 es totalmente transparente, 80 es aproximadamente 50 % y FF es totalmente opaco. Por ejemplo, #FF000080 es rojo al 50 % de opacidad. Consulta la tabla de opacidad de arriba para los demás valores.

¿Qué significan #FFFFFF y #000000?

#FFFFFF es el blanco: rojo, verde y azul al máximo (FF = 255). #000000 es el negro: los tres canales en cero. Cualquier gris tiene los tres pares iguales, por ejemplo #808080.

¿Se pueden usar solo tres dígitos en un código hexadecimal?

Sí, cuando cada canal repite su dígito. La forma corta #RGB duplica cada dígito: #F80 equivale a #FF8800 y #FFF equivale a #FFFFFF.

¿Cómo convierto un valor decimal de color a hexadecimal?

Divide el valor entre 16: el cociente es el primer dígito y el resto es el segundo. Por ejemplo, 200 ÷ 16 = 12 con resto 8, y como 12 es C en hexadecimal, 200 es C8. Repite con los tres canales para obtener #RRGGBB.

Explora más

Selector de Colores (Color Picker)Colores RGB Convertidor Hex a RGB Convertidor Hex a RGBA Convertidor RGB a Hex Colores RGBA