# Códigos de cor hex, RGB, HSL e OKLCH explicados

[Canonical HTML page](https://gradiently.design/pt-br/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) e oklch(54.1% 0.247 293) são o mesmo violeta. Veja o que cada notação realmente está dizendo e quando cada uma se justifica.

## The short version

- Códigos de cor hex como `#7c3aed` são um jeito compacto de escrever valores de vermelho, verde e azul de 0 a 255, cada um com dois dígitos em base 16.
- RGB, hex e HSL descrevem as mesmas cores sRGB, então qualquer cor escrita em uma pode ser convertida com exatidão nas outras.
- O HSL é fácil de ajustar à mão, mas o valor de luminosidade dele não corresponde ao que as cores claras realmente parecem, então amarelo e azul a 50% parecem muito diferentes.
- O OKLCH descreve a cor por luminosidade percebida, croma e matiz, o que o torna a melhor notação para criar paletas, tons e gradientes suaves.
- Uma regra prática: compartilhe as cores da marca em hex e crie paletas e gradientes em OKLCH.

Os **códigos de cor hex**, como `#7c3aed`, são o jeito mais comum de escrever uma cor na tela: um `#` seguido de seis caracteres que indicam a quantidade de vermelho, verde e azul. O RGB escreve os mesmos números em decimal, o HSL os reorganiza em matiz, saturação e luminosidade, e o OKLCH descreve a cor do jeito que o olho a percebe. São notações diferentes para as mesmas cores, e cada uma é melhor em uma tarefa.

- Violeta: #7c3aed
- Céu: #0ea5e9
- Laranja: #f97316
- Verde: #16a34a
- Tinta: #111827

Cinco cores usadas como exemplo ao longo deste guia. A tabela abaixo escreve cada uma nas quatro notações.

## Como funcionam os códigos de cor hex

Um código hex são três pares de dígitos em base 16: `#RRGGBB`. A base 16 conta de 0 a 9 e depois de a a f, então cada par vai de `00` (nenhum) a `ff` (255, cheio). Em `#7c3aed`, o vermelho é `7c` (124), o verde é `3a` (58) e o azul é `ed` (237): muito azul, um bom tanto de vermelho, pouco verde, ou seja, violeta. Três canais de 256 valores dão 16.777.216 cores possíveis.

- **Forma curta:** `#f0c` é o mesmo que `#ff00cc`. Cada dígito é dobrado, então só funciona para cores cujos pares se repetem.
- **Transparência:** um código de oito dígitos acrescenta o alfa no fim. `#7c3aed80` é o violeta com cerca de 50% de opacidade, porque `80` é 128 de 255.
- **Maiúsculas e minúsculas não importam:** `#7C3AED` e `#7c3aed` são idênticos.
- **Cinzas têm três pares iguais:** `#767676`, `#1a1a1a` e `#f4f4f4` são todos neutros.

## RGB: os mesmos números em decimal

O RGB escreve os três canais como números comuns de 0 a 255. O CSS moderno os separa com espaços e acrescenta a transparência depois de uma barra; a sintaxe antiga com vírgulas e o `rgba()` ainda funcionam em todo lugar. O RGB é útil quando uma ferramenta ou API pede números, ou quando você quer ler a composição de uma cor de relance.

```css
/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);
```

A sintaxe moderna, separada por espaços, em cima; a sintaxe antiga, com vírgulas, embaixo. Os navegadores aceitam as duas.

## HSL: matiz, saturação e luminosidade

O HSL descreve uma cor pelo seu **matiz**, como um ângulo no círculo cromático (0 é vermelho, 120 verde, 240 azul), pela sua **saturação**, do cinza (0%) à cor plena (100%), e pela sua **luminosidade**, do preto (0%) passando pela cor pura (50%) até o branco (100%). É fácil de ajustar à mão: para obter um violeta mais escuro, diminua o último número.

O problema é que a luminosidade do HSL é uma fórmula, não uma medida de quão clara a cor parece. Amarelo a 50% de luminosidade parece muito mais brilhante do que azul a 50%. Se você monta uma paleta mantendo a luminosidade HSL igual, as cores não parecerão igualmente claras, e é exatamente por isso que os arco-íris padrão parecem listrados. Veja [gradientes arco-íris](https://gradiently.design/pt-br/guide/rainbow-gradient) para o resultado visível.

## OKLCH: a cor do jeito que você a vê

O OKLCH vem do Oklab, um espaço de cor publicado por Björn Ottosson em 2020 e hoje parte do CSS. Ele usa três valores: **L** é a luminosidade percebida, de 0% a 100%, **C** é o croma, ou seja, quão colorida é a cor, de 0 para cinza até cerca de 0,37 para as cores mais vivas, e **H** é o ângulo do matiz. Valores de L iguais realmente parecem igualmente claros, então você pode mudar uma qualidade sem perturbar as outras.

| Cor | Hex | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violeta | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Céu | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Laranja | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Verde | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Tinta | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

As mesmas cinco cores em quatro notações. Os valores de HSL e OKLCH estão arredondados. Repare como o HSL diz que o verde é mais escuro que o violeta, enquanto o OKLCH mostra que ele é, na verdade, mais claro.

O OKLCH brilha nos gradientes. Ao misturar em sRGB simples, o padrão para cores hex, o gradiente traça uma linha reta pelo cubo RGB, e cores em lados opostos do círculo se encontram no cinza. Misturar em OKLCH mantém o croma e percorre o círculo de matizes.

- Azul a amarelo em sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Azul a amarelo em OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

Os mesmos dois pontos. Em sRGB o meio cai num oliva acinzentado; em OKLCH ele passa por turquesa e verde. Mais em [gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients).

```css
.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}
```

O OKLCH torna tons claros e escuros previsíveis: mude o L em passos iguais e reduza o C perto das pontas para que as cores continuem cabendo na tela.

## Qual código de cor usar em cada caso

| Tarefa | Melhor notação | Por quê |
| --- | --- | --- |
| Guia de marca, entrega de design | Hex | Curto, universal, colado em toda ferramenta |
| Transparência em CSS | RGB ou hex de 8 dígitos | Alfa claro depois da barra |
| Ajustes rápidos à mão | HSL | Fácil de mexer no matiz ou no escuro |
| Paletas, tons claros e escuros | OKLCH | Passos iguais parecem iguais |
| Gradientes | OKLCH | Mistura sem meios acinzentados |
| Telas de gama ampla | OKLCH | Alcança cores fora do sRGB |
| Impressão | CMYK ou cores especiais | Códigos de tela nunca imprimem com exatidão; veja [impressão de gradientes](https://gradiently.design/pt-br/guide/print-gradients) |

Nenhuma delas está errada. A habilidade é usar cada uma onde ajuda.

> **Tela não é papel** Hex, RGB, HSL e OKLCH descrevem luz de tela. As impressoras misturam tinta, que cobre uma gama de cores diferente, então sempre faça prova impressa das cores da marca em vez de confiar em um código convertido.

Para testar qualquer um desses valores, o [oklch.com](https://oklch.com) mostra uma cor em todas as notações e avisa quando ela cai fora da gama de uma tela, e a [referência de cores do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) cobre todas as sintaxes. Se você está escolhendo cores em vez de escrevê-las, [como escolher as cores da marca](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) é o próximo passo, e [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) mostra como conferir se o texto continua legível.

## FAQ

### O que significam os seis caracteres de um código de cor hex?

São três pares de dígitos em base 16 para vermelho, verde e azul. Cada par vai de `00` (0) a `ff` (255), então `#7c3aed` significa vermelho 124, verde 58, azul 237.

### Hex é a mesma coisa que RGB?

É. Hex é RGB escrito em base 16. `#7c3aed` e `rgb(124 58 237)` são exatamente a mesma cor.

### O que é OKLCH?

OKLCH é uma notação de cor baseada no espaço de cor Oklab. Ela descreve luminosidade percebida, croma e matiz, então valores iguais de luminosidade parecem igualmente claros, o que torna paletas e gradientes muito mais previsíveis.

### Como adiciono transparência a um código hex?

Acrescente mais dois dígitos de alfa. `#7c3aed80` é cerca de 50% de opacidade e `#7c3aedcc` é cerca de 80%. No CSS você também pode escrever `rgb(124 58 237 / 0.5)`.

### Qual código de cor devo usar no CSS?

Hex serve para cores isoladas. Use OKLCH para paletas, tons, modo escuro e gradientes, onde a luminosidade perceptual evita passos irregulares e meios acinzentados.