Conversor de cores

Conversor de cores entre códigos HEX, RGB, HSL e OKLCH, com a razão de contraste WCAG de duas cores. Verifique a acessibilidade enquanto escolhe a paleta, grátis no navegador.

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

OKLCH

oklch(0.623 0.188 259.8)

Ajuste HSL

H217S91%L60%

Taxa de contraste (WCAG)

Cor de comparação:

샘플 텍스트

Taxa de contraste: 3.68:1

WCAG: AA Large

Incorporar

<iframe src="https://devtools.patrache.studio/pt-BR/converters/color-converter/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Conversor de cores — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/pt-BR/converters/color-converter/">Conversor de cores</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Última atualização: 2026 · Ferramenta online gratuita

O que é Conversor de cores?

Conversor de cores entre códigos HEX, RGB, HSL e OKLCH, com a razão de contraste WCAG de duas cores. Verifique a acessibilidade enquanto escolhe a paleta, grátis no navegador.

Como usar

1
Inserir uma cor— Use o seletor de cores ou entrada de texto. Os formatos HEX, rgb() e hsl() são suportados.
2
Ver formatos— Os formatos HEX, RGB, HSL e OKLCH são exibidos simultaneamente.
3
Copiar valores— Use o botão copiar para cada formato para copiar o valor CSS.
4
Verificar taxa de contraste— Defina uma cor de comparação para verificar a taxa de contraste WCAG.

Ferramentas relacionadas

Gerador de gradiente CSSGerador visual de gradientes CSS lineares, radiais e cônicos: adicione paradas de cor, ajuste o ângulo e copie o CSS. Perfeito para fundos e botões, grátis no navegador.

Gerador CSS box-shadowGerador de box-shadow CSS com controles de deslocamento, desfoque, expansão, cor e inset e prévia ao vivo da sombra. Copie o CSS pronto para uso, grátis no navegador.

Referência unidades CSSReferência de unidades CSS px, em, rem, %, vw, vh, vmin, vmax e ch, organizadas por categoria. Com explicações claras de cada unidade absoluta e relativa, grátis no navegador.

Conversor PX para REMConversor de PX para REM que traduz pixels e rem nos dois sentidos com um tamanho de fonte raiz configurável, decimais incluídos. Com tabela de referência e trecho de CSS copiáveis, grátis.

Perguntas frequentes

OKLCH é uma representação cilíndrica do espaço de cores Oklab, o mais perceptualmente uniforme. É suportado no CSS Color Level 4.

Mede a diferença de luminosidade entre texto e cores de fundo. AA exige pelo menos 4,5:1, AAA exige 7:1.

Atualmente apenas cores opacas (RGB, HEX de 6 dígitos) são suportadas. RGBA e HSLA serão adicionados em breve.

Sim. Você pode colar a saída de cada formato diretamente no seu CSS.

Não. Todas as conversões de cores acontecem no seu navegador.