Cores em HTML
Defina cores em HTML com nomes, códigos hex (#RRGGBB, #RGB, #RRGGBBAA), rgb()/rgba() e hsl()/hsla(). Exemplos, tabela de nomes e dicas de contraste.
As cores em HTML são aplicadas com CSS, seja de forma inline por meio do atributo style ou em uma folha de estilos. Você nunca define uma cor apenas no HTML — você define uma propriedade CSS como color (cor do texto), background-color ou border-color, e atribui a ela um valor de cor. Esta página cobre todos os formatos de valor de cor que você pode usar:
- Cores nomeadas — palavras-chave como
red,tomatoourebeccapurple. - Hexadecimal —
#RRGGBB, a forma abreviada#RGBe o formato de 8 dígitos#RRGGBBAA(com canal alfa). rgb()/rgba()— canais vermelho, verde e azul (mais opacidade opcional).hsl()/hsla()— matiz, saturação e luminosidade (mais opacidade opcional).
Todos esses formatos são intercambiáveis: #FF0000, red, rgb(255, 0, 0) e hsl(0, 100%, 50%) descrevem o mesmo vermelho puro. Para uma referência mais aprofundada no lado do CSS, veja os capítulos CSS color e CSS background-color.
Códigos de Cor Hex
Um código de cor hex é um triplete hexadecimal que representa três valores separados, definindo os níveis das cores componentes. Ele é especificado com notação hexadecimal (hex) para uma mistura dos valores de cor Vermelho, Verde e Azul. O menor valor que pode ser atribuído a uma das fontes de luz é 0 (hex 00). O maior valor é 255 (hex FF).
Os valores hex são escritos como números de seis dígitos, começando com um sinal #. As letras usadas em um dígito hexadecimal podem ser maiúsculas ou minúsculas. Por exemplo, para especificar a cor branca, você pode escrever #FFFFFF ou #ffffff.
Existem mais duas formas hex que vale conhecer:
- Forma abreviada
#RGB— quando cada canal usa um par repetido, você pode contraí-lo.#FF0000vira#F00e#FFCC00vira#FC0. O navegador expande cada dígito duplicando-o. - Formato de 8 dígitos
#RRGGBBAA— adiciona um par final para o canal alfa (opacidade), de00(totalmente transparente) aFF(totalmente opaco). Por exemplo,#1c87c980é o azul#1c87c9com aproximadamente 50% de opacidade.
Para adicionar uma cor a um elemento de texto, use o atributo style (onde a propriedade color é seu código hex) ou as propriedades CSS correspondentes, como color: ou background-color:.
Exemplo da propriedade background-color usada com o valor "hex":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #d5dce8;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:#8ebf42;"> This is a text in green</p>
</body>
</html>Resultado
Você pode usar nossa ferramenta Color Picker para explorar milhões de cores e copiar seus valores Hex, RGB e HSL.
Nomes de Cores HTML
Para colorir um elemento de texto usando um nome de cor HTML, coloque o nome da cor (blue, por exemplo) em vez do código hex da etapa anterior.
Exemplo da propriedade color usada com o valor "nome de cor":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: blue;
color: white;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:blue;"> This is a text in blue</p>
</body>
</html>Valores de Cor RGB
Um valor rgb() mistura os canais vermelho, verde e azul, cada um de 0 a 255 — exatamente o mesmo modelo que o hex, mas escrito em decimal. rgb(255, 0, 0) é vermelho, rgb(0, 0, 0) é preto e rgb(255, 255, 255) é branco.
Para adicionar uma cor a um elemento de texto, use o atributo style (onde a propriedade color é seu valor RGB) ou as propriedades CSS correspondentes.
Exemplo da propriedade background-color usada com o valor "RGB":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color:rgb(25,25,112);
color: rgb(169,169,169);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:rgb(25,25,112);"> This is a text in blue</p>
</body>
</html>RGBA: adicionando opacidade
rgba() estende rgb() com um quarto valor, o canal alfa, que controla a opacidade de 0 (totalmente transparente) a 1 (totalmente opaco). Isso é útil para sobreposições coloridas ou fundos semitransparentes onde você deseja que a camada por baixo apareça.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: rgba(25, 25, 112, 0.5);
color: rgb(33, 33, 33);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This box uses a semi-transparent navy background</p>
</div>
</body>
</html>No CSS moderno, rgb(25 25 112 / 50%) é a sintaxe equivalente com espaços separados, e o hex de 8 dígitos #19197080 faz o mesmo trabalho.
Valores de Cor HSL e HSLA
hsl() descreve uma cor da forma como muitos designers pensam sobre ela — por matiz, saturação e luminosidade — o que facilita a criação de uma família de tons relacionados ajustando apenas um valor.
- Matiz é um ângulo na roda de cores de
0a360:0(e360) é vermelho,120é verde,240é azul. - Saturação é uma porcentagem:
0%é cinza,100%é a versão mais viva do matiz. - Luminosidade é uma porcentagem:
0%é preto,50%é a cor "normal",100%é branco.
hsla() adiciona um canal alfa para opacidade, assim como rgba().
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
background-color: hsl(210, 79%, 46%);
color: white;
padding: 22px;
}
.faded {
background-color: hsla(210, 79%, 46%, 0.4);
padding: 22px;
}
</style>
</head>
<body>
<div class="solid"><p>hsl background</p></div>
<div class="faded"><p>hsla background with 40% opacity</p></div>
</body>
</html>Como luminosidade e saturação são independentes do matiz, HSL é útil para gerar variações de hover ou versões "mais escuras/mais claras" de uma cor de marca: mantenha o matiz, diminua a luminosidade.
Cores e acessibilidade
A cor também diz respeito à legibilidade. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) exigem uma taxa de contraste de pelo menos:
- 4.5:1 para texto normal em relação ao fundo (nível AA).
- 3:1 para texto grande (cerca de 18pt / 24px, ou 14pt / 19px em negrito) e para componentes de interface e elementos gráficos.
Duas consequências que vale lembrar:
- Nunca dependa apenas da cor para transmitir informações — por exemplo, marque campos obrigatórios de formulários ou estados de erro com texto ou um ícone também, para que usuários daltônicos e usuários de leitores de tela não fiquem excluídos.
- Verifique suas combinações. Um cinza claro sobre fundo branco pode parecer elegante, mas não atingir o mínimo de 4.5:1. Use nosso Verificador de Contraste de Cores para testar um par de primeiro plano/fundo antes de publicar.
A paleta de 216 cores "web-safe" que tutoriais mais antigos listam (cores construídas apenas com os pares hex
00,33,66,99,CC,FF) era uma solução alternativa para telas limitadas a 256 cores. As telas modernas renderizam milhões de cores, portanto essa paleta está obsoleta e você deve escolher qualquer valor que se adapte ao seu design.
Lista de nomes de cores HTML:
Aqui está uma lista de alguns dos nomes de cores HTML padrão:
| Nome da Cor | Valor Hexadecimal |
|---|---|
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGrey | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkSlateGrey | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DimGrey | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Gray | #808080 |
| Grey | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenRodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSlateGrey | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | #000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
| Salmon | #FA8072 |
| SandyBrown | #F4A460 |
| SeaGreen | #2E8B57 |
| SeaShell | #FFF5EE |
| Sienna | #A0522D |
| Silver | #C0C0C0 |
| SkyBlue | #87CEEB |
| SlateBlue | #6A5ACD |
| SlateGray | #708090 |
| SlateGrey | #708090 |
| Snow | #FFFAFA |
| SpringGreen | #00FF7F |
| SteelBlue | #4682B4 |
| Tan | #D2B48C |
| Teal | #008080 |
| Thistle | #D8BFD8 |
| Tomato | #FF6347 |
| Turquoise | #40E0D0 |
| Violet | #EE82EE |
| Wheat | #F5DEB3 |
| White | #FFFFFF |
| WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
| YellowGreen | #9ACD32 |
Esses nomes de cores podem ser usados em código HTML e CSS para especificar a cor de textos, fundos, bordas e outros elementos. Para aprofundar no lado do CSS, leia os capítulos CSS color, CSS background-color e nomes de cores CSS.