Conversor de cor: hex, RGB, HSL e OKLCH

Altere qualquer campo: os demais atualizam. Use a tabela de cores para nomes e o teste de contraste para acessibilidade.

Conversao sincronizada

Edite a cor em qualquer formato

HEX · RGB · HSL · OKLCH

RGB

rgb(107, 122, 161)

HSL

hsl(226deg, 22%, 53%)

CSS Color 4

OKLCH perceptual

Descreve a cor por clareza, croma e matiz, com interpolacoes mais previsiveis que HSL.

oklch(0.52 0.06 264)

Continue com esta cor

Teste no contexto do projeto

Encontrar texto legivel Validar contraste WCAG Calcular opacidade

Como usar Conversor de cor

Converta entre hex, RGB, HSL e valores uteis para CSS moderno. Use a ferramenta diretamente no navegador, ajuste os campos principais, confira o resultado visual e copie ou baixe o material final quando estiver pronto.

Uso prático

Quando usar

Use este recurso quando precisar acelerar uma decisão de cores, design e acessibilidade sem abrir softwares pesados ou montar scripts manuais para tarefas repetitivas.

Boas práticas

Antes de aplicar

Teste o resultado em mais de um tamanho de tela, mantenha contraste legível e salve os valores finais em seu projeto para preservar consistência entre páginas, componentes e materiais.

Produtividade

Fluxo recomendado

Comece com uma configuração simples, refine visualmente, valide o resultado e depois combine esta ferramenta com recursos relacionados para fechar o acabamento do projeto.

Continue também com

Simulador de daltonismo Veja fundo e texto ou um mock de interface como em tipos comuns de visao com alteracao de cores. Gerador de harmonia Gere esquemas complementar, analogo, triade e tetade a partir de um hexadecimal. Teste de contraste WCAG Compare texto e fundo para validar legibilidade e criterios WCAG em interfaces.

FAQ

Dúvidas frequentes

Essa ferramenta envia dados para o servidor?

As ferramentas interativas do site priorizam processamento local no navegador sempre que possível, especialmente em imagens, cores e códigos gerados pelo usuário.

Posso usar o resultado em projetos comerciais?

Sim. Os códigos, valores e arquivos gerados podem ser usados em sites, interfaces, materiais de estudo e projetos profissionais.

Qual é o melhor jeito de validar o resultado?

Confira contraste, legibilidade, tamanho final e compatibilidade com o contexto do projeto antes de publicar em produção.