Tabela de Cores HTML – Nomes, Hexadecimal e RGB

Você já ouviu falar no sistema hexadecimal ou na Tabela de Cores HTML? 

Para quem trabalha com programação, com design gráfico ou webdesign, este sistema é bastante conhecido. Utilizando 16 símbolos diferentes, mesclando o sistema numérico e alfabético, o sistema hexadecimal é utilizado para identificar 100 cores, a partir do sistema RGB (red, green e blue). 

O sistema hexadecimal é usado para a criação de páginas na web e em programas de edição de imagem como Photoshop, Illustrator, Corel Draw, etc. 

Mas, e como fazer para compreender o sistema hexadecimal e aplicá-lo em um projeto, de maneira simples e descomplicada com Tabela de Cores HTML?

Nos acompanhe que você vai entender direitinho como ele funciona!

Tabela de Cores HTML (Tabela)

Confira a seguir a Tabela de Cores HTML:

Tabela de Cores HTML - Hexadecimal
Tabela de Cores HTML – Hexadecimal

Cores HTML Hexadecimal

Confira quais são as 99 cores disponíveis no sistema hexadecimal:

  1. White
  2. Red
  3. Green
  4. Blue
  5. Magenta
  6. Cyan
  7. Yellow
  8. Black
  9. Aqua
  10. Baker”s Chocolate
  11. Blue Violet
  12. Brass
  13. Bright Gold
  14. Brown
  15. Bronze
  16. Bronze II
  17. Cadet Blue
  18. Cool Copper
  19. Copper
  20. Coral
  21. Corn Flower Blue
  22. Dark Brown
  23. Dark Green
  24. Dark Green Copper
  25. Dark Olive Green
  26. Dark Orchid
  27. Dark Purple
  28. Dark Slate Blue
  29. Dark Slate Grey
  30. Dark Tan
  31. Dark Turquoise
  32. Dark Wood
  33. Dim Grey
  34. Dusty Rose
  35. Feldspar
  36. Firebrick
  37. Forest Green
  38. Gold
  39. Goldenrod
  40. Gray
  41. Green Copper
  42. Green Yellow
  43. Hunter Green
  44. Indian Red
  45. Khaki
  46. Light Blue
  47. Light Grey
  48. Light Steel Blue
  49. Light Wood
  50. Lime
  51. Mandarian Orange
  52. Maroon
  53. Medium Aquamarine
  54. Medium Blue
  55. Medium Forest Green
  56. Medium Goldenrod
  57. Medium Orchid
  58. Medium Sea Green
  59. Medium Slate Blue
  60. Medium Spring Green
  61. Medium Turquoise
  62. Medium Violet Red
  63. Medium Wood
  64. Midnight Blue
  65. Navy
  66. Neon Blue
  67. Neon Pink
  68. New Midnight Blue
  69. New Tan
  70. Old Gold
  71. Orange
  72. Orange Red
  73. Orchid
  74. Pale Green
  75. Pink
  76. Plum
  77. Quartz
  78. Rich Blue
  79. Salmon
  80. Scarlet
  81. Sea Green
  82. Semi-Sweet Chocolate
  83. Sienna
  84. Silver
  85. Sky Blue
  86. Slate Blue
  87. Spicy Pink
  88. Spring Green
  89. Steel Blue
  90. Summer Sky
  91. Tan
  92. Thistle
  93. Turquoise
  94. Very Dark Brown
  95. Very Light Grey
  96. Violet
  97. Violet Red
  98. Wheat
  99. Yellow Green

Teoria dos Códigos Hexadecimais

Com uma Tabela de Cores HTML, um sistema de códigos hexadecimais oferece uma gama muito maior de combinações para os programadores relacionarem com as cores que conhecemos a partir do sistema RGB, que vamos explicar mais detalhadamente adiante.

Aqui, cada número representa 4 bits de dados binários. Já cada letra possui 16 bits e é representado por quatro dígitos. Dessa forma, a base do padrão hexadecimal é:

0<1<2<3<4<5<6<7<8<9<a<b<c<d<e<f

Depois que já foram utilizados todos os dígitos hexadecimais, a repetição se dá com a adição de outro dígito, formando as sequências abaixo:

10, 11, 12, 13, 14, 15, 16, 17, 18, 19

1A, 1B, 1C, 1D, 1E, 1F

20, 21, 22, 23,…

A combinação destes 16 símbolos possibilita combinações distintas, formando a base das cores que temos disponíveis para a programação em HTML. 

Achou complicado? Então continue conosco que vamos trazer mais dicas de como compreender este sistema. 

Significado dos Símbolos

Agora, chegou a hora de entender o que significa cada um dos símbolos que descrevemos acima!

Cada cor conta com uma sequência de seis dígitos na sua representação. Quanto mais próximo de F, mais clara será a cor. Quanto mais próxima de A, mais escura. A representação sempre terá o caractere # no início.

Dessa forma, #FF0000 representa a cor vermelha, pois os dois FFs estão nos primeiros dígitos. Os dígitos referentes ao azul (blue) e em seguida ao verde (green) estão com ausência total de cor, o que é representado pelos zeros. 

Assim, red é #FF0000, green é #00FF00 e blue é #0000FF.

O código #000000 representa a ausência total de cor (preto) e o código #FFFFFF representa a cor branca, já que o valor máximo foi empregado em todas as cores. 

Uma curiosidade é que quando os valores são iguais para as três cores, temos escalas de cinza. O código #5A5A5A é um cinza escuro, pois está próximo do preto #000000. Já o código #B7B7B7 é um cinza mais claro, pois está mais próximo do branco #FFFFFF.

Cores HTML RGB

Tabela de Cores HTML - RGB
Tabela de Cores HTML – RGB

O que é RGB?

O RGB, como afirmamos no início, é o sistema que utiliza as cores primárias (red, green e blue) para criar todas as cores que conhecemos na linguagem HTML. 

A partir da quantidade e intensidade de cada uma dessas cores, é possível criar as combinações que conhecemos a partir do ambiente digital. 

Para usar uma metáfora bastante simples, é como quando um pintor que utiliza determinada quantidade de tinta de tonalidades diferentes para criar uma nova cor. 

Como funciona um código RGB

O sistema RGB não é utilizado somente na computação. Ele é amplamente utilizado em aparelhos eletrônicos como monitores de computador, televisores, câmeras digitais e etc.

Cada uma das cores que percebemos nos aparelhos que utilizam este sistema, possuem em algum nível de 0 a 255 algo de vermelho, verde ou azul. Se a quantidade for 0 para as três cores, temos a tonalidade preta. 

Se for 255 para as três, temos a cor branca. É possível saber qual a porcentagem quando você seleciona determinada cor nos softwares de edição de imagem.

A variação entre valores mínimos corresponde a tons escuros e entre os valores máximos, os tons são mais intensos e mais claros.

Aqui, abrimos parênteses para uma curiosidade. Você sabe como funciona a formação das cores em telas e monitores?

Cada pequeno quadrado de uma tela é dividido em três partes e cada uma delas representa uma cor do sistema RGB. Todas as cores que vemos na tela são formadas a partir de uma combinação entre o vermelho, o verde e o azul (assim como na tabela HTML).

Cada uma das três partes contém os elementos químicos fósforo, xenônio e neônio (no estado gasoso) que emitem luz quando são bombardeados por raios ultravioleta. A combinação das cores e a luz emitida formam um ponto de imagem.

Tabela de Cores HTML Completa

E então, gostou de compreender um pouco melhor como funciona o sistema hexadecimal de cores, feito a partir do sistema de cores RGB? 

Esperamos que sim! Agora, você está pronto para brincar e experimentar os diferentes códigos disponíveis e arrasar na combinação de cores no seu trabalho. 

Mas, se não ficou muito claro em um primeiro contato, fique tranquilo, que você acabará assimilando com o tempo.

Para auxiliar você nos seus futuros projetos, confira a Tabela de Cores HTML abaixo completa listando todas as cores e os seus respectivos códigos.

Tons de Cinza

Nome da Cor Código hexadecimal Código RGB
Black #000000 (0,0,0)
grey11 #1C1C1C (28,28,28)
grey21 #363636 (54,54,54)
grey31 #4F4F4F (79,79,79)
DimGray #696969 (105,105,105)
Gray #808080 (128,128,128)
DarkGray #A9A9A9 (169,169,169)
Silver #C0C0C0 (192,192,192)
LightGrey #D3D3D3 (211,211,211)
Gainsboro #DCDCDC (220,220,220)

Tons de Azul

Nome da Cor Código hexadecimal Código RGB
SlateBlue #6A5ACD (106,90,205)
SlateBlue1 #836FFF (131,111,255)
SlateBlue3 #6959CD (105,89,205)
DarkSlateBlue #483D8B (72,61,139)
MidnightBlue #191970 (25,25,112)
Navy #000080 (0,0,128)
DarkBlue #00008B (0,0,139)
MediumBlue #0000CD (0,0,205)
Blue #0000FF (0,0,255)
CornflowerBlue #6495ED (100,149,237)
RoyalBlue #4169E1 (65,105,225)
DodgerBlue #1E90FF (30,144,255)
DeepSkyBlue #00BFFF (0,191,255)
LightSkyBlue #87CEFA (135,206,250)
SkyBlue #87CEEB (135,206,235)
LightBlue #ADD8E6 (173,216,230)
SteelBlue #4682B4 (70,130,180)
LightSteelBlue #B0C4DE (176,196,222)
SlateGray #708090 (112,128,144)
LightSlateGray #778899 (119,136,153)

Tons de Ciano

Nome da Cor Código hexadecimal Código RGB
Aqua / Cyan #00FFFF (0,255,255)
DarkTurquoise #00CED1 (0,206,209)
Turquoise #40E0D0 (64,224,208)
MediumTurquoise #48D1CC (72,209,204)
LightSeaGreen #20B2AA (32,178,170)
DarkCyan #008B8B (0,139,139)
Teal #008080 (0,128,128)
Aquamarine #7FFFD4 (127,255,212)
MediumAquamarine #66CDAA (102,205,170)
CadetBlue #5F9EA0 (95,158,160)

Tons de Verde

Nome da Cor Código hexadecimal Código RGB
DarkSlateGray #2F4F4F (47,79,79)
MediumSpringGreen #00FA9A (0,250,154)
SpringGreen #00FF7F (0,255,127)
PaleGreen #98FB98 (152,251,152)
LightGreen #90EE90 (144,238,144)
DarkSeaGreen #8FBC8F (143,188,143)
MediumSeaGreen #3CB371 (60,179,113)
SeaGreen #2E8B57 (46,139,87)
DarkGreen #006400 (0,100,0)
Green #008000 (0,128,0)
ForestGreen #228B22 (34,139,34)
LimeGreen #32CD32 (50,205,50)
Lime #00FF00 (0,255,0)
LawnGreen #7CFC00 (124,252,0)
Chartreuse #7FFF00 (127,255,0)
GreenYellow #ADFF2F (173,255,47)
YellowGreen #9ACD32 (154,205,50)
OliveDrab 6B8E23 (107,142,35)
DarkOliveGreen #556B2F (85,107,47)
Olive #808000 (128,128,0)

Tons de Marrom

Nome da Cor Código hexadecimal Código RGB
DarkKhaki #BDB76B (189,83,107)
Goldenrod #DAA520 (218,165,32)
DarkGoldenrod #B8860B (184,134,11)
SaddleBrown #8B4513 (139,69,19)
Sienna #A0522D (160,82,45)
RosyBrown #BC8F8F (188,143,143)
Peru #CD853F (205,133,63)
Chocolate #D2691E (210,105,30)
SandyBrown #F4A460 (244,164,96)
NavajoWhite #FFDEAD (255,222,173)
Wheat #F5DEB3 (245,222,179)
BurlyWood #DEB887 (222,184,135)
Tan #D2B48C (210,180,140)

Tons de Roxo

Nome da Cor Código hexadecimal Código RGB
MediumSlateBlue #7B68EE (123,104,238)
MediumPurple #9370DB (147,112,219)
BlueViolet #8A2BE2 (138,43,226)
Indigo #4B0082 (75,0,130)
DarkViolet #9400D3 (148,0,211)
DarkOrchid #9932CC (153,50,204)
MediumOrchid #BA55D3 (186,85,211)
Purple #A020F0 (128,0,128)
DarkMagenta #8B008B (139,0,139)
Fuchsia / Magenta #FF00FF (255,0,255)
Violet #EE82EE (238,130,238)
Orchid #DA70D6 (218,112,214)
Plum #DDA0DD (221,160,221)

Tons de Rosa

Nome da Cor Código hexadecimal Código RGB
MediumVioletRed #C71585 (199,21,133)
DeepPink #FF1493 (255,20,147)
HotPink #FF69B4 (255,105,180)
PaleVioletRed #DB7093 (219,112,147)
LightPink #FFB6C1 (255,182,193)
Pink #FFC0CB (255,192,203)
LightCoral #F08080 (240,128,128)
IndianRed #CD5C5C (205,92,92)
Crimson #DC143C (220,20,60)

Tons de Vermelho

Nome da Cor Código hexadecimal Código RGB
Maroon #800000 (128,0,0)
DarkRed #8B0000 (139,0,0)
FireBrick #B22222 (178,34,34)
Brown #A52A2A (165,42,42)
Salmon #FA8072 (250,128,114)
DarkSalmon #E9967A (233,150,122)
LightSalmon #FFA07A (255,160,122)
Coral #FF7F50 (255,127,80)
Tomato #FF6347 (255,99,71)
Red #FF0000 (255,0,0)

Tons de Laranja

Nome da Cor Código hexadecimal Código RGB
OrangeRed #FF4500 (255,69,0)
DarkOrange #FF8C00 (255,140,0)
Orange #FFA500 (255,165,0)

Tons de Amarelo

Nome da Cor Código hexadecimal Código RGB
Gold #FFD700 (255,215,0)
Yellow #FFFF00 (255,255,0)
Khaki #F0E68C (240,230,140)

Tons Pastel

Nome da Cor Código hexadecimal Código RGB
AliceBlue #F0F8FF (240,248,255)
GhostWhite #F8F8FF (248,248,255)
Snow #FFFAFA (255,250,250)
Seashell #FFF5EE (255,245,238)
FloralWhite #FFFAF0 (255,250,240)
WhiteSmoke #F5F5F5 (245,245,245)
Beige #F5F5DC (245,245,220)
OldLace #FDF5E6 (253,245,230)
Ivory #FFFFF0 (255,255,240)
Linen #FAF0E6 (250,240,230)
Cornsilk #FFF8DC (255,248,220)
AntiqueWhite #FAEBD7 (250,235,215)
BlanchedAlmond #FFEBCD (255,235,205)
Bisque #FFE4C4 (255,228,196)
LightYellow #FFFFE0 (255,255,224)
LemonChiffon #FFFACD (255,250,205)
LightGoldenrodYellow #FAFAD2 (250,250,210)
PapayaWhip #FFEFD5 (255,239,213)
PeachPuff #FFDAB9 (255,218,185)
Moccasin #FFE4B5 (255,228,181)
PaleGoldenrod #EEE8AA (238,232,170)
MistyRose #FFE4E1 (255,228,225)
LavenderBlush #FFF0F5 (255,240,245)
Lavender #E6E6FA (230,230,250)
Thistle #D8BFD8 (216,191,216)
Azure #F0FFFF (240,255,255)
LightCyan #E0FFFF (224,255,255)
PowderBlue #B0E0E6 (176,224,230)
PaleTurquoise #E0FFFF (175,238,238)
Honeydew #F0FFF0 (240,255,240)
MintCream #F5FFFA (245,255,250)

FAÇA UM COMENTÁRIO