Quem trabalha com sites, sistemas ou qualquer tipo de interface digital cedo ou tarde precisa lidar com códigos de cores HTML. Eles estão em todo lugar. Botões, textos, fundos, links, alertas, banners, dashboards, tudo depende de cor para funcionar bem e comunicar a mensagem certa.
E não é só estética. Cor impacta usabilidade, conversão, acessibilidade e até a forma como o usuário confia ou não em uma página. Um simples tom errado já muda tudo. Por isso entender os códigos de cores HTML não é detalhe, é base.
Neste artigo você vai encontrar uma lista completa de cores HTML, explicada de forma simples, organizada e pensada para desenvolvedores, designers e curiosos que querem parar de chutar cor no olho. Aqui você aprende o que são os códigos, como funcionam, como usar e quais são os principais padrões usados na web.
O que são códigos de cores HTML?
Os códigos de cores HTML são formas padronizadas de representar cores em páginas web. Eles dizem ao navegador exatamente qual cor deve ser exibida, sem margem para interpretação.
Esses códigos podem aparecer de várias formas, mas todas elas servem para o mesmo objetivo: definir uma cor com precisão.
As formas mais usadas são:
- Código hexadecimal (HEX)
- RGB
- RGBA
- HSL
- Nomes de cores HTML
Cada uma tem sua função e contexto de uso.
Código de cores HTML em hexadecimal (HEX)
O formato mais comum e mais usado na web é o código hexadecimal, também chamado apenas de HEX.
Ele sempre começa com o símbolo # e vem seguido de seis caracteres, que podem ser números e letras.
Exemplo básico:
- #FFFFFF → branco
- #000000 → preto
- #FF0000 → vermelho
- #00FF00 → verde
- #0000FF → azul
Esses seis caracteres são divididos em três pares:
- Dois para vermelho (Red)
- Dois para verde (Green)
- Dois para azul (Blue)
Cada par vai de 00 até FF, onde 00 é ausência da cor e FF é intensidade máxima.
Exemplos de cores hexadecimais comuns
- #FFFFFF – branco
- #000000 – preto
- #808080 – cinza
- #C0C0C0 – prata
- #FF5733 – laranja avermelhado
- #3498DB – azul claro
- #2ECC71 – verde suave
- #9B59B6 – roxo
O HEX é preferido porque é curto, preciso e compatível com qualquer navegador.
Códigos de cores HTML RGB
O modelo RGB usa valores numéricos para definir a cor, sempre baseados em vermelho, verde e azul.
O formato é:
rgb(valor, valor, valor)
Cada valor vai de 0 a 255.
Exemplo:
- rgb(255, 255, 255) → branco
- rgb(0, 0, 0) → preto
- rgb(255, 0, 0) → vermelho
- rgb(0, 255, 0) → verde
- rgb(0, 0, 255) → azul
Esse modelo é muito usado quando se trabalha com cálculos dinâmicos de cor em JavaScript ou animações.
RGBA e transparência
O RGBA é uma variação do RGB que inclui transparência.
O formato é:
rgba(vermelho, verde, azul, alpha)
O valor alpha vai de 0 até 1.
- 0 significa totalmente transparente
- 1 significa totalmente opaco
Exemplo:
- rgba(0, 0, 0, 0.5) → preto com 50% de transparência
- rgba(255, 255, 255, 0.8) → branco levemente transparente
Esse formato é muito usado em overlays, sombras, modais e efeitos visuais modernos.
Códigos de cores HTML HSL
O modelo HSL trabalha com uma lógica mais visual e intuitiva.
Ele representa:
- Hue (matiz)
- Saturation (saturação)
- Lightness (luminosidade)
Formato:
hsl(matiz, saturação%, luminosidade%)
Exemplo:
- hsl(0, 100%, 50%) → vermelho
- hsl(120, 100%, 50%) → verde
- hsl(240, 100%, 50%) → azul
O HSL é muito usado quando se quer ajustar brilho ou intensidade de uma cor sem mudar o tom principal.
Nomes de cores HTML padrão
O HTML também aceita nomes de cores pré-definidos. Eles são práticos, mas limitados.
Alguns exemplos:
- white
- black
- red
- blue
- green
- yellow
- gray
- silver
- maroon
- navy
- olive
- teal
- purple
- pink
- orange
Esses nomes são reconhecidos por todos os navegadores modernos, mas não oferecem variedade suficiente para projetos mais elaborados.
Lista completa de cores HTML mais usadas
Abaixo estão cores muito usadas em desenvolvimento web, com seus códigos hexadecimais.
Tons de branco e cinza
- Branco: #FFFFFF
- Branco gelo: #F5F5F5
- Cinza claro: #D3D3D3
- Cinza médio: #808080
- Cinza escuro: #404040
- Preto: #000000
Tons de vermelho
- Vermelho puro: #FF0000
- Vermelho escuro: #8B0000
- Vinho: #800000
- Coral: #FF7F50
- Rosa forte: #FF1493
Tons de azul
- Azul puro: #0000FF
- Azul claro: #ADD8E6
- Azul céu: #87CEEB
- Azul petróleo: #0F3057
- Azul marinho: #000080
Tons de verde
- Verde puro: #008000
- Verde claro: #90EE90
- Verde limão: #32CD32
- Verde musgo: #556B2F
- Verde água: #00FA9A
Tons de amarelo e laranja
- Amarelo: #FFFF00
- Amarelo claro: #FFFACD
- Dourado: #FFD700
- Laranja: #FFA500
- Laranja escuro: #FF8C00
Tons de roxo e rosa
- Roxo: #800080
- Lilás: #C8A2C8
- Violeta: #EE82EE
- Rosa claro: #FFC0CB
- Magenta: #FF00FF
Cores HTML seguras para web
As chamadas cores web safe são aquelas que eram exibidas corretamente em qualquer monitor antigo. Hoje isso é menos relevante, mas ainda aparecem em alguns projetos.
Elas são formadas por combinações fixas de:
- 00
- 33
- 66
- 99
- CC
- FF
Exemplo:
- #336699
- #CC0000
- #66FF33
Mesmo não sendo obrigatórias hoje, essas cores ainda são usadas por tradição.
Como escolher cores HTML para projetos reais
Escolher cor não é só gosto pessoal. Alguns pontos importantes:
- Contraste entre texto e fundo
- Leitura em telas pequenas
- Acessibilidade visual
- Emoção transmitida pela cor
- Identidade visual da marca
Um erro comum é usar cores muito vibrantes em textos longos. Isso cansa o olho e prejudica a experiência.
Erros comuns ao usar códigos de cores HTML
Alguns deslizes aparecem muito, principalmente em iniciantes:
- Usar texto claro em fundo claro
- Exagerar na quantidade de cores
- Misturar estilos sem padrão
- Ignorar acessibilidade
- Usar transparência sem cuidado
Pequenos ajustes fazem muita diferença no resultado final.
Códigos de cores HTML e acessibilidade
Cores também precisam ser pensadas para pessoas com deficiência visual ou daltonismo. Contraste adequado entre texto e fundo é essencial.
Boas práticas incluem:
- Texto escuro em fundo claro ou vice-versa
- Evitar usar apenas cor para transmitir informação
- Testar combinações antes de publicar
Esse cuidado melhora o site para todo mundo, não só para quem tem limitação visual.
Quando usar HEX, RGB ou HSL?
Cada formato tem sua vantagem:
- HEX: simples, padrão, ideal para CSS
- RGB/RGBA: ótimo para efeitos dinâmicos
- HSL: perfeito para ajustes visuais finos
Saber alternar entre eles deixa o desenvolvimento mais profissional.
Códigos de cores HTML fazem diferença de verdade
Uma boa escolha de cor passa confiança, organiza a informação e melhora conversão. Uma escolha ruim confunde, cansa e afasta o usuário.
Por isso dominar códigos de cores HTML não é só saber números e letras, é entender como a cor conversa com quem está do outro lado da tela.
Os códigos de cores HTML são uma das bases do desenvolvimento web. Saber como funcionam, conhecer os principais padrões e entender quando usar cada formato torna qualquer projeto mais profissional e eficiente. Com uma boa paleta, o site ganha identidade, melhora a leitura e transmite exatamente o que você quer comunicar.
Se você trabalha com HTML, CSS ou design digital, dominar cores não é opcional, é essencial.
