Nomes de Cores HTML/CSS: Guia Completo com Lista de Todas as Cores

Os nomes de cores HTML/CSS são uma forma conveniente e legível de especificar cores em seus projetos web. Em vez de usar códigos hexadecimais como #FF0000, você pode simplesmente usar Red. Neste guia completo, você aprenderá tudo sobre nomes de cores HTML e CSS, incluindo uma lista completa de todas as cores disponíveis.

O Que São Nomes de Cores HTML/CSS?

Nomes de cores HTML/CSS são palavras-chave pré-definidas que representam cores específicas. Essas cores foram padronizadas pela especificação HTML e CSS e são reconhecidas por todos os navegadores modernos. Em vez de memorizar códigos hexadecimais ou RGB, você pode usar nomes descritivos como Blue, Crimson, DarkSlateBlue e muitos outros.

Por Que Usar Nomes de Cores?

1. Legibilidade do Código

Usar nomes de cores torna seu código muito mais legível:

/* Difícil de entender */
.elemento {
  background-color: #FF1493;
}

/* Fácil de entender */
.elemento {
  background-color: DeepPink;
}

2. Facilidade de Uso

Não precisa memorizar códigos hexadecimais ou RGB. Basta usar o nome da cor.

3. Compatibilidade

Todas as cores nomeadas são amplamente suportadas por navegadores modernos e são parte do padrão HTML/CSS.

4. Manutenibilidade

Código mais fácil de manter e entender, especialmente quando trabalhando em equipe.

Lista Completa de Cores HTML/CSS

Existem mais de 140 cores nomeadas padrão no HTML/CSS. Aqui estão as principais categorias:

Cores Básicas

• Black - #000000 - Preto
• White - #FFFFFF - Branco
• Red - #FF0000 - Vermelho
• Green - #008000 - Verde
• Blue - #0000FF - Azul
• Yellow - #FFFF00 - Amarelo
• Cyan - #00FFFF - Ciano
• Magenta - #FF00FF - Magenta

Cores de Azul

• AliceBlue - #F0F8FF - Azul Alice
• CornflowerBlue - #6495ED - Azul Centáurea
• DarkBlue - #00008B - Azul Escuro
• DeepSkyBlue - #00BFFF - Azul Céu Profundo
• DodgerBlue - #1E90FF - Azul Dodger
• LightBlue - #ADD8E6 - Azul Claro
• MediumBlue - #0000CD - Azul Médio
• MidnightBlue - #191970 - Azul Meia-Noite
• Navy - #000080 - Azul Marinho
• RoyalBlue - #4169E1 - Azul Real
• SkyBlue - #87CEEB - Azul Céu
• SteelBlue - #4682B4 - Azul Aço

Cores de Verde

• DarkGreen - #006400 - Verde Escuro
• ForestGreen - #228B22 - Verde Floresta
• GreenYellow - #ADFF2F - Verde Amarelo
• LawnGreen - #7CFC00 - Verde Gramado
• LightGreen - #90EE90 - Verde Claro
• Lime - #00FF00 - Lima
• LimeGreen - #32CD32 - Verde Lima
• MediumSeaGreen - #3CB371 - Verde Mar Médio
• PaleGreen - #98FB98 - Verde Pálido
• SeaGreen - #2E8B57 - Verde Mar
• SpringGreen - #00FF7F - Verde Primavera
• YellowGreen - #9ACD32 - Verde Amarelo

Cores de Vermelho e Rosa

• Crimson - #DC143C - Carmesim
• DarkRed - #8B0000 - Vermelho Escuro
• DeepPink - #FF1493 - Rosa Profundo
• FireBrick - #B22222 - Tijolo Fogo
• HotPink - #FF69B4 - Rosa Quente
• IndianRed - #CD5C5C - Vermelho Índio
• LightCoral - #F08080 - Coral Claro
• LightPink - #FFB6C1 - Rosa Claro
• MediumVioletRed - #C71585 - Vermelho Violeta Médio
• PaleVioletRed - #DB7093 - Vermelho Violeta Pálido
• Pink - #FFC0CB - Rosa
• Salmon - #FA8072 - Salmão

Cores de Roxo e Violeta

• BlueViolet - #8A2BE2 - Violeta Azul
• DarkMagenta - #8B008B - Magenta Escuro
• DarkOrchid - #9932CC - Orquídea Escura
• DarkSlateBlue - #483D8B - Azul Ardósia Escuro
• DarkViolet - #9400D3 - Violeta Escuro
• Indigo - #4B0082 - Anil
• MediumOrchid - #BA55D3 - Orquídea Média
• MediumPurple - #9370DB - Roxo Médio
• MediumSlateBlue - #7B68EE - Azul Ardósia Médio
• Orchid - #DA70D6 - Orquídea
• Purple - #800080 - Roxo
• RebeccaPurple - #663399 - Roxo Rebecca
• SlateBlue - #6A5ACD - Azul Ardósia
• Violet - #EE82EE - Violeta

Cores de Laranja e Amarelo

• DarkOrange - #FF8C00 - Laranja Escuro
• Gold - #FFD700 - Dourado
• GoldenRod - #DAA520 - Vara Dourada
• Orange - #FFA500 - Laranja
• OrangeRed - #FF4500 - Laranja Vermelho
• PaleGoldenRod - #EEE8AA - Vara Dourada Pálida
• Yellow - #FFFF00 - Amarelo

Cores de Marrom e Bege

• Beige - #F5F5DC - Bege
• Brown - #A52A2A - Marrom
• BurlyWood - #DEB887 - Madeira Burly
• Chocolate - #D2691E - Chocolate
• Peru - #CD853F - Peru
• RosyBrown - #BC8F8F - Marrom Rosado
• SaddleBrown - #8B4513 - Marrom Sela
• SandyBrown - #F4A460 - Marrom Areia
• Sienna - #A0522D - Siena
• Tan - #D2B48C - Bronzeado
• Wheat - #F5DEB3 - Trigo

Cores de Cinza

• DarkGray / DarkGrey - #A9A9A9 - Cinza Escuro
• DimGray / DimGrey - #696969 - Cinza Sombrio
• Gainsboro - #DCDCDC - Gainsboro
• Gray / Grey - #808080 - Cinza
• LightGray / LightGrey - #D3D3D3 - Cinza Claro
• LightSlateGray / LightSlateGrey - #778899 - Cinza Ardósia Claro
• Silver - #C0C0C0 - Prata
• SlateGray / SlateGrey - #708090 - Cinza Ardósia
• WhiteSmoke - #F5F5F5 - Fumaça Branca

Cores Especiais e Decorativas

• AliceBlue - #F0F8FF - Azul Alice
• AntiqueWhite - #FAEBD7 - Branco Antigo
• Aqua - #00FFFF - Água
• Aquamarine - #7FFFD4 - Água-Marinha
• Azure - #F0FFFF - Azul Celeste
• Bisque - #FFE4C4 - Bisque
• BlanchedAlmond - #FFEBCD - Amêndoa Branqueada
• Cornsilk - #FFF8DC - Seda de Milho
• FloralWhite - #FFFAF0 - Branco Floral
• GhostWhite - #F8F8FF - Branco Fantasma
• HoneyDew - #F0FFF0 - Orvalho de Mel
• Ivory - #FFFFF0 - Marfim
• Lavender - #E6E6FA - Lavanda
• LavenderBlush - #FFF0F5 - Rubor Lavanda
• LemonChiffon - #FFFACD - Chiffon de Limão
• Linen - #FAF0E6 - Linho
• MintCream - #F5FFFA - Creme de Menta
• MistyRose - #FFE4E1 - Rosa Enevoada
• Moccasin - #FFE4B5 - Mocassim
• NavajoWhite - #FFDEAD - Branco Navajo
• OldLace - #FDF5E6 - Renda Antiga
• PapayaWhip - #FFEFD5 - Chicote de Mamão
• PeachPuff - #FFDAB9 - Puff de Pêssego
• Seashell - #FFF5EE - Concha do Mar
• Snow - #FFFAFA - Neve

Como Usar Nomes de Cores em CSS

Exemplo Básico

.elemento {
  background-color: Crimson;
  color: White;
  border: 2px solid DarkBlue;
}

Em HTML Inline

<div style="background-color: DeepSkyBlue; color: White;">
  Texto com cor nomeada
</div>

Em JavaScript

element.style.backgroundColor = 'DarkSlateBlue';
element.style.color = 'White';

Vantagens e Desvantagens

Vantagens

✅ Legibilidade: Código mais fácil de ler e entender ✅ Facilidade: Não precisa memorizar códigos hexadecimais ✅ Compatibilidade: Suportado por todos os navegadores modernos ✅ Manutenibilidade: Código mais fácil de manter

Desvantagens

❌ Limitação: Apenas ~140 cores disponíveis (vs milhões com HEX) ❌ Precisão: Não pode especificar cores customizadas ❌ Consistência: Alguns nomes podem ser ambíguos

Quando Usar Nomes de Cores vs Códigos HEX

Use Nomes de Cores Quando:

• Você precisa de uma cor padrão comum
• Legibilidade do código é prioridade
• Trabalhando com cores básicas e conhecidas
• Prototipagem rápida

Use Códigos HEX Quando:

• Você precisa de uma cor específica e exata
• Trabalhando com paletas de cores customizadas
• Precisa de controle total sobre a cor
• Design profissional com cores precisas

Ferramentas Úteis

Para encontrar e trabalhar com nomes de cores HTML/CSS, você pode usar:

• Nossa ferramenta de Nomes de Cores HTML/CSS - Lista completa com busca e cópia fácil
• W3Schools Color Names - Referência oficial
• HTML Color Codes - Guia visual de cores

Dicas e Boas Práticas

1. Consistência

Escolha um padrão e mantenha consistente em todo o projeto:

/* Boa prática */
.primary-button {
  background-color: RoyalBlue;
  color: White;
}

.secondary-button {
  background-color: LightGray;
  color: Black;
}

2. Acessibilidade

Sempre considere o contraste ao escolher cores:

/* Bom contraste */
.texto {
  color: Black;
  background-color: White;
}

/* Contraste ruim */
.texto {
  color: LightGray;
  background-color: White;
}

3. Semântica

Use nomes de cores que façam sentido no contexto:

/* Semântico */
.error {
  color: Crimson;
}

.success {
  color: ForestGreen;
}

.warning {
  color: Orange;
}

Compatibilidade

Nomes de cores HTML/CSS são suportados por:

• ✅ Chrome/Edge (todas as versões modernas)
• ✅ Firefox (todas as versões modernas)
• ✅ Safari (todas as versões modernas)
• ✅ Opera (todas as versões modernas)
• ✅ Navegadores móveis (iOS Safari, Chrome Mobile)

Conclusão

Nomes de cores HTML/CSS são uma ferramenta poderosa e conveniente para desenvolvedores web. Eles tornam o código mais legível, fácil de manter e são amplamente suportados. Embora tenham limitações em relação a códigos hexadecimais, são perfeitos para cores padrão e prototipagem rápida.

Pronto para começar? Use nossa ferramenta de Nomes de Cores HTML/CSS para encontrar e copiar facilmente qualquer cor nomeada!