Tabela de Cores HTML e CSS Completa

Divulgue esse artigo

Se você é blogueiro profissional ou webmaster já deve ter tido o maior problema de todos: encontrar códigos de cores para você utilizar em seu projeto. Quem cria um blog ou site frequentemente precisa de acesso às cores mais utilizadas.

Para você entender melhor, no CSS e HTML é possível representar cores em dois sistemas: RGB e Hexadecimal.

Sistema RGB

RGB significa Red Green Blue, onde existem três escalas de números que vão de zero a 255, sendo que a escala “0 0 0″ significa preto e “255 255 255″ significa o branco. A combinação desses números gera a cor.

Sistema Hexadecimal

O sistema Hexadecimal utiliza um conjunto de 6 dígitos que vão de “000000″ (preto) a “ffffff” (branco). A combinação dessas sequências gera as mais variadas cores.

O comum é usar Hexa

Em CSS o usual é utilizar as cores em Hexadecimal com uma “#” na frente. Por exemplo, para representar a cor preta utilizamos #000000 ou somente #000 quando forem cores cheias.

Tabela de cores Hexadecimal

Pensando nisso, criei uma tabela de cores HTML e CSS completa com várias opções de cores para utilizar em seu site ou blog. Sempre que precisar utilize essa tabela para encontrar a cor desejada. Na primeira tabela, preta, você encontra cores mais escuras iniciando pelo branco e finalizando no preto. Na segunda tabela, você encontra cores mais claras iniciando pela cor branca e finalizando pela cor preta.

#FFFFFF
#FFF
#CCCCCC
#CCC
#999999
#999
#666666
#666
#333333
#333
#000000
#000
#669999
#699
#006666
#066
#009999
#099
#99CCCC
#9CC
#66CCCC
#6CC
#00CCCC
#0CC
#00FFFF
#0FF
#99FFFF
#9FF
#CCFFFF
#CFF
#66CC99
#6C9
#009966
#096
#00CC99
#0C9
#66FFCC
#6FC
#00FFCC
#0FC
#99FFCC
#9FC
#99FF99
#9F9
#66FF99
#6F9
#00FF99
#0F9
#99CC99
#9C9
#99CC66
#9C6
#66CC66
#6C6
#33CC66
#3C6
#33FF66
#3F6
#00FF66
#0F6
#339900
#390
#009900
#090
#33CC00
#3C0
#99CC00
#9C0
#669900
#690
#336600
#360
#66CC00
#6C0
#00FF00
#0F0
#669966
#666
#336633
#363
#003300
#030
#CCFFCC
#CFC
#99FF66
#9F6
#999966
#996
#666633
#663
#333300
#330
#CCFF99
#CF9
#99FF33
#9F3
#CCCC66
#CC6
#999900
#990
#666600
#660
#CCFF66
#CF6
#CCFF00
#CF0
#CCCC99
#CC9
#996600
#960
#FFFFCC
#FFC
#FFFF99
#FF9
#CC9966
#C96
#996633
#963
#330000
#300
#FFFF66
#F66
#FFCC66
#FC6
#663300
#630
#FFFF00
#FF0
#FFCC99
#FC9
#FF9966
#F96
#CC6633
#C63
#993300
#930
#CC9933
#C93
#FFCC00
#FC0
#FF6666
#F66
#CC0033
#C03
#663333
#633
#660000
#600
#CC3300
#C30
#FF6600
#F60
#FF9999
#F99
#CC6666
#C66
#993333
#933
#990033
#903
#990000
#900
#FF0000
#F00
#FFCCCC
#FCC
#CC9999
#C99
#996666
#966
#660033
#603
#FF6699
#F69
#FF0066
#F06
#FF99CC
#F9C
#CC6699
#C69
#CC3399
#C39
#990066
#906
#CC0066
#C06
#FF0099
#F09
#FFCCFF
#FCF
#FF99FF
#F9F
#FF66FF
#F6F
#FF33FF
#F3F
#FF33CC
#F3C
#FF66CC
#F6C
#996699
#969
#CC99CC
#C9C
#CC66CC
#C6C
#CC33CC
#C3C
#993399
#939
#660066
#606
#9966CC
#96C
#CC99FF
#C9F
#CC66FF
#C6F
#CC00FF
#C0F
#9933CC
#93C
#663366
#636
#666699
#669
#9999CC
#99C
#CCCCFF
#CCF
#663399
#639
#660099
#609
#330033
#303
#6699FF
#69F
#9999FF
#99F
#9933FF
#93F
#9966FF
#96F
#330066
#306
#6666FF
#66F
#6600FF
#60F
#6633CC
#63C
#6666CC
#66C
#333366
#336
#0066CC
#06C
#003399
#039
#000066
#006
#333399
#339
#003366
#036
#000033
#003
#0066FF
#06F
#3366FF
#36F
#0000FF
#00F
#0000CC
#00C
#3333CC
#33C
#3366CC
#36C
#0099FF
#09F
#00CCFF
#0CF
#66CCFF
#6CF
#0099CC
#09C
#006699
#069
#6699CC
#69C
#99CCFF
#9CF
#FFFFFF
#FFF
#CCCCCC
#CCC
#999999
#999
#666666
#666
#333333
#333
#000000
#000
#669999
#699
#006666
#066
#009999
#099
#99CCCC
#9CC
#66CCCC
#6CC
#00CCCC
#0CC
#00FFFF
#0FF
#99FFFF
#9FF
#CCFFFF
#CFF
#66CC99
#6C9
#009966
#096
#00CC99
#0C9
#66FFCC
#6FC
#00FFCC
#0FC
#99FFCC
#9FC
#99FF99
#9F9
#66FF99
#6F9
#00FF99
#0F9
#99CC99
#9C9
#99CC66
#9C6
#66CC66
#6C6
#33CC66
#3C6
#33FF66
#3F6
#00FF66
#0F6
#339900
#390
#009900
#090
#33CC00
#3C0
#99CC00
#9C0
#669900
#690
#336600
#360
#66CC00
#6C0
#00FF00
#0F0
#669966
#666
#336633
#363
#003300
#030
#CCFFCC
#CFC
#99FF66
#9F6
#999966
#996
#666633
#663
#333300
#330
#CCFF99
#CF9
#99FF33
#9F3
#CCCC66
#CC6
#999900
#990
#666600
#660
#CCFF66
#CF6
#CCFF00
#CF0
#CCCC99
#CC9
#996600
#960
#FFFFCC
#FFC
#FFFF99
#FF9
#CC9966
#C96
#996633
#963
#330000
#300
#FFFF66
#F66
#FFCC66
#FC6
#663300
#630
#FFFF00
#FF0
#FFCC99
#FC9
#FF9966
#F96
#CC6633
#C63
#993300
#930
#CC9933
#C93
#FFCC00
#FC0
#FF6666
#F66
#CC0033
#C03
#663333
#633
#660000
#600
#CC3300
#C30
#FF6600
#F60
#FF9999
#F99
#CC6666
#C66
#993333
#933
#990033
#903
#990000
#900
#FF0000
#F00
#FFCCCC
#FCC
#CC9999
#C99
#996666
#966
#660033
#603
#FF6699
#F69
#FF0066
#F06
#FF99CC
#F9C
#CC6699
#C69
#CC3399
#C39
#990066
#906
#CC0066
#C06
#FF0099
#F09
#FFCCFF
#FCF
#FF99FF
#F9F
#FF66FF
#F6F
#FF33FF
#F3F
#FF33CC
#F3C
#FF66CC
#F6C
#996699
#969
#CC99CC
#C9C
#CC66CC
#C6C
#CC33CC
#C3C
#993399
#939
#660066
#606
#9966CC
#96C
#CC99FF
#C9F
#CC66FF
#C6F
#CC00FF
#C0F
#9933CC
#93C
#663366
#636
#666699
#669
#9999CC
#99C
#CCCCFF
#CCF
#663399
#639
#660099
#609
#330033
#303
#6699FF
#69F
#9999FF
#99F
#9933FF
#93F
#9966FF
#96F
#330066
#306
#6666FF
#66F
#6600FF
#60F
#6633CC
#63C
#6666CC
#66C
#333366
#336
#0066CC
#06C
#003399
#039
#000066
#006
#333399
#339
#003366
#036
#000033
#003
#0066FF
#06F
#3366FF
#36F
#0000FF
#00F
#0000CC
#00C
#3333CC
#33C
#3366CC
#36C
#0099FF
#09F
#00CCFF
#0CF
#66CCFF
#6CF
#0099CC
#09C
#006699
#069
#6699CC
#69C
#99CCFF
#9CF
#FFFFFF
#FFF
#CCCCCC
#CCC
#999999
#999
#666666
#666
#333333
#333
#000000
#000
#669999
#699
#006666
#066
#009999
#099
#99CCCC
#9CC
#66CCCC
#6CC
#00CCCC
#0CC
#00FFFF
#0FF
#99FFFF
#9FF
#CCFFFF
#CFF
#66CC99
#6C9
#009966
#096
#00CC99
#0C9
#66FFCC
#6FC
#00FFCC
#0FC
#99FFCC
#9FC
#99FF99
#9F9
#66FF99
#6F9
#00FF99
#0F9
#99CC99
#9C9
#99CC66
#9C6
#66CC66
#6C6
#33CC66
#3C6
#33FF66
#3F6
#00FF66
#0F6
#339900
#390
#009900
#090
#33CC00
#3C0
#99CC00
#9C0
#669900
#690
#336600
#360
#66CC00
#6C0
#00FF00
#0F0
#669966
#666
#336633
#363
#003300
#030
#CCFFCC
#CFC
#99FF66
#9F6
#999966
#996
#666633
#663
#333300
#330
#CCFF99
#CF9
#99FF33
#9F3
#CCCC66
#CC6
#999900
#990
#666600
#660
#CCFF66
#CF6
#CCFF00
#CF0
#CCCC99
#CC9
#996600
#960
#FFFFCC
#FFC
#FFFF99
#FF9
#CC9966
#C96
#996633
#963
#330000
#300
#FFFF66
#F66
#FFCC66
#FC6
#663300
#630
#FFFF00
#FF0
#FFCC99
#FC9
#FF9966
#F96
#CC6633
#C63
#993300
#930
#CC9933
#C93
#FFCC00
#FC0
#FF6666
#F66
#CC0033
#C03
#663333
#633
#660000
#600
#CC3300
#C30
#FF6600
#F60
#FF9999
#F99
#CC6666
#C66
#993333
#933
#990033
#903
#990000
#900
#FF0000
#F00
#FFCCCC
#FCC
#CC9999
#C99
#996666
#966
#660033
#603
#FF6699
#F69
#FF0066
#F06
#FF99CC
#F9C
#CC6699
#C69
#CC3399
#C39
#990066
#906
#CC0066
#C06
#FF0099
#F09
#FFCCFF
#FCF
#FF99FF
#F9F
#FF66FF
#F6F
#FF33FF
#F3F
#FF33CC
#F3C
#FF66CC
#F6C
#996699
#969
#CC99CC
#C9C
#CC66CC
#C6C
#CC33CC
#C3C
#993399
#939
#660066
#606
#9966CC
#96C
#CC99FF
#C9F
#CC66FF
#C6F
#CC00FF
#C0F
#9933CC
#93C
#663366
#636
#666699
#669
#9999CC
#99C
#CCCCFF
#CCF
#663399
#639
#660099
#609
#330033
#303
#6699FF
#69F
#9999FF
#99F
#9933FF
#93F
#9966FF
#96F
#330066
#306
#6666FF
#66F
#6600FF
#60F
#6633CC
#63C
#6666CC
#66C
#333366
#336
#0066CC
#06C
#003399
#039
#000066
#006
#333399
#339
#003366
#036
#000033
#003
#0066FF
#06F
#3366FF
#36F
#0000FF
#00F
#0000CC
#00C
#3333CC
#33C
#3366CC
#36C
#0099FF
#09F
#00CCFF
#0CF
#66CCFF
#6CF
#0099CC
#09C
#006699
#069
#6699CC
#69C
#99CCFF
#9CF

Note que em cada campo da tabela de cores tem um código hexadecimal, com 6 caracteres, e outro código com 3. O primeiro código pode ser utilizado tanto em HTML quanto em CSS. Já o segundo pode ser usado apenas no CSS.

Se você não conseguir encontrar a cor certa a partir das tabelas acima, dê uma olhada na imagem a seguir:

Tabela de cores HTML e CSS

Tabela de Cores RGB

Logo acima você conferiu duas tabelas no padrão Hexadecimal. À seguir estou listando outra tabela, mas agora no padrão RGB (Red Green Blue).

Tabela de Cores RGB

Convertendo RGB em Hexadecimal

Por diversas vezes tive problemas, pois estava sem um editor de cores que mostrasse o código Hexadecimal. Por isso tive que recorrer ao Microsoft Paint, uma ferramenta básica do Windows, e converter o código RGB em Hexadecimal. Aqui, como já temos a tabela de cores em Hexa e RGB basta fazer a correspondência.

Para entender como funciona, abra o Paint (pressionando “Windows + R” em seu teclado e digitando MSPAINT).

Windows - Microsoft Paint

Em seguida siga esses passos:

Microsoft Paint

1 - Clique em Editar Cores
2 - Selecione a cor desejada
3 - Veja o código RGB (Red – Vermelho, Green – Verde, Blue – Azul) e procure nas tabelas acima os códigos correspondentes em Hexadecimal.

Microsoft Paint

Divulgue esse artigo

Deixe seu comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *