# Conversor de cores CSS

> Cole uma cor em qualquer sintaxe e veja a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, com o aviso de gamut.

URL: https://dpw.dev/ferramentas/conversor-de-cores/

Cole uma cor em qualquer sintaxe do CSS: o conversor devolve a mesma cor em hex, `rgb()`, `hsl()`, `oklch()`, `lab()` e `display-p3`, e avisa quando ela não cabe no sRGB.

Esta página tem um conversor interativo no navegador. Exemplo: `#ffd600` em cada sintaxe do CSS:

```css
color: #ffd600; /* Hex */
color: rgb(255 214 0); /* RGB */
color: hsl(50.4 100% 50%); /* HSL */
color: hwb(50.4 0% 0%); /* HWB */
color: oklch(88.48% 0.1816 94.9); /* OKLCH */
color: oklab(88.48% -0.0155 0.181); /* OKLab */
color: lch(87.22% 86.46 87.75); /* LCH */
color: lab(87.22% 3.39 86.39); /* Lab */
color: color(display-p3 0.974 0.8452 0.2844); /* Display P3 */
```

## O problema

Cada ferramenta entrega a cor numa sintaxe: o arquivo de design em hex, o manual da marca em RGB, um artigo recente em `oklch()`. No CSS todas valem, mas descrevem espaços de cor diferentes, e passar de uma para outra à mão pede matriz, raiz cúbica e trigonometria.

Nem toda cor cabe em toda sintaxe. As telas atuais mostram cores mais vivas que o sRGB, e hex, `rgb()`, `hsl()` e `hwb()` só descrevem o sRGB.

## Como funciona

A conversão passa por um espaço de referência: a cor sai da sintaxe de origem, vira coordenadas absolutas (XYZ) e é escrita na sintaxe de destino. Em OKLCH, as coordenadas são as que a gente enxerga:

`oklch(L C H)`

L é a luminosidade percebida (0% a 100%), C é o croma (0 é cinza) e H é o matiz, em graus.

Quando a cor não cabe no sRGB, o conversor faz o que o navegador faz: reduz o croma no OKLCH, mantendo luminosidade e matiz, até ela caber. É o mapeamento de gamut do CSS Color 4, e é por isso que o hex de uma cor muito viva sai um pouco mais apagado.

OKLCH é perceptualmente uniforme: o mesmo passo de L parece o mesmo passo de claridade em qualquer matiz, o que não acontece com o L do HSL. Por isso ele é a melhor escolha para tokens e escalas.

## As sintaxes

| Sintaxe | Alcance | Bom para |
| :-- | :-- | :-- |
| `#rrggbb` | sRGB | Copiar de ferramentas de design e escrever fallbacks |
| `rgb()` | sRGB | Transparência e cores relativas (`rgb(from ...)`) |
| `hsl()` | sRGB | Girar o matiz à mão |
| `hwb()` | sRGB | Misturar um matiz com branco e preto |
| `oklch()` | Todas as cores visíveis | Tokens e escalas, com luminosidade previsível |
| `oklab()` | Todas as cores visíveis | Misturas e gradientes sem cinza no meio |
| `lab() e lch()` | Todas as cores visíveis | Cores vindas de impressão e de ferramentas de cor |
| `color(display-p3 ...)` | Display P3 | Cores vivas nas telas atuais |

## Quando usar

- Levar uma cor do arquivo de design ou do manual da marca para OKLCH antes de montar os tokens.
- Conferir se uma cor em `oklch()` cabe no sRGB e qual hex os navegadores antigos vão mostrar.
- Escrever o fallback em hex de uma cor moderna.
- Entender uma cor que chegou em `lab()` ou `color(display-p3 ...)` num código que não é seu.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/oklab)).

## Conceitos Fundamentais de CSS

Cor no CSS é valor como qualquer outro: o navegador converte, interpola e mapeia antes de pintar. O livro explica esse caminho em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml