🎨 Conversor de Cores

HEX, RGB, HSL, OKLCH - qual formato você deve usar?

Cada cor que você vê na tela pode ser descrita em múltiplos formatos equivalentes. Cada um tem diferentes forças:

• HEX (#6366f1) - Compacto e universal. Usado em todos os lugares no CSS, ferramentas de design e guias de marca. Fácil de copiar/colar, mas não é legível para ajustes manuais.
• RGB (rgb(99, 102, 241)) - Valores diretos dos canais vermelho, verde e azul. Útil ao gerar cores por programação ou quando você precisa de um canal alfa.
• HSL (hsl(239, 84%, 67%)) - Matiz (Hue), saturação (Saturation) e luminosidade (Lightness). Muito mais fácil de ajustar manualmente: mude o matiz para alterar a cor, ou a luminosidade para variantes mais claras ou mais escuras.
• OKLCH (oklch(0.59 0.21 280)) - Espaço de cores uniformemente perceptivo. Valores de luminosidade idênticos realmente parecem igualmente brilhantes (ao contrário do HSL). Os sistemas de design modernos o adotam para um contraste previsível e geração de paletas.

Como usar este conversor de cores

• Digite em qualquer campo - altere HEX, RGB, HSL ou OKLCH e todos os outros formatos se atualizarão instantaneamente.
• Arraste um controle deslizante - ajuste canais individuais (R, G, B, H, S, L) com visualização em tempo real.
• Clique na amostra - copia o valor HEX atual para a sua área de transferência.
• Use o conta-gotas - selecione qualquer cor da sua tela (apenas Chrome e Edge - usa a API nativa EyeDropper).
• Paleta de recentes - cada cor que você visualiza é salva localmente para que você possa revisitá-la durante a sessão.

🔒 100% Privado e Seguro

Seus dados permanecem no seu dispositivo. Toda a conversão de cores acontece localmente no seu navegador - nunca enviamos suas cores para nenhum servidor.

Perguntas Frequentes

Esta ferramenta suporta transparência (canal alfa)?

Ainda não - a versão 1 manipula apenas cores opacas. O suporte para transparência (RGBA, HSLA, OKLCH com alfa) está em nosso cronograma.

Por que HSL → OKLCH não resulta em números redondos?

HSL e OKLCH são modelos de cores fundamentalmente diferentes. O HSL é um simples rearranjo geométrico do RGB; o OKLCH é baseado no espaço de cores perceptivo OKLab. A conversão passa por RGB e depois pelo XYZ linear, resultando em valores decimais. A cor resultante é idêntica.

Por que o nome da cor às vezes exibe "-"?

O conversor escolhe a correspondência mais próxima entre os 147 nomes de cores CSS padrão. Se a sua cor estiver muito longe de qualquer uma delas (como a maioria das cores), a correspondência mais próxima não será útil e exibiremos "-" para não induzir a erro.

O conta-gotas está disponível em todos os navegadores?

Não - a API nativa do EyeDropper está limitada ao Chrome/Edge no momento. O botão é desabilitado em navegadores não compatíveis (Firefox, Safari).

Ferramentas Relacionadas