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

[Canonical HTML page](https://gradiently.design/pt-pt/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. Eis o que cada notação diz realmente e quando cada uma se justifica.

## The short version

- Os códigos de cor hexadecimais como `#7c3aed` são uma forma compacta de escrever valores de vermelho, verde e azul de 0 a 255, cada um como dois dígitos em base 16.
- RGB, hexadecimal e HSL descrevem todos as mesmas cores sRGB, por isso qualquer cor escrita numa notação pode ser convertida exatamente nas outras.
- O HSL é fácil de ajustar à mão, mas o seu valor de luminosidade não corresponde ao aspeto real das cores claras, pelo que o amarelo e o 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 construir paletas, tons e gradientes suaves.
- Uma regra prática: partilha as cores da marca em hexadecimal e constrói paletas e gradientes em OKLCH.

Os **códigos de cor hexadecimais**, como `#7c3aed`, são a forma mais comum de escrever uma cor no ecrã: um `#` seguido de seis carateres que dão a quantidade de vermelho, verde e azul. O RGB escreve os mesmos números em decimal, o HSL reorganiza-os em matiz, saturação e luminosidade, e o OKLCH descreve a cor tal como o olho a percebe. São notações diferentes para as mesmas cores, e cada uma é melhor num trabalho diferente.

- 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 hexadecimais

Um código hexadecimal 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, por isso cada par vai de `00` (nada) a `ff` (255, máximo). Em `#7c3aed`, o vermelho é `7c` (124), o verde é `3a` (58) e o azul é `ed` (237): muito azul, uma boa dose de vermelho, pouco verde, ou seja, violeta. Três canais de 256 valores dão 16 777 216 cores possíveis.

- **Forma abreviada:** `#f0c` é o mesmo que `#ff00cc`. Cada dígito é duplicado, por isso 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 em 255.
- **Maiúsculas ou minúsculas é indiferente:** `#7C3AED` e `#7c3aed` são idênticos.
- **Os cinzentos 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 normais de 0 a 255. O CSS moderno separa-os com espaços e acrescenta a transparência depois de uma barra; a sintaxe antiga com vírgulas e `rgba()` continuam a funcionar em todo o lado. O RGB é útil quando uma ferramenta ou API pede números, ou quando queres 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 com espaços em cima, a sintaxe antiga com vírgulas por baixo. Os navegadores aceitam ambas.

## 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**, de cinzento (0%) a cor plena (100%), e pela sua **luminosidade**, de preto (0%), passando pela cor pura (50%), até branco (100%). É fácil de afinar à mão: para um violeta mais escuro, baixa o último número.

O senão é que a luminosidade do HSL é uma fórmula, não uma medida do quão clara a cor parece. O amarelo a 50% de luminosidade parece muito mais brilhante do que o azul a 50%. Se construíres uma paleta mantendo igual a luminosidade HSL, as cores não parecerão igualmente claras, e é exatamente por isso que os arco-íris predefinidos parecem às riscas. Vê os [gradientes arco-íris](https://gradiently.design/pt-pt/guide/rainbow-gradient) para o resultado visível.

## OKLCH: a cor tal como a vês

O OKLCH vem do Oklab, um espaço de cor publicado por Björn Ottosson em 2020 e hoje parte do CSS. Usa três valores: **L** é a luminosidade percebida de 0% a 100%, **C** é o croma, o quão colorida é, de 0 para cinzento até cerca de 0,37 para as cores mais vivas, e **H** é o ângulo do matiz. Valores de L iguais parecem mesmo igualmente claros, por isso podes 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 HSL e OKLCH estão arredondados. Repara como o HSL trata o verde como mais escuro do que o violeta, enquanto o OKLCH mostra que na verdade é mais claro.

O OKLCH brilha nos gradientes. Ao misturar em sRGB simples, o predefinido para cores hexadecimais, traça-se uma linha reta através do cubo RGB, e cores em lados opostos do círculo encontram-se em cinzento. Misturar em OKLCH mantém o croma e percorre o círculo dos 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%)`

As mesmas duas paragens. Em sRGB o meio cai num verde-oliva acinzentado; em OKLCH passa por verde-azulado e verde. Mais em [gradientes lamacentos](https://gradiently.design/pt-pt/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 os tons e as sombras previsíveis: muda o L em passos iguais e baixa o C perto das pontas para as cores continuarem dentro do ecrã.

## Que código de cor usar onde

| Tarefa | Melhor notação | Porquê |
| --- | --- | --- |
| Guia de marca, entrega de design | Hex | Curto, universal, colado em todas as ferramentas |
| 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 e sombras | OKLCH | Passos iguais parecem iguais |
| Gradientes | OKLCH | Mistura sem meios acinzentados |
| Ecrãs de gama alargada | OKLCH | Alcança cores fora do sRGB |
| Impressão | CMYK ou cores diretas | Os códigos de ecrã nunca se imprimem exatamente; vê [imprimir gradientes](https://gradiently.design/pt-pt/guide/print-gradients) |

Nenhuma destas está errada. A arte está em usar cada uma onde ajuda.

> **Os ecrãs não são papel** Hex, RGB, HSL e OKLCH descrevem todos luz de um ecrã. As impressoras misturam tinta, que cobre uma gama de cores diferente, por isso faz sempre uma prova das cores da marca em impressão em vez de confiares num código convertido.

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

## FAQ

### O que significam os seis carateres de um código de cor hexadecimal?

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), por isso `#7c3aed` significa vermelho 124, verde 58, azul 237.

### Hex é o mesmo que RGB?

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

### O que é o OKLCH?

O OKLCH é uma notação de cor baseada no espaço de cor Oklab. Descreve luminosidade percebida, croma e matiz, por isso valores de luminosidade iguais parecem igualmente claros, o que torna as paletas e os gradientes muito mais previsíveis.

### Como acrescento transparência a um código hexadecimal?

Acrescenta mais dois dígitos para o alfa. `#7c3aed80` tem cerca de 50% de opacidade e `#7c3aedcc` cerca de 80%. Em CSS também podes escrever `rgb(124 58 237 / 0.5)`.

### Que código de cor devo usar em CSS?

O hex serve para cores individuais. Usa OKLCH para paletas, tons, modo escuro e gradientes, onde a sua luminosidade percebida evita passos desiguais e meios acinzentados.