Conversor de cores

Três jeitos de escrever a mesma cor

As telas misturam todas as cores a partir de luz vermelha, verde e azul, e HEX, RGB e HSL são apenas três notações para as mesmas 16,7 milhões de combinações do espaço de cor sRGB. Qual delas você precisa depende de para onde o valor vai.

• HEX, como #2563eb: três pares de dígitos hexadecimais para vermelho, verde e azul, cada um de 00 a ff (0 a 255). Compacto e fácil de copiar, é o padrão em ferramentas de design, manuais de marca e na maior parte do CSS.
• RGB, como rgb(37, 99, 235): os mesmos três canais em decimal. Útil quando o código trabalha diretamente com números, como em desenho no canvas, processamento de imagens, recursos de cor do Android ou o Pillow do Python.
• HSL, como hsl(221, 83%, 53%): matiz, saturação e luminosidade. É a única das três que uma pessoa consegue ajustar raciocinando sobre ela, o que a torna a favorita para montar paletas e temas.

A forma curta de HEX #36f é uma abreviação de #3366ff, em que cada dígito é duplicado. Ela só funciona quando os dois dígitos de cada par são iguais.

Lendo valores HSL

O HSL descreve uma cor do jeito que as pessoas falam dela:

• Matiz é a posição no círculo cromático, em graus: 0 é vermelho, 60 amarelo, 120 verde, 180 ciano, 240 azul, 300 magenta, e 360 volta ao vermelho.
• Saturação vai de 0%, um cinza neutro, a 100%, a versão mais viva daquele matiz.
• Luminosidade vai de 0%, sempre preto, passando por 50%, a cor pura, até 100%, sempre branco.

É isso que torna o HSL prático para design systems. Mantenha matiz e saturação fixos, varie a luminosidade de 95% a 15% e você tem uma escala de tons claros a escuros para botões, fundos e bordas. Gire o matiz em 180 graus para um destaque complementar, ou em 30 graus para um lado ou para o outro para cores análogas.

Uma limitação: a luminosidade do HSL é uma média matemática, não o quanto a cor parece clara. Amarelo com 50% de luminosidade parece muito mais claro que azul com 50%, então cores com o mesmo L podem ter contraste bem diferente contra texto branco. Sempre confira o contraste no par real.

O que este conversor aceita

Cole ou digite no campo, ou escolha pela amostra de cor, e as linhas HEX, RGB e HSL se atualizam juntas, com uma grande pré-visualização. Entradas aceitas:

• #rgb, #rgba, #rrggbb e #rrggbbaa, com ou sem o #.
• Os 148 nomes de cores do CSS, como tomato ou rebeccapurple.
• rgb(37, 99, 235) e rgba(37, 99, 235, 0.5), ou a forma moderna separada por espaços rgb(37 99 235 / 50%). Os canais podem ser decimais ou porcentagens.
• hsl(221, 83%, 53%), hsla(…) e hsl(221.5 83% 53%). O matiz pode levar deg, turn, rad ou grad; os sinais de porcentagem são opcionais.
• Três números soltos: 37, 99, 235 ou 37 99 235.

Valores fora da faixa são limitados: rgb(300, 0, 0) vira vermelho 255. Um matiz de 360 ou mais, ou negativo, dá a volta no círculo. Canais decimais são arredondados para números inteiros.

O alfa, seja em HEX de 4 ou 8 dígitos, em rgba(), em hsla() ou depois de uma /, é lido mas ignorado, então as saídas são sempre totalmente opacas.

Os controles deslizantes R, G e B abaixo das saídas mudam um canal por vez. Eles servem para puxar uma cor um pouco para o quente ou para o frio enquanto você acompanha a pré-visualização e as três notações se atualizando.

Por que os valores mudam em uma unidade na volta

As conversões entre HSL e RGB envolvem frações, e toda saída aqui é arredondada para números inteiros, como o CSS costuma ser escrito. O HSL tem menos combinações inteiras que o RGB, cerca de 3,6 milhões contra 16,7 milhões, então várias cores RGB compartilham o mesmo valor HSL arredondado.

Por exemplo, #2563eb vira hsl(221, 83%, 53%), mas digitar esse HSL de volta dá #2463eb: o vermelho fica 36 em vez de 37. A diferença é invisível a olho nu, mas importa se um manual de marca especifica um HEX exato. Trate o valor HEX ou RGB como a fonte da verdade e use o HSL para explorar variações, não para guardar as cores oficiais.

Usando os resultados

• No CSS, as três strings de saída podem ser coladas como estão. Propriedades personalizadas como --brand: #2563eb; são o jeito mais limpo de reutilizá-las.
• Para o ícone de um site, defina primeiro a cor da marca aqui, aplique-a ao logotipo na sua ferramenta de design e depois transforme o logotipo num conjunto completo de ícones com o gerador de favicon.
• Para um QR code com a cor da marca, mantenha um contraste forte: um primeiro plano escuro, com cerca de 20–30% de luminosidade, sobre branco é lido sem problemas, enquanto cores claras ou pouco saturadas muitas vezes falham. O gerador de QR code permite testar.
• Cor impressa é outra história. Telas usam RGB, impressoras usam CMYK, e um azul vibrante na tela pode não ser reproduzível em tinta. Peça uma prova à gráfica quando a cor exata importar.

Toda a conversão acontece no seu navegador.