Docs executáveis de CSS: Cores CSS

Q: Quais formatos de cor o CSS aceita?

Cores por nome (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() e color(), além das palavras-chave transparent e currentColor. Hex, rgb e hsl cobrem quase todo o trabalho do dia a dia.

Q: Qual a diferença entre rgb e rgba?

Nenhuma, hoje em dia. rgba() é um apelido antigo: o CSS atual deixa o rgb() receber um valor alfa (rgb(37 99 235 / 50%)), e as duas funções aceitam os mesmos argumentos em todos os navegadores atuais.

Q: Como deixar uma cor transparente no CSS?

Acrescente um canal alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) ou um hex de 8 dígitos como #2563eb80. Ao contrário de opacity, isso esmaece só aquela cor, não o elemento inteiro.

Q: O que significa currentColor?

É o valor da propriedade color do elemento. Usá-lo em uma borda ou no fill de um SVG faz os dois seguirem a cor do texto automaticamente.

Formas de escrever uma cor no CSS

Toda propriedade que recebe uma cor (color, background-color, border-color, sombras, fill do SVG) aceita os mesmos formatos. As quatro primeiras amostras são o mesmo azul escrito de quatro jeitos, e a quinta é uma cor por nome que chega perto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Formato	Exemplo	Melhor para
Nome	`tomato`, `rebeccapurple`	Testes rápidos e protótipos
Hex	`#2563eb`, `#25e`	Copiar de ferramentas de design
`rgb()`	`rgb(37 99 235)`	Acrescentar transparência, trabalhar com valores RGB
`hsl()`	`hsl(221 83% 53%)`	Criar tons mais escuros e mais claros de uma cor
`oklch()`	`oklch(55% 0.2 262)`	Paletas com luminosidade percebida uniforme
Palavras-chave	`transparent`, `currentColor`	Veja as seções abaixo

Cores hex

Uma cor hex é # seguido de vermelho, verde e azul, cada um com dois dígitos hexadecimais, de 00 a ff. Três formas são atalhos ou extensões:

#rgb: cada dígito é duplicado, então #25e é #2255ee.
#rrggbbaa: o último par é o alfa, então #2563eb80 tem cerca de 50% de opacidade.
#rgba: a forma curta com alfa.

O hex não diferencia maiúsculas de minúsculas: #2563EB e #2563eb são a mesma cor.

rgb() e rgba()

rgb() recebe vermelho, verde e azul de 0 a 255 (ou de 0% a 100%). Um quarto valor opcional depois de uma barra é o alfa, de 0 (invisível) a 1, ou de 0% a 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() e rgb() agora são a mesma função: as duas aceitam as duas sintaxes e um alfa opcional. Código antigo usa rgba() quando precisa de transparência, e isso continua funcionando.

hsl(): o formato mais fácil de ajustar

hsl() descreve uma cor do jeito que as pessoas pensam nela: um matiz do círculo cromático, uma saturação e uma luminosidade. Mantenha o matiz e mude a luminosidade para ter uma escala inteira:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

A primeira linha mantém o matiz 221 e a saturação 83% e só muda a luminosidade. A segunda linha dá a volta no círculo cromático com a mesma saturação e luminosidade.

Transparência: alfa vs opacity

Um canal alfa deixa uma cor transparente. opacity deixa o elemento inteiro transparente, incluindo o texto e os filhos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent é uma palavra-chave para preto totalmente transparente, rgb(0 0 0 / 0). É o fundo padrão da maioria dos elementos.

currentColor

currentColor é igual ao próprio color do elemento. Um botão cuja borda, ícone e texto usam essa palavra-chave muda tudo com uma única declaração:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

As bordas já usam currentColor por padrão, e é por isso que border: 2px solid sem cor combina com o texto.

Teste qualquer cor

Digite uma cor em qualquer formato. O navegador a interpreta e mostra o que calculou; uma cor inválida deixa a amostra como estava.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Experimente tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) e color-mix(in srgb, #2563eb, white 50%).

Funções de cor mais novas

oklch(L C H): luminosidade, croma e matiz em um espaço feito para que a mesma luminosidade pareça igualmente clara. Paletas montadas nele têm menos degraus intermediários sem vida que as feitas em HSL.
color-mix(in srgb, A, B 30%): mistura duas cores. Com white ou black, gera tons mais claros e mais escuros a partir de uma única cor da marca, e funciona com variáveis CSS: color-mix(in srgb, var(--brand), white 80%).

As duas funcionam nas versões atuais de Chrome, Firefox e Safari. Guarde as cores da marca em variáveis CSS para que os formatos escolhidos fiquem em um só lugar.

Erros comuns

Esquecer o # em uma cor hex. color: 2563eb é inválido e ignorado.
Usar opacity para deixar um fundo transparente. Ela esmaece o texto também. Use uma cor com alfa.
Misturar separadores na sintaxe moderna. rgb(37 99, 235) é inválido: use só espaços ou só vírgulas.
Achar que uma cor por nome bate com o seu design. royalblue não é #2563eb. Copie o código exato.
Avaliar o contraste no olho. Confira as cores de texto contra o fundo com um verificador de contraste; 4.5:1 é o mínimo para o texto do corpo.

Perguntas frequentes

Quais formatos de cor o CSS aceita?

Cores por nome (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() e color(), além das palavras-chave transparent e currentColor. Hex, rgb e hsl cobrem quase todo o trabalho do dia a dia.

Qual a diferença entre rgb e rgba?

Nenhuma, hoje em dia. rgba() é um apelido antigo: o CSS atual deixa o rgb() receber um valor alfa (rgb(37 99 235 / 50%)), e as duas funções aceitam os mesmos argumentos em todos os navegadores atuais.

Como deixar uma cor transparente no CSS?

Acrescente um canal alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) ou um hex de 8 dígitos como #2563eb80. Ao contrário de opacity, isso esmaece só aquela cor, não o elemento inteiro.

O que é HSL no CSS?

Hue, saturation, lightness: matiz, saturação e luminosidade. O matiz é um ângulo no círculo cromático (0 vermelho, 120 verde, 240 azul), a saturação é o quanto a cor é viva e a luminosidade vai de 0% preto a 100% branco. Ele facilita tons mais claros e mais escuros: mude só o último número.

O que significa currentColor?

É o valor da propriedade color do elemento. Usá-lo em uma borda ou no fill de um SVG faz os dois seguirem a cor do texto automaticamente.

Conceitos relacionados