Cores CSS
O curso mostra como o CSS descreve cores em telas que misturam luz vermelha, verde e azul. Ele trata da notação hex, com suas formas abreviadas e com alfa, do rgb() com números decimais ou porcentagens e do hsl() com matiz, saturação e luminosidade. Explica a diferença entre o alfa dentro de uma cor e a propriedade opacity aplicada ao elemento inteiro. Também apresenta as palavras-chave de cor e o currentColor, e termina com um botão e um selo temáticos feitos com HSL e propriedades customizadas.
O que você vai aprender
- ✓Como a mistura aditiva de luz vermelha, verde e azul está por trás de toda cor CSS
- ✓Ler e escrever cores hex, incluindo as formas de 3, 4 e 8 dígitos
- ✓Usar rgb() e hsl() nas sintaxes moderna e legada, com alfa
- ✓A diferença entre o alfa numa cor e a propriedade opacity
- ✓Palavras-chave de cor e currentColor como fonte única de verdade
- ✓Criar estados de cor relacionados com HSL e propriedades customizadas
Por que cor precisa de um formato
Diga a palavra "azul" para outra pessoa e vocês dois imaginam algo próximo o bastante, o céu, jeans, uma caneca favorita. Diga isso para um navegador e não significa nada até ser traduzido em números que uma tela consiga reproduzir. Todo pixel de toda tela que você tem é construído com pequenos…
Ler a aula completa grátis →Currículo
7 aulasPor que cor precisa de um formato
Telas misturam luz vermelha, verde e azul de forma aditiva, e as notações CSS descrevem essa mistura.
Notação hex de cor
O formato #RRGGBB, o cinza de pares iguais, o atalho de três dígitos, o alfa e a indiferença a maiúsculas.
rgb() e rgba()
rgb() escreve vermelho, verde e azul como números decimais ou porcentagens, com um valor de alfa opcional.
hsl() e hsla()
hsl() descreve a cor por ângulo de matiz, saturação e luminosidade, e cada eixo muda sozinho.
Opacity e transparência alfa
O alfa deixa uma cor translúcida, e a opacity desbota o elemento inteiro, com texto e filhos.
Palavras-chave de cor e currentColor
Palavras-chave representam valores hex fixos, e currentColor reaproveita a cor do texto em bordas e ícones.
Juntando tudo: temperando um componente
Um botão e um selo recebem cinco cores relacionadas a partir de uma matiz HSL em propriedades customizadas.