🎨 Guia Completo sobre Cores em HTML
As cores são um elemento fundamental no design web. Em HTML e CSS, existem várias formas de especificar cores.
Vamos explorar os principais métodos.
1. Nomes de Cores Pré-definidos
HTML e CSS possuem 140 nomes de cores pré-definidos que podem ser usados diretamente.
Tomato
DodgerBlue
MediumSeaGreen
Violet
Orange
SlateBlue
📌 Nota: Embora os nomes de cores sejam fáceis de lembrar, eles são limitados. Para mais controle e variedade, usamos outros métodos.
2. Códigos Hexadecimais
As cores hexadecimais são especificadas com #RRGGBB, onde RR (vermelho), GG (verde) e BB (azul) são valores hexadecimais entre 00 e FF.
🔴 Vermelho puro (#ff0000) —
🟢 Verde puro (#00ff00) —
🔵 Azul puro (#0000ff) —
3. Valores RGB e RGBA
RGB = Red, Green, Blue (0 a 255). RGBA adiciona Alpha (transparência de 0 a 1).
🔴 Vermelho: rgb(255, 0, 0) →
🟢 Verde: rgb(0, 255, 0) →
🔵 Azul com 50% transparência: rgba(0, 0, 255, 0.5) → (sobreposto no fundo branco)
Verde Marinho
rgb(60,179,113)
Dodger Blue
rgb(30,144,255)
Violeta Azul
rgb(138,43,226)
Verde 70% transp
rgba(...,0.3)
Dodger 30% transp
rgba(...,0.7)
Laranja 40% transp
rgba(...,0.6)
Violeta 60% transp
rgba(...,0.4)
Carmim 20% transp
rgba(...,0.8)
4. Valores HSL e HSLA
HSL = Hue (Matiz 0-360), Saturação (%), Luminosidade (%). HSLA adiciona Alpha.
🎨 Vermelho: hsl(0, 100%, 50%) →
🌿 Verde: hsl(120, 100%, 50%) →
💧 Azul 50% transparente: hsla(240, 100%, 50%, 0.5) →
Tabela de Cores Básicas
| Cor | Nome | Hexadecimal | RGB | HSL |
|---|
| Vermelho | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%) |
| Verde | #008000 | rgb(0,128,0) | hsl(120,100%,25%) |
| Azul | #0000ff | rgb(0,0,255) | hsl(240,100%,50%) |
| Amarelo | #ffff00 | rgb(255,255,0) | hsl(60,100%,50%) |
| Preto | #000000 | rgb(0,0,0) | hsl(0,0%,0%) |
| Branco | #ffffff | rgb(255,255,255) | hsl(0,0%,100%) |
Tabela Completa de Cores (Seleção)
| Nome | Hexadecimal | Amostra |
|---|
| Black | #000000 | |
| DarkSlateBlue | #483D8B | |
| MidnightBlue | #191970 | |
| Navy | #000080 | |
| DodgerBlue | #1E90FF | |
| DeepSkyBlue | #00BFFF | |
| Aqua/Cyan | #00FFFF | |
| Teal | #008080 | |
| SpringGreen | #00FF7F | |
| Lime | #00FF00 | |
| Gold | #FFD700 | |
| Orange | #FFA500 | |
| Tomato | #FF6347 | |
| Crimson | #DC143C | |
| Fuchsia/Magenta | #FF00FF | |
| Plum | #DDA0DD | |
| Lavender | #E6E6FA | |
| WhiteSmoke | #F5F5F5 | |
*Lista reduzida para legibilidade. Existem 140+ nomes pré-definidos.
🎯 Como Escolher Cores para Seu Site
- ✨ Use ferramentas como Adobe Color ou Coolors para criar paletas harmoniosas
- 🔍 Mantenha o contraste adequado para legibilidade (especialmente texto/fundo)
- 🎨 Limite sua paleta principal a 2-3 cores principais
- 🧠 Considere o significado psicológico das cores
- 📱 Teste suas cores em diferentes dispositivos
- 🔁 Use cores consistentes para elementos similares (links, botões, etc.)
♿ Dica de Acessibilidade: Sempre verifique o contraste entre o texto e o fundo. Ferramentas como o WebAIM Contrast Checker podem ajudar.
🛠️ Ferramentas Úteis
💡 Espero que este guia tenha ajudado a entender melhor como trabalhar com cores em HTML e CSS!