Conversor de cores

Como usar o conversor de cores

1. 1. Digite uma cor. Cole ou digite em qualquer notação que a caixa aceita — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) ou um nome CSS como rebeccapurple. Um 51 102 153 sozinho é lido como RGB.
2. 2. Ou use o seletor. O seletor define a cor e mantém qualquer transparência que você já tenha digitado.
3. 3. Copie o que precisa. Cada notação tem seu próprio botão de cópia, e Copiar CSS entrega os valores HEX, RGB, HSL e OKLCH como propriedades personalizadas para uma folha de estilos.
4. 4. Confira o nome. A ferramenta mostra a palavra-chave CSS quando sua cor é exatamente uma delas (rebeccapurple é #663399) e a palavra-chave mais próxima quando não é.

Como as conversões funcionam

Tudo é convertido pelo sRGB, o espaço de cor em que um navegador pinta. Um código HEX é apenas RGB em base 16: #336699 é vermelho 0x33 = 51, verde 0x66 = 102, azul 0x99 = 153. As outras notações reorganizam os mesmos três números.

• HSL descreve uma cor por matiz (um ângulo na roda de cores, de 0 a 360°), saturação e luminosidade. Com o maior canal max e o menor min (cada um dividido por 255), a luminosidade é (max + min) ÷ 2, e a saturação é (max − min) ÷ (1 − |2L − 1|). A matiz vem de qual canal é o maior.
• HSV (também chamado HSB) mantém a mesma matiz, mas mede o valor como max e a saturação como (max − min) ÷ max. É o modelo que a maioria dos seletores de cor desenha.
• HWB é a brancura (min) e a negrura (1 − max) sobre uma matiz pura; é mais fácil de raciocinar do que o HSL quando você quer um tom claro ou escuro. Se brancura mais negrura chegar a 100%, o resultado é um cinza.
• CMYK é mostrado como a conversão simples de dispositivo: K = 1 − max, e cada C, M e Y é (1 − canal − K) ÷ (1 − K). Não envolve tintas, papel nem perfil.
• OKLCH é luminosidade, croma e matiz no espaço OKLab de Björn Ottosson, que o CSS Color 4 suporta como oklch(). Passos iguais em L parecem muito mais próximos de brilho igual do que em RGB ou HSL.

Por que o CMYK aqui não é uma cor de impressão

Telas adicionam luz em vermelho, verde e azul; impressoras depositam tintas ciano, magenta, amarelo e preto sobre o papel. As duas gamas diferem, e a tinta na página depende do papel, da prensa e do perfil ICC que os descrevem. Uma fórmula que trabalha só a partir do RGB não sabe nada disso; por isso o CMYK acima é uma notação, não uma previsão: o azul puro de tela #0000ff vira 100% ciano e 100% magenta, que imprime como um violeta mais apagado. Para um pôster ou uma figura impressa, envie o arquivo à gráfica em RGB e peça o perfil dela, ou faça a conversão com esse perfil em um aplicativo de design.

Arredondamento, limitação e transparência

• Arredondamento. HEX e rgb() guardam números inteiros de 0 a 255, então uma cor digitada como hsl(210 50% 41%) é arredondada para o valor de 8 bits mais próximo. Converter esse valor de volta dá um HSL um pouco diferente — a grade de 8 bits é mais grosseira que a do HSL.
• Canais fora do intervalo. Valores fora da faixa são limitados, como fazem os navegadores: rgb(300 0 0) é #ff0000, e um canal negativo vira 0.
• Unidades de matiz. deg, grad, rad e turn são aceitos, e a matiz dá a volta: −150° é o mesmo que 210°.
• Alfa. #rrggbbaa, #rgba e / 50% funcionam. O alfa é guardado em 8 bits no HEX de 8 dígitos, então 50% vira 80 e volta como 50,2%.

Perguntas frequentes

Como converter HEX para RGB?

Divida os seis dígitos em três pares e leia cada par como um número em base 16: #336699 é 33, 66 e 99, que são 51, 102 e 153. Cole o código HEX na caixa e o valor RGB aparece na hora, junto com HSL, HWB, HSV, CMYK e OKLCH.

Qual é a diferença entre HSL e HSV?

Ambos usam o mesmo ângulo de matiz. O HSL coloca o branco na luminosidade máxima, qualquer que seja a saturação, então o meio dele é a cor pura; o HSV coloca a cor pura no valor e na saturação máximos, e o branco na saturação zero. O HSL é o que o CSS suporta como hsl(), enquanto o HSV (ou HSB) é o que a maioria dos seletores de cor mostra.

O valor CMYK é preciso para impressão?

Não. É a conversão simples a partir do RGB, sem tinta, papel nem perfil ICC, então descreve os mesmos números de outra forma, em vez de prever o que uma prensa vai imprimir. Cores fora da gama da impressora, como azuis e verdes muito vivos de tela, saem mais apagadas. Use o perfil da sua gráfica para tudo o que for importante.

O que significa o nome CSS mais próximo?

O CSS define 148 palavras-chave de cor. Se a sua cor for exatamente uma delas, a ferramenta a mostra sem ressalvas. Caso contrário, mostra a palavra-chave mais próxima no OKLab, um espaço construído para que a distância corresponda à diferença percebida — útil para dar nome a uma cor em um comentário, não como substituto do código.

Por que meu valor HSL muda um pouco depois de ida e volta?

HEX e RGB guardam cada canal como um de 256 valores, e o HSL não se mapeia um a um nessa grade. Uma cor digitada em HSL é arredondada para o valor RGB mais próximo, e o HSL mostrado é calculado a partir do valor arredondado. Partindo de um código HEX, cada conversão é exata até a precisão exibida.

Meus dados de cor são enviados para algum lugar?

Não. A conversão é aritmética simples no seu navegador; nada do que você digita é enviado ou armazenado.