Conversor de Cores – HEX, RGB, HSL e OKLCH

Como converter uma cor

1. Digite uma cor na caixa Cor, por exemplo #6366F1, rgb(99 102 241), hsl(239 84% 67%) ou um nome como teal. Você também pode tocar em Escolher uma cor para usar o seletor de cores do seu aparelho.
2. Confira a prévia. Uma amostra grande mostra a cor com um texto de exemplo em branco e em preto por cima.
3. Copie o formato que precisar. A lista Formatos mostra HEX, RGB, HSL e OKLCH, cada um com seu botão de copiar.
4. Verifique o contraste. O painel Contraste de texto (WCAG) mostra a razão de contraste sobre branco e sobre preto e o nível WCAG mais alto que a cor alcança.

Recursos

• Quatro formatos de saída ao mesmo tempo: HEX, RGB, HSL e OKLCH, prontos para colar no CSS.
• Entrada flexível: HEX de 3, 4, 6 e 8 dígitos, rgb(), hsl(), oklch(), sintaxe moderna e antiga e nomes de cores CSS.
• Suporte a transparência, com o alfa mostrado em todos os formatos.
• Seletor de cores nativo no celular e no computador.
• Razão de contraste WCAG 2 sobre branco e sobre preto, com os rótulos AAA, AA, AA Large ou Reprovado no AA.
• Amostra ao vivo com texto de exemplo em branco e em preto.
• Mensagem de erro amigável com exemplos quando um valor não pode ser lido.

Por que usar o conversor de cores do Fileora

Ele faz as contas no seu navegador, então não há nada para esperar e nada é enviado para lugar nenhum, nem aquelas cores de marca que ainda não foram lançadas. É grátis, não pede cadastro e funciona no celular, o que ajuda quando você quer converter uma cor que acabou de ver na tela.

Juntar a conversão com a verificação de contraste economiza um passo: você descobre se a cor da marca serve para botões e links antes de ela chegar à revisão de design.

HEX, RGB, HSL e OKLCH comparados

HEX é o formato mais compacto e mais aceito. #6366F1 é só o vermelho, o verde e o azul escritos em base 16. Ótimo para passar cores entre design e desenvolvimento, mas difícil de ajustar no olho.

RGB guarda a mesma informação em números inteiros de 0 a 255. É útil quando a cor vem de código, como um canvas ou uma biblioteca de imagens.

HSL divide a cor em matiz, saturação e luminosidade, então você clareia uma cor sem mudar o matiz. O ponto fraco é que essa luminosidade não é perceptual: um amarelo com 50% de luminosidade parece muito mais claro que um azul com 50%.

OKLCH resolve isso. A luminosidade dele segue a visão humana, então dá para montar uma escala de tons em que cada degrau parece igualmente espaçado, ou trocar o matiz mantendo um contraste de texto parecido. Para design tokens e temas, costuma ser a melhor escolha, com o HEX mantido como alternativa para ferramentas mais antigas.

Acertando o contraste

Mire em pelo menos 4,5:1 para texto corrido e 3:1 para títulos grandes e ícones. Tons médios muitas vezes passam em um fundo e reprovam no outro, então confira branco e preto se o seu site tem modo escuro. Se a cor da marca reprovar, diminua um pouco a luminosidade OKLCH dela para uso em texto e mantenha a original para fundos e bordas.

Quando precisar embutir um ícone pequeno nessa cor direto no CSS, a ferramenta de converter imagem em Base64 transforma o ícone em data URI. Você também pode transformar um link em um código escaneável com o gerador de QR code e manter arquivos de tema organizados com o formatador de JSON.