Converter cores
Conversor de cor online gratuito que reconhece HEX (3, 4, 6, 8 dígitos), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), a nova sintaxe CSS Color 4 (separada por espaço), todas as 147 cores nomeadas CSS e qualquer uma delas com alpha. Saída de cada formato de uma vez, copiável individualmente. Uma paleta integrada gera tons escuros (passos mais escuros), tons claros (passos mais claros), complementar, análogo, triádico e tetrádico. Um verificador de contraste WCAG mostra se a cor atende AA / AAA contra branco e preto para texto normal e grande. Abra o conta-gotas do SO (Chrome / Edge) para escolher qualquer cor na tela.
Como usar
Qualquer formato: HEX, RGB, HSL, OKLCH, até nomes CSS como tomato.
Todos os onze aparecem de uma vez, copie com um clique.
Tons e harmonias derivadas da sua cor.
Contraste WCAG contra branco e preto com veredicto AA/AAA.
Converta entre 11 formatos de cor, construa paletas, verifique contraste WCAG — tudo em um só lugar
Todos os formatos
Contraste (WCAG)
Paleta
Recentes
O que você pode fazer
Usos típicos
- Consultar o OKLCH de uma cor HEX de marca para um sistema de design CSS Color 4.
- Converter valores de pixel RGB de uma captura de tela em HSL para um eixo de gráfico.
- Encontrar uma cor complementar para um estado hover de botão.
- Verificar se o texto do corpo atende WCAG AA contra um fundo escolhido.
- Escolher uma cor de outra aba ou janela via conta-gotas do sistema.
Por que este
Muitos conversores fazem só HEX↔RGB↔HSL. Nós incluímos OKLab e OKLCH — os novos espaços CSS Color 4 que correspondem à percepção humana muito melhor que HSL (sem saltos surpresa no brilho ao mudar o tom). A geração de paleta roda em OKLab para que os passos pareçam perceptualmente uniformes, não matematicamente. O contraste é calculado no espaço de luminância WCAG 2 com os limiares 4.5:1 e 3:1 detalhados.
Perguntas frequentes
O que é OKLCH?
Um espaço de cor perceptualmente uniforme introduzido como parte do CSS Color 4. Diferente do HSL — onde brilho 50% pode parecer muito diferente em tons diferentes — o brilho OKLCH é consistente em todo o espectro, o que torna os tokens de design previsíveis. Se você está construindo um sistema de design moderno, OKLCH vale a pena aprender.
Minha cor inclui alpha?
Sim — qualquer um dos HEX de oito dígitos, rgba(), hsla(), ou sintaxe de espaço com sufixo alpha (rgb(255 0 0 / 50%)) é interpretado e refletido em cada formato de saída que suporta alpha.
Por que minha paleta de tons parece "em degraus" em vez de suave?
Tons escuros e claros são interpolados em OKLab e então projetados para seu espaço alvo, então cada passo é perceptualmente igual — isso geralmente produz resultados visualmente mais suaves que uma mudança ingênua de brilho HSL, mas cores iniciais muito escuras ou muito claras são cortadas perto dos extremos.
CMYK — preciso para impressão?
Não — a saída CMYK é uma conversão rápida no espaço da tela, não consciente de perfil ICC. Para impressão, pegue o CMYK que você vê aqui como ponto de partida e verifique em ferramentas Adobe / Affinity contra o perfil de impressão real.
Conta-gotas não funciona — por quê?
A EyeDropper API só está disponível em navegadores baseados em Chromium (Chrome, Edge, Brave) no momento. Firefox e Safari esconderão o botão com uma tooltip se não suportado.
Os nomes HEX diferenciam maiúsculas?
Não, HEX é hex (0-9, a-f ou A-F). Emitimos minúsculas por padrão para corresponder à recomendação CSS Color 4; a saída continua válida não importa como você a cole novamente.
Por que não há conta-gotas quando abro isto no celular?
Porque o conta-gotas de tela é uma capacidade dos navegadores de computador: ele lê um pixel de qualquer ponto da tela, e os navegadores móveis não expõem isso de jeito nenhum, então não há o que a página chamar. Todo o resto se comporta normalmente no celular — digitar um valor, converter entre HEX, RGB, HSL e os demais, copiar o resultado. Para pegar uma cor ali, use a amostra de cor nativa: tocar no campo de cor abre o seletor do sistema, que consegue amostrar de uma imagem aberta dentro dele, e o valor devolvido entra no conversor como qualquer outra entrada.
Podemos — e é! Envie uma mensagem rápida com sua ideia. Se quiser discutir em detalhes, deixe seu email e entraremos em contato. Pode ser anônimo.
