nicetool.dev logo

Conversor de cores

Digite qualquer cor CSS (HEX, rgb(), hsl(), oklch(), cmyk() ou um nome de cor).

#3B82F6
Formatos
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

Contraste WCAG

Aa 123

Texto sobre branco

3.68:1

AAAA grandeAAA
Aa 123

Texto sobre preto

5.71:1

AAAA grandeAAA

Tons

Clique em um tom para usá-lo.

Por que converter formatos de cor?

Designers e desenvolvedores trabalham com cores em vários formatos: HEX em ferramentas de design, rgb() e hsl() no CSS, OKLCH em design systems modernos como o Tailwind CSS v4 e CMYK para impressão. Esta ferramenta converte entre todos eles instantaneamente.

Recursos

  • • Saída em HEX, RGB, HSL, HSV, HWB, OKLCH e CMYK
  • • Seletor de cor nativo e controle de opacidade
  • • Taxa de contraste WCAG 2 contra branco e preto
  • • Paleta automática de tons claros e escuros

Instantâneo e local

Todas as conversões são calculadas no navegador, sem requisições de rede.

Cores acessíveis, zero rastreamento.

Como usar: Conversor de cores

  1. 1

    Digite uma cor em qualquer formato CSS: #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) ou um nome como tomato. Também dá para escolher no seletor.

  2. 2

    Ajuste a opacidade se precisar de transparência. Todos os formatos são atualizados juntos, inclusive HEX de 8 dígitos e rgba.

  3. 3

    Copie o formato necessário: HEX para entrega de design, rgb() ou hsl() para CSS, OKLCH para design tokens modernos e CMYK como ponto de partida para impressão.

  4. 4

    Confira o contraste WCAG com texto branco e preto e clique num tom da paleta para explorar variações mais claras ou escuras.

Exemplos práticos

Do design ao código

O designer manda #0EA5E9 do Figma. Converta para hsl() e crie estados hover e active mudando só a luminosidade.

Verificar acessibilidade

Texto corrido precisa de contraste mínimo de 4,5:1 no WCAG AA. Teste a cor da marca antes de usá-la como fundo de botão com texto branco.

Montar uma escala de cores

Use os tons gerados como base para uma paleta de 50 a 900 no Tailwind CSS ou no seu design system.

Material impresso

Converta uma cor de tela para CMYK ao conversar com a gráfica. É uma aproximação: a cor exata depende do papel e do perfil de impressão.

Perguntas frequentes

Diferença entre RGB e HSL?+

Ambos descrevem as mesmas cores. O RGB mistura luz vermelha, verde e azul; o HSL usa matiz, saturação e luminosidade, mais fácil de ajustar, por exemplo deixar uma cor 10% mais clara.

Por que usar OKLCH?+

O OKLCH é perceptualmente uniforme: mudanças iguais de luminosidade parecem igualmente diferentes ao olho, ao contrário do HSL. Todos os navegadores modernos o suportam e ele facilita escalas consistentes e temas escuros.

Qual contraste é necessário?+

O WCAG AA pede 4,5:1 para texto normal e 3:1 para texto grande (cerca de 24 px, ou 19 px em negrito). O AAA sobe para 7:1 e 4,5:1.

O valor CMYK é exato?+

Não. Converter RGB de tela para CMYK sem perfil de cor gera uma aproximação matemática. Para impressões críticas da marca, peça uma prova à gráfica ou use referências Pantone.