Conversor de cores
Converta cores entre HEX, RGB, HSL e OKLCH com prévia ao vivo
Sobre esta ferramenta
Insira uma cor em qualquer notação comum — #hex, rgb(), hsl() ou uma cor nomeada do CSS — e receba todos os formatos de uma vez: HEX, RGB, HSL e OKLCH, ao lado de uma amostra ao vivo. Canais alfa são preservados entre os formatos, e a saída usa a sintaxe CSS moderna (canais separados por espaço), que cola limpa em folhas de estilo atuais.
OKLCH está incluído porque é para onde a cor no CSS está indo: ao contrário do HSL, seu eixo de luminosidade é perceptualmente uniforme, então duas cores com o mesmo L realmente parecem igualmente claras, e ajustar o matiz não muda acidentalmente o brilho percebido. Converter uma paleta existente para OKLCH é o primeiro passo para construir escalas de cor consistentes.
A matemática da conversão roda localmente usando as transformações publicadas sRGB↔OKLab, e os valores fazem a viagem de ida e volta: o RGB que você recebe de uma entrada HSL é exatamente o que o navegador computaria.
Perguntas frequentes
- Por que os valores de luminosidade de HSL e OKLCH discordam?
- A luminosidade do HSL é uma propriedade geométrica dos valores RGB, não da visão humana — o amarelo hsl(60 100% 50%) parece bem mais claro que o azul hsl(240 100% 50%), apesar do L idêntico. O eixo L do OKLCH foi projetado para corresponder à percepção, então L igual significa brilho aparente igual. Essa discordância é a razão inteira de o OKLCH existir.
- O que significa o valor alfa e onde ele entra em cada formato?
- Alfa é opacidade, de 0 (transparente) a 1 (opaco). Em hex de 8 dígitos é o byte final (#RRGGBBAA); na sintaxe funcional moderna vem depois de uma barra: rgb(76 141 255 / 0.5). Este conversor carrega o alfa por todos os formatos automaticamente.
- Toda cor OKLCH pode ser exibida em sRGB?
- Não — OKLCH cobre gamas amplas, e algumas combinações de croma/luminosidade não têm equivalente em sRGB. Converter a partir de sRGB (como esta ferramenta faz) sempre permanece representável; no sentido inverso, cores fora da gama precisam ser cortadas ou mapeadas, e é por isso que um verde P3 vívido parece mais apagado em uma tela sRGB.
- Por que rgb(76 141 255) separado por espaços em vez de vírgulas?
- O CSS Color Module Level 4 padronizou canais separados por espaço com um /alfa opcional, e todo navegador moderno suporta. A forma com vírgulas ainda funciona, mas a forma com espaços é a que as novas especificações (e esta ferramenta) usam.