Conversor de Cores - Ferramenta online gratuita

Funcionalidades

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

Seletor de cor visual

Pré-visualização em direto

Saída como variáveis CSS

Como Usar

1. Escolha uma cor (ou clique na superfície, cole um HEX, use o conta-gotas ou pressione Espaço para aleatória).

2. Todos os formatos — HEX, RGB, HSL, OKLCH — convertem ao vivo nos dois sentidos.

3. Copie um valor único ou o bloco inteiro de variáveis CSS; alterne a superfície para avaliar a cor sobre branco, cinza ou escuro.

Sobre esta ferramenta

Designers escolhem cores no olho, o CSS precisa de uma string e cada ferramenta fala um formato diferente. Este conversor mantém uma mesma cor sincronizada em HEX, RGB, HSL e OKLCH: altere qualquer campo ou use o seletor e o resto se atualiza na hora. HEX e RGB descrevem os canais vermelho, verde e azul; HSL descreve matiz, saturação e luminosidade, mais fácil de ajustar à mão; OKLCH é um formato perceptual mais recente do CSS Color Level 4, em que passos iguais de luminosidade parecem iguais aos olhos, o que o torna melhor para criar paletas consistentes. Você pode copiar um único valor ou um bloco pronto de propriedades personalizadas CSS e visualizar a cor sobre fundo branco, cinza ou escuro antes de usá-la.

Perguntas Frequentes

Qual formato devo usar no CSS?

HEX e rgb() funcionam em qualquer lugar e servem bem para cores fixas. hsl() é prático quando você quer ajustar luminosidade ou saturação à mão. oklch() é suportado pelos navegadores atuais e é o melhor para paletas sistemáticas, porque sua luminosidade é perceptualmente uniforme.

Por que cores HSL com luminosidade 50% parecem tão diferentes em brilho?

HSL é um rearranjo matemático do RGB, não um modelo da visão humana, então um amarelo a 50% parece muito mais claro que um azul a 50%. A luminosidade do OKLCH foi projetada para corresponder ao brilho percebido, por isso ele é cada vez mais usado em design systems.

Por que um valor convertido pode mudar um pouco ao converter de volta?

HEX e RGB guardam números inteiros de 0 a 255, enquanto HSL e OKLCH usam decimais. O arredondamento na conversão pode mover um canal em um passo, o que não é visível a olho nu.

Posso capturar uma cor de outro lugar da tela?

Em navegadores com suporte à API EyeDropper, como Chrome e Edge no desktop, o botão de conta-gotas permite capturar qualquer pixel da tela. Outros navegadores mostram o seletor de cores padrão.

O que o bloco de variáveis CSS contém?

Ele lista a mesma cor como propriedades personalizadas em vários formatos, por exemplo --color-hex, --color-rgb, --color-hsl e --color-oklch, para você colar em :root e usar o formato de que seu código precisar.