Logo Nomad Logo Nomad
Baixar aplicativo
  • Conheça a Nomad
Baixar aplicativo
  • Investimentos
  • Economia e mercado
  • Tecnologia
  • Viagens
  • Intercâmbio
  • Nomad
  • Compras
  • Investimentos
  • Economia e mercado
  • Tecnologia
  • Viagens
  • Intercâmbio
  • Nomad
  • Compras
Baixar aplicativo
Blog » Tecnologia » Código HTML de cores: confira quais são todos eles!
Tecnologia

Código HTML de cores: confira quais são todos eles!

codigo html de cores
  • Publicado em 24 de janeiro de 2023
  • ●
  • Editado em 24 de janeiro de 2023

Conhecer o código de cores HTML é extremamente importante para a carreira dos programadores. Para que as pessoas possam ter uma boa experiência como usuários do produto final, no caso um site ou aplicativo, é necessário priorizar também as cores, não somente o conteúdo.

Preparamos um artigo com as principais informações sobre código de cores para HTML. Entenda as diferenças e como elas impactam na construção de cada elemento de um site. Continue a leitura e saiba mais!

Selecione o tópico de sua preferência
  • Como funciona o código de cores?
    • Cores Hexadecimais
    • RGB
    • RGBA
    • HSL
    • HSLA
  • Tabela com todas as cores em HTML
  • Como descobrir o código das cores?
  • Como colocar código de cor no HTML?

Como funciona o código de cores?

Muitos programadores usam a tabela de cores HTML para direcionar as decisões do layout do produto que está sendo construído. As cores certas deixam os ambientes mais atrativos e fáceis de navegar, ou seja, a escolha correta das cores interfere diretamente no tempo que o usuário irá navegar.

Sempre que for necessário adicionar uma cor no código HTML é preciso escrever um formato, diretamente relacionado ao seu nome, com a definição de quais cores serão usadas em cada elemento. 

Cada cor tem suas variações. Para códigos HTML existem também versões diferentes que permitem incluir opções diversas em opacidade, luminosidade e variações de tons. 

Confira as principais opções de cores na programação HTML:

Cores Hexadecimais

É formado por seis letras ou números precedidos por “#”. Os dois primeiros se referem ao vermelho, os terceiro e quarto equivalem à intensidade de verde e os dois últimos representam a intensidade do azul. 

Os valores vão do 00 (mais escuro) até FF (mais claro). Exemplo: #FFFFFF é a cor branca, ou seja, a intensidade máxima das três cores. #FF0000 é a cor vermelha, com o máximo de vermelho e nada de azul e verde. 

RGB

A sigla vem das palavras do inglês Red (vermelho), Green (verde) e Blue (azul). A lógica é a mesma, a quantidade dessas cores formarão a cor final. 

A escala varia entre 0 e 255. Exemplo: temos no código rgb(255,255,255) é equivalente a cor branca, rgb(255,0,0) representa a cor vermelha e rgb(0,0,0) é utilizado para a cor preta.

RGBA

No formato RGBA é usado o mesmo código RGB com o acréscimo de um novo elemento, o Alpha. Este valor representa a opacidade da cor, que vai de 0.0 (transparente) e 1.0 (opaco). 

Exemplo: Preto com 50% de opacidade = rgba (0,0,0,0.5)

HSL

A sigla do sistema HSL vem de Hue (tom), Saturation (saturação) e Lightness (luminosidade). O valor do tom é medido em ângulos expressos em graus. A saturação é em porcentagem (ex: 0% um leve sombreado de saturação e 100% uma saturação total da cor). A luminosidade é retratada também em porcentagem.

HSLA

Semelhante ao HSL, com o acréscimo do valor Alpha, representando a opacidade. A lógica é semelhante ao padrão RGBA.

Para facilitar, trouxemos uma tabela completa de cores HTML para você usar como base. Olha só:

Tabela com todas as cores em HTML

Nome da CorCódigo hexadecimalCó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)
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)
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)
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)
OliveDrab6B8E23(107,142,35)
DarkOliveGreen#556B2F(85,107,47)
Olive#808000(128,128,0)
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)
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)
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)
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)
OrangeRed#FF4500(255,69,0)
DarkOrange#FF8C00(255,140,0)
Orange#FFA500(255,165,0)
Gold#FFD700(255,215,0)
Yellow#FFFF00(255,255,0)
Khaki#F0E68C(240,230,140)
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)

Como descobrir o código das cores?

Para descobrir o código de cor é necessário a utilização de algum software gráfico, como o Photoshop, ou até mesmo um mais simples como o Paint. Existem, também, alguns sites e extensões de navegadores que identificam o código das cores. 

Escolha o programa gráfico que você tem mais afinidade ou faça uma busca rápida nos buscadores de sites que identificam o código das cores. Sugerimos aqui três opções:

  • Site 24×7
  • Wibushi
  • Image Color Picker

Como colocar código de cor no HTML?

No HTML é possível inserir ou modificar as cores nos elementos na própria tag, através do estilo, na propriedade style ou em folha de estilo interna ou externa. Para um elemento inline, basta inserir dentro da tag do elemento o atributo style e modificar. 

Ex: <p style=”color:green”>Verde</p>

Como resultado, teremos: Verde

Assim, é possível modificar a cor dos seguintes elementos:

  • Texto
  • Caixas
  • Bordas

Então, conseguiu entender sobre o código de cores HTML e suas aplicações? Todas as vezes que se usa uma cor na programação, é importante detalhar bem o código dela. Pode até parecer detalhe, mas esta ação é fundamental para melhorar a legibilidade e a visualização de todos os elementos da página.

Se você gostou do artigo, compartilhe com seus amigos e familiares! Aproveite, também, para ficar de olho em nosso site, temos sempre novidades com as principais tendências do mercado de tecnologia.

Eduardo Sena Ver Perfil

Eduardo Sena

Líder de SEO e Content Manager

Especialista em SEO e produção de conteúdo, Eduardo conta com mais de 4 anos de experiência produzindo artigos sobre tecnologia, finanças e viagens.

Este artigo foi útil? Avalie
Média 0 / 5.0
Compartilhe esse post
  • Twitter Ícone
  • LinkedIn Ícone

Mais Lidos

Imagem de um passaporte sobre um bilhete de voo
Viagens
03/10/2023
Há 22 horas

Como acumular milhas mais rápido? 7 dicas práticas

Leia Mais
Mulher de cabelos cacheados olhando para o celular ao comprar dólar comercial
Economia e mercado
02/10/2023
Há 2 dias

Como comprar dólar comercial e economizar em suas viagens e compras online

Leia Mais

Assuntos Relacionados

qual o melhor horario para postar no instagram
Tecnologia
23/06/2023
Há 3 meses

Qual o melhor horário para postar no Instagram?

Leia Mais
1-milhao-visualizacoes-youtube
Tecnologia
26/05/2023
Há 2 meses

Quanto o YouTube paga por 1 milhão de visualizações?

Leia Mais
como viralizar no tiktok
Tecnologia
16/05/2023
Há 3 meses

Confira 12 dicas simples para viralizar no TikTok

Leia Mais
ícone de trações de um envelope

Baixe o app e abra sua conta agora

ícone da Apple Store de aplicativos ícone da Play Store de aplicativos
Logo Nomad


Estados Unidos
873 El Camino Real, Menlo Park,
CA 94025

Instagram Facebook LinkedIn
Produtos
  • Conta Global
  • Cartão Internacional
  • Transferências
  • Cambio
  • Investimentos
Soluções para você
  • Viajar pelo mundo
  • Comprar no exterior
  • Guardar dinheiro e investir
Vantagens
  • Benefícios Nomad
  • Nomad Pass
  • Nomad Lounge
Institucional
  • A Nomad
  • Legal
  • Canal de Ética
  • Código de Ética do Fornecedor
  • Carreiras
  • Contato
Conteúdos
  • Mapa do site
  • Guia Nomad
  • Imposto de Renda
Recursos
  • Central de ajuda
  • EN

Juntos com a Nomad

logo-synapse
logo-drive-wealth
logo-ouroinvest
mogno-dtvm-footer
  • Português