Cores Hexadecimais

Índice

O que é o Código de Cores Hexadecimal?
Transparência em Cores Hexadecimais
Tabela de Cores Básicas com Transparência
Usos do Código Hexadecimal em CSS
Tabela de Opacidade em Hexadecimal (0 % a 100 %)
Lista de Cores CSS com Nome e seus Códigos Hexadecimais
Perguntas Frequentes

O que é o Código de Cores Hexadecimal?

O código de cores hexadecimal é uma representação compacta e amplamente utilizada para definir cores em páginas da web e outros ambientes digitais. Ele é composto por seis caracteres que correspondem aos valores das cores vermelho, verde e azul (RGB), usando o sistema de numeração hexadecimal. As cores são representadas no formato #RRGGBB, onde cada par de caracteres indica a intensidade de um dos três componentes da cor.

Por exemplo:

#FF0000 representa o vermelho puro.
#00FF00 representa o verde puro.
#0000FF representa o azul puro.

Transparência em Cores Hexadecimais

Além das cores opacas definidas pelo formato #RRGGBB, existe uma extensão que permite definir a transparência usando o formato RGBA hexadecimal. Este formato é #RRGGBBAA, onde os dois últimos caracteres (AA) indicam o nível de opacidade ou transparência da cor.

00 representa completamente transparente.
FF representa completamente opaco.

Por exemplo:

#FF000080 define uma cor vermelha com 50% de transparência.
#0000FF33 define um azul com 20% de opacidade.

Este formato é especialmente útil ao definir cores com diferentes níveis de opacidade em elementos da web, melhorando o controle visual em sobreposições e efeitos de transparência.

Tabela de Cores Básicas com Transparência

Abaixo estão alguns exemplos de cores no formato hexadecimal, tanto opacas quanto com diferentes níveis de transparência:

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

Usos do Código Hexadecimal em CSS

O código de cores hexadecimal é amplamente utilizado em CSS para definir cores de fundo, bordas e textos. Você pode usar tanto o formato #RRGGBB para cores opacas quanto o formato #RRGGBBAA para definir a opacidade diretamente. Isso é ideal para melhorar a estética de sites, especialmente ao trabalhar com elementos que requerem camadas ou transparência ajustável.

Tabela de Opacidade em Hexadecimal (0 % a 100 %)

No formato de oito dígitos #RRGGBBAA, os dois últimos dígitos (AA) indicam a opacidade: 00 é totalmente transparente e FF é totalmente opaco. Para calcular, multiplique a porcentagem por 255, divida por 100 e escreva o resultado em hexadecimal. Por exemplo, o vermelho #FF0000 com 50 % de opacidade é #FF000080, equivalente a rgba(255, 0, 0, 0.5).

Tabela de Opacidade em Hexadecimal (0 % a 100 %)
Opacidade	Valor hex (AA)	Vermelho com essa opacidade
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 Cores CSS com Nome e seus Códigos Hexadecimais

O CSS define 141 cores com nome. Você pode escrever o nome (tomato) ou o código hexadecimal (#FF6347) e o resultado é o mesmo. Quando cada par de dígitos se repete, também é possível usar a forma curta de três dígitos: #FFAA00 pode ser escrito como #FA0. Os códigos hexadecimais não diferenciam maiúsculas de minúsculas.

Lista de Cores CSS com Nome e seus Códigos Hexadecimais
Nome 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

Perguntas Frequentes

Para que serve o código de cor hexadecimal?

O código de cor hexadecimal representa cores usando seis caracteres no formato #RRGGBB, em que cada par define a intensidade do vermelho, verde e azul.

Como adicionar transparência em uma cor hexadecimal?

Utiliza-se o formato #RRGGBBAA, onde os dois últimos caracteres (AA) indicam o nível de opacidade: 00 é totalmente transparente e FF totalmente opaco.

Como escrever uma cor transparente em hexadecimal?

Adicione dois dígitos no final do código: #RRGGBBAA. Os dois últimos indicam a opacidade: 00 é totalmente transparente, 80 é cerca de 50 % e FF é totalmente opaco. Por exemplo, #FF000080 é vermelho com 50 % de opacidade. Consulte a tabela de opacidade acima para os demais valores.

O que significam #FFFFFF e #000000?

#FFFFFF é o branco: vermelho, verde e azul no máximo (FF = 255). #000000 é o preto: os três canais em zero. Qualquer cinza tem os três pares iguais, por exemplo #808080.

É possível usar só três dígitos em um código hexadecimal?

Sim, quando cada canal repete o seu dígito. A forma curta #RGB duplica cada dígito: #F80 equivale a #FF8800 e #FFF equivale a #FFFFFF.

Como converto um valor decimal de cor para hexadecimal?

Divida o valor por 16: o quociente é o primeiro dígito e o resto é o segundo. Por exemplo, 200 ÷ 16 = 12 resto 8, e como 12 é C em hexadecimal, 200 é C8. Repita para os três canais para obter #RRGGBB.

Explore Mais

Seletor de Cores (Color Picker)Cores RGB Conversor de Hex para RGB Conversor de Hex para RGBA Conversor de RGB para Hex Cores RGBA