palette Conversor de Cor star

Como Funciona

Essas três notações descrevem exatamente a mesma cor — elas apenas codificam os níveis de luz vermelha, verde e azul que uma tela mistura para produzi-la. RGB armazena cada canal como um número decimal de 0 a 255. HEX é simplesmente o RGB escrito em base 16: cada canal vira um par hexadecimal de dois dígitos, então rgb(255, 128, 0) se torna #ff8000 (ff = 255, 80 = 128, 00 = 0). Nenhuma informação de cor é ganha ou perdida nessa tradução — é pura notação.

HSL é diferente: ele reexpressa a cor ao longo de três eixos perceptuais — matiz, saturação e luminosidade — calculados matematicamente a partir dos canais RGB. O matiz (0–360°) é o ângulo em uma roda de cores, calculado a partir de qual canal é o maior e o quanto os canais estão distantes entre si: para #ff8000, o vermelho é o máximo (255) e o azul é o mínimo (0), e a fórmula 60 × ((verde − azul) / (máx − mín)) dá 60 × (128/255) ≈ 30°, colocando-o na faixa laranja. A luminosidade é a média entre o canal mais alto e o mais baixo — aqui (255 + 0) / 2 ≈ 50%. A saturação mede o quão distante a cor está do cinza naquela luminosidade — 100% aqui, já que um canal está na intensidade máxima e outro em zero. Juntos, formam hsl(30, 100%, 50%) — o mesmo laranja de #ff8000, descrito de outra forma.

É exatamente por isso que os designers preferem HSL ao RGB: para tornar uma cor 20% mais escura mantendo seu matiz, o HSL só precisa reduzir o valor de luminosidade — o RGB exigiria recalcular os três canais proporcionalmente. Escolha uma cor no seletor ou digite qualquer código HEX e esta ferramenta converte instantaneamente para as duas notações.

O Que Você Deve Saber

O HEX curto de 3 dígitos (#f80) e as formas de 4/8 dígitos com canal alfa (#ff8000cc, rgba(255,128,0,0.8)) são variantes comuns; esta ferramenta trabalha com HEX opaco padrão de 6 dígitos e seus equivalentes em RGB/HSL. Nomes de cores como orange mapeiam para valores HEX fixos definidos na especificação CSS, mas nem toda cor nomeada tem um código HEX memorável, o que é mais um motivo para os desenvolvedores converterem de um lado para o outro. Duas cores que parecem idênticas em um monitor podem ser exibidas de forma ligeiramente diferente em outro, porque as telas de consumo variam em gama de cores e calibração — os valores HEX/RGB/HSL são números exatos, mas a luz que produzem não tem garantia de ser idêntica entre telas. Ao escolher cores de texto e de fundo, lembre-se de que o valor de luminosidade do HSL não é o mesmo que contraste perceptual — um amarelo saturado e um azul saturado podem compartilhar o mesmo valor L e ainda assim parecer muito diferentes contra o branco, então verificações de acessibilidade devem usar um cálculo de taxa de contraste adequado, não apenas o número L.

O CSS também aceita RGB baseado em porcentagem, como rgb(100%, 50%, 0%), como equivalente exato a rgb(255, 128, 0) — útil ao trabalhar com ferramentas de design que expressam cor em porcentagens em vez de inteiros de 0 a 255. Funções de cor mais novas do CSS, como oklch() e lab(), vão um passo além do HSL: são construídas para ser perceptualmente uniformes, ou seja, passos numéricos iguais em luminosidade parecem igualmente diferentes ao olho humano em qualquer matiz, algo que o HSL puro não garante totalmente. Para o trabalho cotidiano de web e interface, porém, HEX, RGB e HSL continuam sendo os três formatos que você encontrará em praticamente todo código, guia de estilo e ferramenta de design.