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:
- 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.
- Azul: Transmite confiabilidade, segurança e profissionalismo. Muitas empresas financeiras e tecnológicas usam o azul para criar uma sensação de confiança.
- Amarelo: Sugere otimismo, alegria e criatividade. Pode ser eficaz para atrair a atenção e transmitir uma vibração positiva.
- Verde: É associado à natureza, sustentabilidade e saúde. Muitas marcas relacionadas a alimentos orgânicos e produtos naturais usam o verde.
- Roxo: Evoca luxo, criatividade e espiritualidade. É frequentemente utilizado por marcas que desejam transmitir um toque de sofisticação.
- Laranja: Transmite entusiasmo, diversão e vitalidade. Pode ser usado para criar uma sensação de urgência em promoções.
- Preto: Representa elegância, luxo e exclusividade. É usado por marcas de alto padrão e moda.
- Branco: Simboliza simplicidade, pureza e limpeza. Pode criar uma sensação de espaço e serenidade.
- Marrom: É frequentemente associado à rusticidade, autenticidade e confiabilidade. Pode ser usado por marcas que valorizam a tradição.
- 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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Color Hunt:
- Um site que oferece paletas de cores cuidadosamente selecionadas.
- Ótimo para encontrar inspiração em paletas já criadas.
- Colorme.io:
- Aplicativo da web que gera paletas de cores a partir de imagens enviadas.
- Oferece opções de personalização e exportação.
- 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.
- 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.
Interessante esse assunto, geralmente acesso esse site e sempre acho conteúdo interessante como esse.