Conversor de cores

Converta cores entre HEX, RGB, HSL e OKLCH e confira o contraste para acessibilidade (WCAG).

Processado no seu aparelho: seu arquivo não sai do seu computador

Cor (HEX, RGB, HSL, OKLCH ou nome CSS)

hex: #0f766e
rgb: rgb(15 118 110)
hsl: hsl(175.3 77.4% 26.1%)
oklch: oklch(51.09% 0.0861 186.39)

Contraste para texto

Cor de fundo

Texto de exemplo sobre o fundo

Contraste: 5,47:1

Tamanho do texto	AA	AAA
Texto normal	Aprovado	Reprovado
Texto grande (18 pt ou 14 pt em negrito)	Aprovado	Aprovado

Contraste com branco: 5,47:1 · com preto: 3,84:1

O que Conversor de cores faz

O conversor de cores lê uma cor em HEX, RGB, HSL, OKLCH ou pelo nome CSS e mostra a cor em todos esses formatos, pronta para copiar no seu CSS ou na sua ferramenta de design. Ele também calcula o contraste da cor sobre um fundo segundo as diretrizes WCAG 2 e indica se atende aos níveis AA e AAA para texto normal e grande, para que seus textos fiquem legíveis.

Limites

Se um trabalho demorar mais de 1 minuto, ele é interrompido para não travar seu dispositivo.
Processado no seu navegador: seus arquivos nunca são enviados a um servidor.

Perguntas frequentes

O que é OKLCH e para que serve?

É uma forma de descrever cores por luminosidade, croma e matiz parecida com a nossa percepção. Facilita criar paletas harmônicas, e todos os navegadores modernos aceitam em CSS.

Quanto contraste um texto precisa?

O nível AA pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande; o nível AAA, 7:1 e 4,5:1.

Aceita cores com transparência?

Sim: #RRGGBBAA, rgb(… / 0,5) e similares. Para o contraste, a cor é misturada com o fundo como o navegador faria.