Cores: Nome, Hex, RGB, HSL

Cor é a propriedade CSS mais visível - e tem várias formas de ser escrita. Você vai usar uma na maioria das vezes, mas é bom conhecer as outras para não estranhar quando aparecerem em código alheio.

1. Nome da cor (named colors)

h1 { color: red; }
p { color: darkgray; }

CSS tem 147 cores com nome: red, blue, tomato, rebeccapurple... Funciona, mas você não tem controle fino. Útil pra protótipo, raro em produção.

2. Hexadecimal (a mais comum)

h1 { color: #1a73e8; }    /* azul do Google */
p { color: #333; }        /* cinza escuro */
.bg { background: #fff; } /* branco puro */

# seguido de 3, 6 ou 8 dígitos hexadecimais (0-9 e a-f). Cada par de dígitos representa a intensidade de vermelho, verde e azul (0 = nada, ff = máximo). #fff é atalho para #ffffff (branco). #333 é atalho para #333333 (cinza escuro).

É o formato que mais aparece no mundo real e no Figma - vale a pena saber ler. Dica: #000 é preto; #fff é branco. Tudo entre eles varia os três canais.

3. RGB e RGBA

h1 { color: rgb(26, 115, 232); }      /* mesmo azul de #1a73e8 */
.bg { background: rgba(0, 0, 0, 0.5); } /* preto com 50% de transparência */

Mesma ideia do hex, mas com rgb() e três números de 0 a 255. O rgba() adiciona um quarto número: o alfa (opacidade), de 0 (invisível) a 1 (totalmente visível). Útil quando você quer algo semi-transparente.

/* Formato moderno: espaços e / para o alfa */
h1 { color: rgb(26 115 232 / 0.8); }

4. HSL e HSLA (a forma mais "humana")

h1 { color: hsl(217, 82%, 51%); }   /* mesmo azul de #1a73e8 */
.bg { background: hsla(0, 0%, 0%, 0.5); }

hsl(tonalidade, saturação%, luminosidade%) é mais fácil de razonar que RGB ou hex:

• H (Hue / Tonalidade): a "cor" no arco-íris, de 0 a 360. 0 é vermelho, 120 é verde, 240 é azul.
• S (Saturation): 0% é cinza, 100% é a cor pura.
• L (Lightness / Luminosidade): 0% é preto, 100% é branco, 50% é a cor "normal".

Quer uma versão mais clara da cor? Aumenta o L. Mais escura? Diminui. Quer tirar a saturação pra ficar um cinza? Zera o S. Essa manipulação é chata em hex (você fica chutando valores), mas direta em HSL.

• Hex (#1a73e8): o mais comum. Bom pra copiar do Figma.
• RGB: quando precisa de cálculos ou transparência (com rgba).
• HSL: quando vai ajustar a cor (clarear, escurecer, dessaturar).
• Nome: só pra teste rápido.

Dica: quase todo site tem um design system com 5-10 cores principais, definidas como variáveis (veremos no nível avançado). Você raramente vai escrever uma cor "solta" no CSS de produção - vai pegar do sistema.

No próximo nó, vamos deixar o texto bonito: fontes, tamanhos, peso e espaçamento entre linhas.