Valores de Cor: Nomeados, Hexadecimais, RGB e HSL
Aprenda todos os formatos de cor do CSS: cores nomeadas, códigos hexadecimais e as funções rgb() e hsl().
Valores de Cor: Nomeados, Hexadecimais, RGB e HSL é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Formatos de cores do CSS
O CSS oferece vários formatos de cor. A escolha do formato adequado depende do seu fluxo de trabalho, das ferramentas utilizadas e de você precisar de transparência ou manipulação dinâmica.
Cores nomeadas
O CSS define mais de 140 cores nomeadas, como red, tomato e cornflowerblue. Elas são ótimas para prototipagem rápida, mas oferecem precisão limitada.
<h1>Named Colors</h1>
<button>cornflowerblue button</button>
Cores hexadecimais
As cores hexadecimais usam um # seguido por 6 dígitos hexadecimais (ou 3, na forma abreviada). Cada par de dígitos representa o vermelho, o verde e o azul (0–255).
<p class="full-hex">Full hex: #ff6347</p>
<p class="shorthand-hex">Shorthand hex: #f64</p>
Hexadecimal com alfa
Adicione um 4º par de dígitos hexadecimais (ou um 4º dígito na forma abreviada) para definir a transparência alfa:
<div class="hex-alpha-full">8-digit hex alpha</div>
<div class="hex-alpha-short">4-digit shorthand alpha</div>
Cores RGB
rgb() recebe três números inteiros (0–255) para os canais vermelho, verde e azul. É muito legível e fácil de analisar programaticamente.
<p class="rgb-tomato">rgb(255, 99, 71)</p>
<p class="rgb-black">rgb(0, 0, 0)</p>
<p class="rgb-white">rgb(255, 255, 255)</p>
Cores RGBA
Adicione um quarto parâmetro (0–1) a rgb() para definir a transparência alfa. Isso equivale à sintaxe mais recente de rgb() com uma barra.
<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
<p class="rgba-modern">rgb(255 99 71 / 0.5)</p>
Cores HSL
hsl() define a cor por meio da matiz (0–360°), da saturação (0–100%) e da luminosidade (0–100%). É muito mais intuitivo para criar paletas e variantes de cores.
<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
<p class="hsl-steelblue">hsl(210, 70%, 50%)</p>
Cores HSLA
Assim como rgba(), hsla() adiciona um canal alfa. O CSS moderno permite usar uma barra como separador:
<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
<p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>
Criando variantes de cores com HSL
O HSL é excelente para gerar tons claros e escuros. Mantenha a matiz e a saturação constantes e altere a luminosidade:
<button class="btn-light">Light</button>
<button class="btn">Base</button>
<button class="btn-dark">Dark</button>
Palavra-chave currentColor
currentColor é um valor dinâmico igual ao valor atual da propriedade color do elemento. Use-o para fazer com que bordas, sombras ou preenchimentos SVG herdem automaticamente a cor do texto.
<a href="#">Link with currentColor border</a>
Palavra-chave transparent
A palavra-chave transparent equivale a rgba(0,0,0,0) — totalmente transparente. É útil para efeitos de passagem do cursor nos quais você faz a transição de transparente para uma cor.
<button>Transparent background</button>
Verificação rápida
Qual formato de cor facilita a criação de tons mais claros e mais escuros da mesma matiz?
Recapitulação
O CSS oferece formatos de cores nomeadas, hexadecimais, RGB e HSL. O HSL é ideal para a manipulação programática de cores. Todos os formatos aceitam um canal alfa para transparência. currentColor e transparent são palavras-chave especiais úteis.
Perguntas Frequentes
A aula “Valores de Cor: Nomeados, Hexadecimais, RGB e HSL” é grátis?
Sim — o texto completo de “Valores de Cor: Nomeados, Hexadecimais, RGB e HSL” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Valores de Cor: Nomeados, Hexadecimais, RGB e HSL”?
Aprenda todos os formatos de cor do CSS: cores nomeadas, códigos hexadecimais e as funções rgb() e hsl(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Valores de Cor: Nomeados, Hexadecimais, RGB e HSL”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Valores de Cor: Nomeados, Hexadecimais, RGB e HSL
- Cor e Imagem de Fundo
- Gradientes: Linear e Radial
- Opacidade e Transparência RGBA