📘 Aula 2 MD-2: Representando Cores 📘
A representação de cores é um dos elementos mais importantes do design web. As cores influenciam emoções, percepção de marca, hierarquia visual e a legibilidade de conteúdos.
Fundamentos da Cor
Antes de aplicar cores, é importante entender alguns conceitos:
- Matiz (Hue): A cor pura, como vermelho, azul ou verde.
- Saturação (Saturation): Intensidade da cor (quanto mais saturada, mais viva).
- Luminosidade (Lightness): Clareza ou escuridão da cor.
- Cores quentes: vermelho, laranja e amarelo, que transmitem energia e ação.
- Cores frias: azul, verde e roxo, que transmitem calma e confiabilidade.
- Cores neutras: branco, preto, cinza, que equilibram paletas e melhoram a legibilidade.
Formatos de Representação de Cores
Existem diferentes maneiras de representar cores em HTML e CSS:
- Nome da cor:
red,blue,green. - Hexadecimal:
#FF0000para vermelho,#00FF00para verde. - RGB: Red, Green, Blue. Ex.:
rgb(255,0,0). - RGBA: RGB com transparência. Ex.:
rgba(255,0,0,0.5). - HSL: Matiz, Saturação, Luminosidade. Ex.:
hsl(0,100%,50%). - HSLA: HSL com transparência. Ex.:
hsla(120,100%,50%,0.5).
Exemplos Visuais de Cores
Veja exemplos aplicados de cores no HTML:
Tipos de Representação de Cores
As cores podem ser representadas de diferentes formas em HTML e CSS. Cada formato tem suas vantagens dependendo do contexto:
1. Por Nome
Algumas cores possuem nomes padrões reconhecidos pelos navegadores:
<p style="color:red">Texto vermelho</p>
<p style="color:blue">Texto azul</p>
<p style="color:green">Texto verde</p>
2. Hexadecimal
Usa códigos de 6 dígitos representando RGB em hexadecimal:
<p style="color:#FF0000">Texto vermelho</p>
<p style="color:#0000FF">Texto azul</p>
<p style="color:#00FF00">Texto verde</p>
3. RGB
Define cores através de valores Red, Green e Blue de 0 a 255:
<p style="color:rgb(255,0,0)">Texto vermelho</p>
<p style="color:rgb(0,0,255)">Texto azul</p>
<p style="color:rgb(0,255,0)">Texto verde</p>
4. HSL
HSL define Matiz (0°-360°), Saturação (%) e Luminosidade (%):
<p style="color:hsl(0,100%,50%)">Vermelho</p>
<p style="color:hsl(240,100%,50%)">Azul</p>
<p style="color:hsl(120,100%,50%)">Verde</p>
💡 Dica: Use HSL para ajustes dinâmicos de saturação e luminosidade em temas responsivos, ou quando quiser alterar tons facilmente.
Combinações de Cores
Para criar harmonia visual, utilize diferentes combinações:
- Cores complementares: opostas no círculo cromático, criam contraste e atraem atenção (ex.: azul e laranja).
- Cores análogas: próximas no círculo cromático, criam harmonia e fluidez (ex.: azul, azul-claro e azul-esverdeado).
- Triádicas: três cores equidistantes no círculo, gerando equilíbrio visual.
- Cores neutras: usadas como base para equilibrar cores vibrantes e destacar elementos importantes.
Exemplos de Código de Combinação
<div style="background-color:red; color:white">Erro</div>
<div style="background-color:yellow; color:black">Aviso</div>
<div style="background-color:green; color:white">Sucesso</div>
Gradientes e Transparência
Gradientes permitem transições suaves e profundidade visual:
Acessibilidade
Use cores de forma acessível:
- Contraste: texto e fundo devem ter contraste suficiente (mínimo 4.5:1 para textos normais).
- Evite usar apenas cores para transmitir informações: combine ícones, bordas ou texto.
- Teste em diferentes dispositivos e simulações de daltonismo.
Aplicação de Cores em UI
Exemplos práticos de uso de cores em elementos de interface:
- Botões de ação: vermelho ou laranja para chamar atenção.
- Informações secundárias: tons neutros como cinza ou azul-claro.
- Mensagens de alerta: vermelho para erro, amarelo para aviso, verde para sucesso.
- Backgrounds: neutros para destacar conteúdos principais.
Paletas de Cores Sugeridas
Paletas consistentes ajudam a criar identidade visual clara:
Boas Práticas Finais
- Use cores consistentes em todo o site.
- Destaque elementos importantes com cores fortes e contrastantes.
- Evite excesso de cores vibrantes em blocos de texto longos.
- Combine cores neutras com cores vivas para hierarquia visual.
- Teste sempre acessibilidade, contraste e percepção em diferentes dispositivos.
Conclusão
Dominar a representação de cores em sites é essencial para criar interfaces atrativas, claras e acessíveis. Aplicar corretamente cores, gradientes, transparências e combinações melhora a experiência do usuário e fortalece a comunicação visual.