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.

Exemplos de código

Copie estes exemplos para o seu próprio projeto. Cada um usa apenas a biblioteca padrão da linguagem, por isso não há nada para instalar.

Marque até 3 linguagens com uma estrela para as ver primeiro em todas as páginas de ferramentas.

const foreground = '#3366cc'
const background = '#ffffff'

const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((start) => {
    const channel = parseInt(hex.slice(start, start + 2), 16) / 255
    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}

const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)

// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))

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

Digite uma cor em hex (#36c, #3366cc) ou com rgb(), hsl(), hwb() ou oklch().
Escolha Converter, Contraste ou Paleta. Contraste mostra um campo para a cor de fundo.
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.

Alterações desta ferramenta