Converter uma cor entre RGB, HSL e hexadecimal

Trabalhar com cor na web implica alternar constantemente entre várias notações. Um conversor de cor evita os erros manuais e permite passar instantaneamente de um formato para outro consoante o contexto de utilização. Cada formato tem os seus pontos fortes, e saber qual usar é um dos reflexos do programador front-end.

Eis as utilizações típicas que justificam uma conversão de cor:

• RGB é nativo em CSS e JavaScript, legível pelos humanos para perceber uma dominante (canais vermelho, verde, azul em 0-255).
• HSL torna trivial a alteração de uma tonalidade: basta ajustar a saturação ou a luminosidade sem recalcular cada canal.
• HEX é o formato canónico para copiar e colar: seis caracteres, compatível em todo o lado, ideal para as maquetas Figma, Sketch ou os guias de estilo.
• As conversões HEX para RGB, RGB para HEX, HEX para HSL e respetivas inversas são as operações mais frequentes em CSS e JavaScript.

RGB e RGBA (Red, Green, Blue, Alpha)

Cada canal é codificado num inteiro entre 0 e 255, o que corresponde a um octeto por componente e dá 16 777 216 cores possíveis. O canal alfa de RGBA vai de 0 (transparente) a 1 (opaco) e controla a transparência.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX e HEX8 (notação hexadecimal)

Formato compacto muito difundido: #RRGGBB em seis caracteres, onde cada par representa um canal RGB em base 16. A variante #RRGGBBAA em oito caracteres adiciona o canal alfa em hexadecimal (00 transparente, FF opaco). A notação curta #RGB também existe: #F53 é equivalente a #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL e HSLA (Hue, Saturation, Lightness, Alpha)

HSL descreve a cor de forma percetual. Hue é um ângulo na roda cromática (0 a 360°), Saturation e Lightness são percentagens. É o formato a privilegiar para gerar variantes: clarear um botão em hover, dessaturar um estado desativado, criar uma paleta coerente fazendo variar apenas a tonalidade.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Outros formatos existentes

CMYK (Cyan, Magenta, Yellow, Key) é utilizado na impressão: descreve uma cor por subtração de tintas e não é pertinente no ecrã. OKLCH e LAB são espaços percetualmente uniformes surgidos no CSS Color Level 4; permitem um melhor controlo da luminosidade percebida. Esta ferramenta concentra-se nas conversões RGB, HEX e HSL, que cobrem a esmagadora maioria das necessidades web.

HEX para RGB consiste em analisar a cadeia por pares de caracteres e interpretar cada par como um inteiro em base 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB para HEX é a operação inversa: cada canal é convertido em base 16, completado para dois caracteres, depois concatenado.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB para HSL é mais algorítmico. Normalizam-se os canais entre 0 e 1, calcula-se o mínimo e o máximo para deduzir a luminosidade, depois a saturação e finalmente a tonalidade conforme o canal dominante. A fórmula completa está documentada na especificação CSS Color Module Level 3.

A ferramenta funciona nos dois sentidos entre RGB, HEX e HSL. Para efetuar uma conversão:

1. Escolha o formato de entrada: RGB, HEX ou HSL.
2. Introduza o valor (por exemplo #1400B6, rgb(20, 0, 182) ou hsl(247, 100%, 36%)).
3. Inicie a conversão: os equivalentes nos outros dois formatos aparecem imediatamente.
4. Copie o resultado pretendido com o botão dedicado e cole-o na sua folha de estilos ou maqueta.

O cálculo é feito no lado do navegador, nenhum dado é enviado para um servidor.

• Design web e CSS: obter um HEX a partir de uma maqueta e o HSL equivalente para gerar um estado hover ou active sem desviar a tonalidade.
• Identidade visual e paleta: declinar uma cor primária em várias variantes (clara, escura, atenuada) jogando com a luminosidade ou a saturação HSL.
• Ilustração e grafismo: transpor uma cor de ecrã (RGB) para um código hexadecimal a transmitir a um software ou cliente.
• Acessibilidade: converter para o formato RGB para calcular depois um rácio de contraste (WCAG AA exige 4.5:1 para o texto normal) com a cor de fundo.
• Variáveis CSS e pré-processadores: alimentar tokens de design num ficheiro SASS ou num tema Tailwind a partir de uma única cor de referência.

Algumas conversões completas para ilustrar a correspondência entre os três formatos:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Com canal alfa:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Qual a diferença entre HEX e HEX8?

HEX clássico codifica três canais RGB em seis caracteres (#RRGGBB). HEX8 acrescenta dois caracteres para o canal alfa (#RRGGBBAA), o que permite gerir a transparência numa única cadeia. #1400B6FF e #1400B6 dão visualmente a mesma cor, opaca.

Deve preferir-se HSL ou RGB em CSS?

Os dois são equivalentes em rendição. HSL é mais expressivo para gerar uma paleta coerente ou variantes de estado (hover, focus), porque se modifica um único parâmetro percetual. RGB continua prático quando se trabalha com dados vindos de um canvas ou de um sensor.

Porque é que o meu HEX dá uma tonalidade diferente da esperada?

Três causas frequentes: confusão entre #RGB curto e #RRGGBB longo (os caracteres são duplicados, não concatenados), erro de cópia num caractere, ou apresentação num ecrã não calibrado. Verifique também se o seu CSS não sobrepõe uma opacidade do contentor pai que modifica a rendição final.

Para que serve o canal alfa de RGBA e HSLA?

O canal alfa controla a opacidade da cor, de 0 (totalmente transparente) a 1 (totalmente opaco). É útil para overlays, sombras, estados desativados ou sobreposições em cima de uma imagem. Ao contrário da propriedade CSS opacity, RGBA e HSLA só afetam a cor visada e não os seus elementos filhos.

É possível converter uma cor sem perda de precisão?

Entre RGB e HEX a conversão é exata, os dois formatos codificam a mesma informação em 24 bits. A conversão para HSL implica arredondamentos na tonalidade, na saturação e na luminosidade; uma ida e volta RGB > HSL > RGB pode portanto devolver um valor desfasado de uma unidade em alguns canais.

Porquê usar um conversor online em vez de uma função caseira?

Para um teste pontual, prototipar uma paleta ou verificar rapidamente o equivalente HEX de uma cor HSL extraída de uma maqueta, um conversor online é imediato. Para uma necessidade programática recorrente, uma biblioteca como color, chroma-js ou tinycolor2 continua mais apropriada.