Conversor de hex para RGB / HSL / OKLCH

Referência de formatos

• Hex (#RRGGBB) — seis dígitos hexadecimais, dois para vermelho, verde e azul. O mais comum em CSS e ferramentas de design. A forma curta opcional de 3 dígitos (#RGB) duplica cada dígito.
• RGB (0–255) — três inteiros de 0 a 255 representando a intensidade de vermelho, verde e azul. Mesmo espaço de cor que hex, só decimal em vez de hexadecimal.
• HSL (Matiz, Saturação, Luminosidade) — representação RGB cilíndrica. O matiz é um ângulo de 0° a 360° na roda de cores; a saturação é 0–100% (cinza a vívido); a luminosidade é 0–100% (preto a branco). Mais fácil que RGB para escolher cores relacionadas, mas não percepivamente uniforme — valores iguais de L podem parecer bem diferentes em brilho.
• OKLCH (Luminosidade, Croma, Matiz) — espaço de cor percepivamente uniforme moderno projetado por Björn Ottosson (2020). L (0–100%) acompanha o brilho percebido, então valores iguais de L parecem igualmente brilhantes; C é o croma (saturação, ilimitado, mas tipicamente 0–0,4 para sRGB no gamut); H é a matiz em graus. Usado no CSS Color Module 4 e internamente pelo Tailwind v4 para manipulação de cor.

Por que OKLCH importa

Para tarefas como gerar uma paleta de cores equidistantes ou construir uma escala tonal (luminosidade 10, 20, 30, …), HSL falha sutilmente: um amarelo a 50% de luminosidade parece bem mais brilhante que um azul a 50% porque o modelo RGB-cilíndrico subjacente não considera a sensibilidade do olho humano. OKLCH resolve isso — valores iguais de L produzem cores igualmente brilhantes em todas as matizes, então as paletas e escalas tonais se comportam como você esperaria intuitivamente.