🎨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) a FF (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 a 360).
• 0: Vermelho | 120: Verde | 240: Azul
• Saturação (S): Intensidade da cor (0% a 100%).
• Luminosidade (L): Brilho da cor (0% a 100%).

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.🚀