🎨Manual Prático de Cores: Hexadecimais, RGB e HSL
✨Introdução
Entender como funcionam os modelos de cores é essencial para desenvolvedores que trabalham com design e front-end.
Este manual prático explica os modelos Hexadecimal, RGB e HSL de forma clara e objetiva, com exemplos aplicáveis no dia a dia.
1. Cores Hexadecimais
O modelo hexadecimal representa cores como uma combinação de valores de vermelho (R), verde (G) e azul (B), em formato hexadecimal (base 16).
Ele é amplamente usado em CSS e HTML para definir cores em páginas web.
Formato: #RRGGBB
- Cada componente (RR, GG, BB) varia de
00
(0 no decimal) aFF
(255 no decimal).
Exemplos:
- Branco:
#FFFFFF
- Preto:
#000000
- Azul:
#0000FF
Uso no CSS:
css
body {
background-color: #FF5733; /* Cor laranja */
}
2. Cores RGB
O modelo RGB utiliza valores decimais para representar cores como a intensidade de vermelho (R), verde (G) e azul (B). Cada componente varia de 0
a 255
.
Formato: rgb(R, G, B)
- Ideal para misturar cores com precisão.
Exemplos:
- Branco:
rgb(255, 255, 255)
- Preto:
rgb(0, 0, 0)
- Vermelho:
rgb(255, 0, 0)
Uso no CSS:
css
h1 {
color: rgb(102, 205, 170); /* Verde médio */
}
3. Cores HSL
O modelo HSL representa cores por Matiz (Hue), Saturação (Saturation) e Luminosidade (Lightness). Ele é mais intuitivo para ajustes finos de cor.
Formato: hsl(H, S%, L%)
- Hue (H): Ângulo no cÃrculo cromático (
0
a360
). - 0: Vermelho | 120: Verde | 240: Azul
- Saturação (S): Intensidade da cor (
0%
a100%
). - Luminosidade (L): Brilho da cor (
0%
a100%
).
Exemplos:
- Branco:
hsl(0, 0%, 100%)
- Preto:
hsl(0, 0%, 0%)
- Azul Claro:
hsl(200, 100%, 50%)
Uso no CSS:
css
p {
background-color: hsl(340, 80%, 70%); /* Rosa pastel */
}
Conclusão
Os modelos de cores Hexadecimal, RGB e HSL oferecem flexibilidade e precisão para desenvolvedores. Escolher o modelo certo depende do contexto e da necessidade. Com prática, você dominará o uso das cores para criar interfaces atraentes e funcionais.🚀