Carregando...

Valores de cor CSS

Cores nomeadas bastam para começar. Marcas e designs precisam de valores exatos — um teal específico, uma camada suave, um tom que você possa ajustar um pouco. Isso vem dos formatos de valor de cor: hex, rgb() / rgba() e hsl() / hsla().

O que é um valor de cor?

Um valor de cor é o que você escreve depois de uma propriedade que aceita cor — por exemplo depois de color: ou mais tarde background-color:. A mesma propriedade de antes; formas mais ricas de escrever a cor. Palavras-chave nomeadas ainda contam como valores. Hoje entram os formatos numéricos que você usará toda semana.

Formatos em um olhar

Escolha o formato para a tarefa. Não precisa de toda a sintaxe no primeiro dia — aprenda o mapa e pratique os três do dia a dia.

📊 Formatos de valor de cor CSS

Formato Exemplo Melhor para
Nomeada teal Demos rápidas, ensino, rascunhos
Hex #0f766e Ferramentas de design, tokens de marca, colar do Figma
rgb() / rgba() rgb(15 118 110) / rgba(15, 118, 110, 0.85) Pensar em canais, transparência com alfa
hsl() / hsla() hsl(174 77% 25%) Ajustar matiz/luminosidade sem sair da família

Cores hex

Valores hex começam com # e dígitos hex (0–9, a–f). Formas comuns: seis dígitos #rrggbb (completo) e três #rgb (curto — cada dígito dobra). Maiúsculas ou minúsculas não importam.

Hex em texto e nota suave

css
CSS Code 
h1 {
color: #0f172a;
}

.note {
color: #0f766e;
}

Como ler #0f766e

Os pares são vermelho, verde, azul: 0f / 76 / 6e. Apps de design costumam exportar essa string — cole no CSS como está e mantenha o #.

rgb() e rgba()

rgb() mistura canais vermelho, verde e azul de 0 a 255 (ou porcentagens na sintaxe moderna). Adicione alfa com rgba() ou um quarto valor para a cor ficar parcialmente transparente.

Canais RGB e desvanecimento RGBA

css
CSS Code 
.lead {
color: rgb(51, 65, 85);
}

.overlay-label {
color: rgba(15, 118, 110, 0.9);
}

Alfa em uma frase

Alfa é a transparência dessa cor — 1 (ou 100%) é sólido; valores menores deixam ver o que está atrás. Não é o mesmo que remover o elemento do layout.

hsl() para pensar em matiz

hsl() usa matiz (ângulo na roda), saturação (%) e luminosidade (%). Útil quando quer «mesma família, um pouco mais clara» sem recalcular hex à mão.

Acento HSL que você pode ajustar

css
CSS Code 
.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}

Hábito de ajuste

Mantenha a matiz, suba a luminosidade para texto mais calmo, ou abaixe para um título mais forte. Saturação controla o quanto a cor parece viva.

Qual formato usar?

  • Hex — padrão ao copiar de arquivo de design ou paleta de marca
  • rgb() / rgba() — quando canais ou alfa rápido importam
  • hsl() — ao explorar ou ajustar uma família de cores relacionadas
  • Nomeada — ainda boa para rascunhos e demos didáticas
    Todas são válidas hoje em color; você as reutilizará em fundos depois.

Experimente você

  1. Página com h1, .lead e .note.
  2. Título com hex (#0f172a), lead com rgb(51, 65, 85), note com #0f766e.
  3. Adicione .badge com hsl(174, 77%, 28%) e borda HSL mais escura no mesmo matiz.
  4. Suavize um rótulo com rgba(15, 118, 110, 0.75) — deve parecer menos sólido que 1.
  5. Opcional: forma curta só se os pares realmente dobrarem; senão mantenha seis dígitos.

Erros comuns

  • Esquecer # antes do hex (0f766e sozinho não é cor válida)
  • Letras fora de a–f no hex
  • Canais RGB fora de 0–255 (ou unidades misturadas)
  • Esperar que alfa remova espaço de layout como display: none
  • Tratar cada formato como «mais específico» na cascata — o formato não muda a especificidade

Resumo

  • Valores de cor são formatos para as mesmas propriedades que aceitam cor
  • Hex é o formato cotidiano ao colar do design
  • rgb() / rgba() expõem canais e alfa
  • hsl() ajuda a pensar em matiz, saturação e luminosidade
  • Cores nomeadas continuam válidas; escolha conforme a tarefa
  • Pratique hex mais um formato funcional (rgba ou hsl) até ambos parecerem naturais

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial