Tabela de Cores HTML, Hexadecimal e RGB

A Tabela de Cores em HTML é um sistema de representação muito utilizado no mundo digital por designers, especialistas em UI/UX e até mesmo programadores, pois oferece uma maneira simples de especificar as cores.  Por exemplo, você pode representar a cor vermelha de 3 formas, com o seu próprio nome “red”, em hexadecimal como #FF0000 ou através do RGB (255, 0, 0).

E quando falamos de sites, existem várias maneiras de incorporar as cores, você pode fazer usando de forma inline no código HTML, através da tag STYLE ou usando um arquivo externo. Os códigos podem ser usados de 3 formas, em Hexadecimal, RGB ou através dos nomes das cores em inglês.

Como aplicar as cores em HTML?

Se você quer aplicar diretamente uma cor em um elemento HTML é possível. Usamos esse tipo de aplicação em alguns casos, o mais recomendado é separar a estilização da marcação, ou seja, HTML e CSS em arquivos diferentes. Pois assim, você terá um código mais estruturado.

Aplicando cores no HTML de forma inline

Para aplicar as cores em um elemento HTML de forma inline é bastante simples, vamos dar três exemplos, o primeiro usando o H1 como exemplo, o segundo com um parágrafo e o último com uma div.

<h1 style="color:blue;">Título Azul</h1>
<p style="color:#FF0000;">Parágrafo vermelho</p>
<div style="background-color:#FFFF00;"> 
<p>Div amarela</p>
</div>

Aplicando cores no HTML da página através da tag <style>

Você pode aplicar as cores usando a TAG STYLE dentro da página atacando diretamente os elementos que deseja colorir.

Um elemento do tipo parágrafo no corpo do HTML da sua página, ficaria assim:

<style>
p { color: #88ff88; }
</style>

Em uma classe, se fosse uma “div” por exemplo, no corpo do HTML da sua página, ficaria assim:

<style>
div.classe01 { color: #88ff88; }
</style>

Aplicando cores em um arquivo CSS externo

Para aplicar as cores em um arquivo externo, primeiro, você deve criar um arquivo CSS, por exemplo: style.css. Após criá-lo, é necessário incorporá-lo no seu cabeçalho (header), rodapé (footer) ou na própria página que vai utilizá-lo. Para fazer isso, siga as etapas abaixo:

Faça o INCLUDE do CSS EXTERNO no seu HTML da seguinte forma:

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

Dessa forma, podemos inserir o código diretamente no arquivo css:

p { color: #88ff88; }

Em uma classe, se fosse uma “div” por exemplo, no corpo do seu CSS, ficaria assim:

div.classe02 { color: #88ff88; }

Tabela de Cores HTML, Hexadecimal e RGB

Agora que já explicamos como aplicar as cores de forma inline, utilizando a tag <style> e também através de um arquivo externo utilizando um “include”, vejamos a tabela abaixo.

Cor
Código RGB
Código Hexadecimal
Snow
255 250 250
#FFFAFA
GhostWhite
248 248 255
#F8F8FF
WhiteSmoke
245 245 245
#F5F5F5
Gainsboro
220 220 220
#DCDCDC
FloralWhite
255 250 240
#FFFAF0
OldLace
253 245 230
#FDF5E6
Linen
250 240 230
#FAF0E6
AntiqueWhite
250 235 215
#FAEBD7
PapayaWhip
255 239 213
#FFEFD5
BlanchedAlmond
255 235 205
#FFEBCD
Bisque
255 228 196
#FFE4C4
PeachPuff
255 218 185
#FFDAB9
NavajoWhite
255 222 173
#FFDEAD
Moccasin
255 228 181
#FFE4B5
Cornsilk
255 248 220
#FFF8DC
Ivory
255 255 240
#FFFFF0
LemonChiffon
255 250 205
#FFFACD
Seashell
255 245 238
#FFF5EE
Honeydew
240 255 240
#F0FFF0
MintCream
245 255 250
#F5FFFA
Azure
240 255 255
#F0FFFF
AliceBlue
240 248 255
#F0F8FF
Lavender
230 230 250
#E6E6FA
LavenderBlush
255 240 245
#FFF0F5
MistyRose
255 228 225
#FFE4E1
White
255 255 255
#FFFFFF
Black
0 0 0
#000000
DarkSlateGray
47 79 79
#2F4F4F
DimGrey
105 105 105
#696969
SlateGrey
112 128 144
#708090
LightSlateGray
119 136 153
#778899
Grey
190 190 190
#BEBEBE
LightGray
211 211 211
#D3D3D3
MidnightBlue
25 25 112
#191970
NavyBlue
0 0 128
#000080
CornflowerBlue
100 149 237
#6495ED
DarkSlateBlue
72 61 139
#483D8B
SlateBlue
106 90 205
#6A5ACD
MediumSlateBlue
123 104 238
#7B68EE
LightSlateBlue
132 112 255
#8470FF
MediumBlue
0 0 205
#0000CD
RoyalBlue
65 105 225
#4169E1
Blue
0 0 255
#0000FF
DodgerBlue
30 144 255
#1E90FF
DeepSkyBlue
0 191 255
#00BFFF
SkyBlue
135 206 235
#87CEEB
LightSkyBlue
135 206 250
#87CEFA
SteelBlue
70 130 180
#4682B4
LightSteelBlue
176 196 222
#B0C4DE
LightBlue
173 216 230
#ADD8E6
PowderBlue
176 224 230
#B0E0E6
PaleTurquoise
175 238 238
#AFEEEE
DarkTurquoise
0 206 209
#00CED1
MediumTurquoise
72 209 204
#48D1CC
Turquoise
64 224 208
#40E0D0
Cyan
0 255 255
#00FFFF
LightCyan
224 255 255
#E0FFFF
CadetBlue
95 158 160
#5F9EA0
MediumAquamarine
102 205 170
#66CDAA
Aquamarine
127 255 212
#7FFFD4
DarkGreen
0 100 0
#006400
DarkOliveGreen
85 107 47
#556B2F
DarkSeaGreen
143 188 143
#8FBC8F
SeaGreen
46 139 87
#2E8B57
MediumSeaGreen
60 179 113
#3CB371
LightSeaGreen
32 178 170
#20B2AA
PaleGreen
152 251 152
#98FB98
SpringGreen
0 255 127
#00FF7F
LawnGreen
124 252 0
#7CFC00
Green
0 255 0
#00FF00
Chartreuse
127 255 0
#7FFF00
MedSpringGreen
0 250 154
#00FA9A
GreenYellow
173 255 47
#ADFF2F
LimeGreen
50 205 50
#32CD32
YellowGreen
154 205 50
#9ACD32
ForestGreen
34 139 34
#228B22
OliveDrab
107 142 35
#6B8E23
DarkKhaki
189 183 107
#BDB76B
PaleGoldenrod
238 232 170
#EEE8AA
LtGoldenrodYello
250 250 210
#FAFAD2
LightYellow
255 255 224
#FFFFE0
Yellow
255 255 0
#FFFF00
Gold
255 215 0
#FFD700
LightGoldenrod
238 221 130
#EEDD82
Goldenrod
218 165 32
#DAA520
DarkGoldenrod
184 134 11
#B8860B
RosyBrown
188 143 143
#BC8F8F
IndianRed
205 92 92
#CD5C5C
SaddleBrown
139 69 19
#8B4513
Sienna
160 82 45
#A0522D
Peru
205 133 63
#CD853F
Burlywood
222 184 135
#DEB887
Beige
245 245 220
#F5F5DC
Wheat
245 222 179
#F5DEB3
SandyBrown
244 164 96
#F4A460
Tan
210 180 140
#D2B48C
Chocolate
210 105 30
#D2691E
Firebrick
178 34 34
#B22222
Brown
165 42 42
#A52A2A
DarkSalmon
233 150 122
#E9967A
Salmon
250 128 114
#FA8072
LightSalmon
255 160 122
#FFA07A
Orange
255 165 0
#FFA500
DarkOrange
255 140 0
#FF8C00
Coral
255 127 80
#FF7F50
LightCoral
240 128 128
#F08080
Tomato
255 99 71
#FF6347
OrangeRed
255 69 0
#FF4500
Red
255 0 0
#FF0000
HotPink
255 105 180
#FF69B4
DeepPink
255 20 147
#FF1493
Pink
255 192 203
#FFC0CB
LightPink
255 182 193
#FFB6C1
PaleVioletRed
219 112 147
#DB7093
Maroon
176 48 96
#B03060
MediumVioletRed
199 21 133
#C71585
VioletRed
208 32 144
#D02090
Magenta
255 0 255
#FF00FF
Violet
238 130 238
#EE82EE
Plum
221 160 221
#DDA0DD
Orchid
218 112 214
#DA70D6
MediumOrchid
186 85 211
#BA55D3
DarkOrchid
153 50 204
#9932CC
DarkViolet
148 0 211
#9400D3
BlueViolet
138 43 226
#8A2BE2
Purple
160 32 240
#A020F0
MediumPurple
147 112 219
#9370DB
Thistle
216 191 216
#D8BFD8
Snow
255 250 250
#FFFAFA

A teoria das cores

A teoria das cores é um campo da arte e da ciência que explora qual é a nossa percepção e como combinamos as cores. Ela se baseia em três componentes: Matiz, Saturação e Brilho. A Matiz se refere à cor em si, como vermelho, azul ou verde. A Saturação, mede a pureza da cor, indo de uma cor completamente pura, a uma mistura com cinza. Já o Brilho, indica o quão claro ou escuro é uma matiz.

Além disso, a teoria das cores explora a roda de cores, que organiza de forma circular, mostrando as cores, suas relações e combinações. Cores opostas na roda criam contraste, enquanto cores próximas na roda têm harmonia.

As cores também têm associações emocionais e culturais. Por exemplo, o vermelho pode evocar paixão e energia, enquanto o azul é frequentemente associado à calma e confiabilidade. Essas associações podem variar culturalmente.

A teoria das cores é fundamental no design gráfico, na psicologia e em muitos outros campos, pois ajuda a criar composições visuais eficazes e a compreender como as cores afetam as emoções e a percepção.

O significado das cores para o Marketing

As cores desempenham um papel crucial no marketing, pois podem influenciar diretamente nas emoções das pessoas, criar associações e impactar a decisão de compra dos consumidores. Aqui estão algumas interpretações das cores no contexto do marketing:

  1. Vermelho: É uma cor que evoca energia, excitação e urgência. Muitas vezes, é usada em promoções e chamadas para ação, incentivando os consumidores a agir imediatamente.

  2. Azul: Transmite confiabilidade, segurança e profissionalismo. Muitas empresas financeiras e tecnológicas usam o azul para criar uma sensação de confiança.

  3. Amarelo: Sugere otimismo, alegria e criatividade. Pode ser eficaz para atrair a atenção e transmitir uma vibração positiva.

  4. Verde: É associado à natureza, sustentabilidade e saúde. Muitas marcas relacionadas a alimentos orgânicos e produtos naturais usam o verde.

  5. Roxo: Evoca luxo, criatividade e espiritualidade. É frequentemente utilizado por marcas que desejam transmitir um toque de sofisticação.

  6. Laranja: Transmite entusiasmo, diversão e vitalidade. Pode ser usado para criar uma sensação de urgência em promoções.

  7. Preto: Representa elegância, luxo e exclusividade. É usado por marcas de alto padrão e moda.

  8. Branco: Simboliza simplicidade, pureza e limpeza. Pode criar uma sensação de espaço e serenidade.

  9. Marrom: É frequentemente associado à rusticidade, autenticidade e confiabilidade. Pode ser usado por marcas que valorizam a tradição.

  10. Cinza: Indica neutralidade, equilíbrio e moderação. Pode ser usado para criar uma imagem sóbria e profissional.

Principais aplicativos para criar uma paleta de cores

Há vários aplicativos excelentes para criar paletas de cores. Aqui estão alguns dos melhores e mais populares:

  1. Adobe Color Wheel (anteriormente Adobe Kuler):
    • Disponível online e como aplicativo móvel.
    • Integra-se com as ferramentas da Adobe Creative Cloud.
    • Permite a criação de paletas de cores a partir de fotos ou do zero.
  2. Coolors:
    • Um gerador de paletas de cores online e aplicativo móvel.
    • Oferece uma opção de gerar paletas aleatórias ou personalizadas.
    • Permite exportar paletas para várias ferramentas de design.
  3. Paletton:
    • Um criador de paletas de cores online.
    • Oferece recursos avançados de teoria das cores.
    • Permite visualizar como as cores se complementam em um design.
  4. Colormind:
    • Uma ferramenta de geração de paletas de cores automatizada.
    • Cria paletas com base em uma imagem ou cor de partida.
    • Ótimo para encontrar combinações de cores harmoniosas.
  5. Adobe Capture:
    • Aplicativo móvel da Adobe que permite capturar cores de fotos.
    • Além de paletas de cores, também cria padrões e formas a partir de imagens.
  6. Palette Generator (Pictaculous):
    • Uma ferramenta online simples que gera paletas de cores a partir de uma imagem.
    • Oferece opções de exportação para diversas aplicações de design.
  7. Color Hunt:
    • Um site que oferece paletas de cores cuidadosamente selecionadas.
    • Ótimo para encontrar inspiração em paletas já criadas.
  8. Colorme.io:
    • Aplicativo da web que gera paletas de cores a partir de imagens enviadas.
    • Oferece opções de personalização e exportação.
  9. Material Design Palette:
    • Ferramenta oficial do Google para criar paletas de cores seguindo as diretrizes do Material Design.
    • Ótimo para criar designs consistentes com a estética do Google.
  10. Canva:
    • Uma plataforma de design online que inclui um gerador de paletas de cores.
    • Oferece recursos de design adicionais, como criação de gráficos e designs de mídia social.

Gostou do conteúdo?

Comente e compartilhe em suas redes. Se quiser ter mais informações sobre o universo do Marketing, Marketing Digital, Publicidade, Growth e Tech, visite os outros artigos do nosso Blog.

Artigos Recomendados

Deixe seu comentário

0 0 Votos
Article Rating
Se inscrever
Notify of
guest

1 Comentário
Antigo
Novo Mais votado
Feedbacks embutidos
Ver todos os comentários
Carina

Interessante esse assunto, geralmente acesso esse site e sempre acho conteúdo interessante como esse.

Cadastre o seu e-mail em nosso newsletter

Assine nossa newsletter

Acompanhe todas novidades e conteúdos exclusivos sobre marketing, publicidade, digital, tecnologia e mundo corporativo.

    Suas informações de contato não serão divulgadas ou utilizadas para SPAM.
    ×
    Share via
    Copy link