Conversor de cores: HEX, RGB, HSL, OKLCH e contraste

Converta uma cor entre HEX, RGB, HSL, HSV, CMYK e OKLCH e confira o contraste WCAG com branco e preto.

Cor (HEX, rgb(), hsl() ou oklch())

HEX

#3451d1

RGB

rgb(52 81 209)

HSL

hsl(229 63% 51%)

HSV

hsv(229, 75%, 82%)

CMYK

cmyk(75%, 61%, 0%, 18%)

OKLCH

oklch(49.5% 0.199 268.2)

Contraste de texto WCAG

AaNo branco: 6,47:1 — serve para texto normal (AA)

AaNo preto: 3,24:1 — só para texto grande (AA)

AaSobre #fff4e5: 5,95:1 — serve para texto normal (AA)

Sua cor de fundo

Como usar

Digite uma cor em qualquer formato — #3451d1, rgb(52 81 209), hsl(229 63% 51%) ou oklch(51% 0.2 268) — ou escolha na paleta. Você vê a mesma cor em todos os formatos e o quanto ela é legível sobre branco e sobre preto.

Formatos

HEX — o padrão da web e do design; aceita transparência: #3451d180.
RGB — vermelho, verde e azul de 0 a 255.
HSL e HSV — matiz (0–360°), saturação e luminosidade (ou brilho): práticos para ajustar tons.
CMYK — para impressão. A conversão aqui é simplificada, sem perfil de cor; na produção, use o perfil da gráfica.
OKLCH — formato CSS moderno cuja luminosidade corresponde à percepção humana, deixando as paletas mais uniformes.

Contraste WCAG

Para um texto acessível, ele precisa se destacar do fundo. Pela WCAG 2.x:

4,5:1 — mínimo para texto normal (nível AA);
3:1 — para texto grande (24 px, ou 19 px em negrito);
7:1 — nível reforçado AAA.

Para conferir o contraste sobre o seu próprio fundo (por exemplo, texto num banner colorido), digite a cor de fundo no campo abaixo das verificações ou escolha-a.

Por exemplo, #777777 sobre branco dá 4,48:1 — um pouco abaixo do mínimo AA para texto normal.

Perguntas frequentes

Por que uma cor OKLCH às vezes muda ao converter para HEX? Algumas cores OKLCH ficam fora da gama sRGB e são ajustadas para a cor exibível mais próxima.