Site Tools

Conversor e Seletor de Cores

Ad Space
HEX#6366f1
RGBrgb(99, 102, 241)
RGBArgba(99, 102, 241, 1)
HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 1)
HSVhsv(239, 59%, 95%)
OKLCHoklch(0.5854 0.2041 277.12)

Paleta de cores

Complementar
Análogas
Triádicas

Verificador de contraste (WCAG)

Texto de exemplo
17.74taxa de contraste
Normal AA
Normal AAA
Grande AA
Grande AAA
Ad Space

O Conversor de Cores é um kit completo para designers e desenvolvedores front-end. Cole uma cor em qualquer formato comum — HEX, RGB, RGBA, HSL, HSLA, HSV/HSB ou o moderno OKLCH — ou escolha visualmente, e todos os outros formatos são atualizados na hora, com botão de cópia em um clique. Além da conversão, ele gera uma paleta harmônica (cores complementares, análogas e triádicas) a partir da sua cor base e inclui um verificador de contraste WCAG para garantir que o texto permaneça acessível sobre qualquer fundo. Tudo roda no seu navegador, então é rápido, privado e sempre disponível.

Como usar o Conversor de Cores

  1. Use o seletor de cores ou digite um valor (ex.: #6366f1 ou rgb(99,102,241)) no campo.
  2. Veja todos os formatos na lista e copie qualquer um com seu botão de cópia.
  3. Explore a paleta gerada e use o verificador de contraste para testar texto sobre um fundo.

Benefícios e Casos de Uso

  • Converta na hora entre HEX, RGB, HSL, HSV e OKLCH sem precisar lembrar fórmulas.
  • Crie interfaces acessíveis verificando o contraste WCAG AA/AAA para texto normal e grande.
  • Gere paletas complementares, análogas e triádicas para acelerar seu trabalho de design.

FAQ

Quais formatos de cor são suportados?

HEX, RGB, RGBA, HSL, HSLA, HSV/HSB e OKLCH. Cole qualquer um deles ou use o seletor visual e todos os outros são atualizados na hora.

O que é OKLCH?

OKLCH é um espaço de cor moderno e perceptualmente uniforme suportado por CSS. Ele torna ajustes de luminosidade e croma mais naturais que o HSL.

Como funciona o verificador de contraste?

Ele calcula a taxa de contraste WCAG entre duas cores e mostra se elas passam em AA e AAA para texto normal e grande.