Fastway Tools

Conversor e Seletor de Cores

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

O que é um Conversor de Cores?

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.

As cores em telas são definidas por números, mas esses números podem ser escritos em vários formatos — HEX (#ff6b35), RGB (255, 107, 53), HSL (18°, 100%, 60%) e mais. Cada formato é preferido em um contexto diferente: web designers escrevem HEX no CSS, desenvolvedores front-end escolhem HSL para ajustar luminosidade, e ferramentas gráficas geralmente exportam RGB.

Convertendo 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.

Aplicações

  • Converter uma cor de marca de HEX (fornecida por um designer) para HSL para ajustar luminosidade ou saturação no CSS.
  • Traduzir um valor RGB de uma ferramenta gráfica para uma string HEX pronta para CSS.
  • Verificar como um valor de cor fica visualmente ao alternar entre formatos para o código.
  • Aprender teoria de cores vendo como a mesma cor é representada em diferentes modelos.

Como a conversão de cores funciona

HEX é apenas RGB escrito em base 16: #ff6b35 significa R=255, G=107, B=53. Converter HEX para RGB é uma decodificação de base 16 para base 10. Converter RGB para HSL segue uma fórmula matemática. Toda a aritmética acontece em poucas linhas de JavaScript.

A ferramenta renderiza uma pré-visualização ao vivo da cor para que você possa confirmar a conversão de relance.

Benefícios

  • 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.

Conversão de Cores Instantânea e Local

Conversões de formato de cor são computadas usando algoritmos JavaScript no seu navegador. Os valores de cor que você insere nunca são transmitidos aos nossos servidores — toda a conversão fica na sua máquina.

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.

Qual a diferença entre HSL e HSB/HSV?

HSL e HSB/HSV são relacionados, mas diferentes. No HSL, 100% de luminosidade é sempre branco e 0% é sempre preto; no HSB, 100% de brilho com 100% de saturação dá o matiz puro. Apps gráficos como o Photoshop usam HSB; o CSS usa HSL.