# Conversor de cores

Converta uma cor entre HEX, RGB, HSL, HWB e OKLCH, verifique o contraste WCAG com um fundo ou crie uma paleta tonal Material 3 a partir dela.

https://codeknife.dev/pt/conversor-cores/

## O que faz

Converte uma cor entre HEX, RGB, HSL, HWB e OKLCH, verifica a razão de contraste WCAG com um fundo e cria uma paleta tonal Material 3 a partir dela. Tudo roda no seu navegador.

## Como usar

1. Digite uma cor em hex (`#36c`, `#3366cc`) ou com `rgb()`, `hsl()`, `hwb()` ou `oklch()`.
2. Escolha **Converter**, **Contraste** ou **Paleta**. Contraste mostra um campo para a cor de fundo.
3. Copie ou baixe o resultado, ou envie para outra ferramenta.

## Exemplos

`#3366cc` é `rgb(51 102 204)`, `hsl(220 60% 50%)`, `hwb(220 20% 20%)` e `oklch(0.5325 0.1679 262.29)`. Sobre branco, tem contraste de 5,36:1: o bastante para AA em texto normal, mas não para AAA.

## Bom saber

- A razão segue a WCAG 2: luminância relativa a partir do sRGB linear e depois (mais claro + 0,05) / (mais escuro + 0,05). É truncada em duas casas decimais, nunca arredondada para uma aprovação.
- AA pede 4,5:1 para texto normal e 3:1 para texto grande; AAA pede 7:1 e 4,5:1.
- Os valores são antes arredondados para canais inteiros de 8 bits, de modo que cada linha descreve a mesma cor hex. Uma cor OKLCH fora do sRGB é ajustada à cor exibível mais próxima.
- A paleta mantém o matiz e o croma da cor base e lista os tons 0, 10, 20 … 90, 95, 99 e 100, como o Material 3.
- Nomes de cores e canais alfa não são suportados.

## Quais notações de cor ela lê?

Hex (#36c ou #3366cc) e as funções CSS rgb(), hsl(), hwb() e oklch(), com espaços ou vírgulas entre os valores. Nomes de cores e transparência não são suportados. O resultado mostra a mesma cor em cada notação, arredondada para canais sRGB inteiros.

## Perguntas frequentes

### Que razão de contraste a WCAG pede?

AA pede 4,5:1 para texto normal e 3:1 para texto grande e componentes de interface. AAA pede 7:1 e 4,5:1. A razão é truncada, nunca arredondada para cima, então 4,49 não conta como aprovado.

### O que é OKLCH e por que usá-lo?

OKLCH descreve uma cor por luminosidade, croma e matiz num espaço em que passos iguais parecem igualmente diferentes. É útil para criar escalas e ajustar a luminosidade sem o matiz se deslocar.

### O que faz o modo paleta?

Cria uma paleta tonal Material 3: o matiz e o croma da cor base em 13 tons, de 0 (preto) a 100 (branco). A biblioteca de cores por trás só é carregada quando você escolhe este modo.