Converter cor entre HEX, RGB, HSL, HSB, CMYK e nome CSS

Por que a mesma cor tem tantos formatos diferentes

Uma cor pode ser descrita de várias formas matemáticas diferentes, cada uma pensada para um contexto de uso: HEX e RGB são as formas mais comuns em código (CSS, design de interface), HSL e HSB/HSV separam matiz, quantidade de cor e claridade de um jeito mais próximo de como se pensa em cor intuitivamente ("um azul mais claro", "um vermelho mais saturado"), CMYK descreve tinta subtrativa usada em impressão, e o nome CSS é só uma palavra-chave padronizada da linguagem, útil quando o código precisa ser legível por humanos. Esta ferramenta converte entre todos ao mesmo tempo, a partir de uma única cor escolhida.

Como escolher a cor

Três formas equivalentes de chegar na mesma cor: arrastar na roda de matiz (o anel externo) e no quadrado de saturação/brilho no centro dela, digitar o valor hexadecimal diretamente, ou ajustar os sliders numéricos de RGB ou de HSL. Qualquer uma das três atualiza as outras duas instantaneamente — não há uma forma "principal" e as demais "derivadas": todas apontam para o mesmo estado de cor por baixo.

O que muda entre RGB, HSL e HSB/HSV

RGB descreve uma cor pela quantidade de luz vermelha, verde e azul que, somadas, formam a cor final — é um modelo aditivo, o mesmo usado por telas. HSL e HSB/HSV reorganizam essa mesma informação em três eixos mais intuitivos: matiz (a "cor pura", de 0 a 360 graus no círculo cromático), saturação (quanto de cinza está misturado) e um terceiro eixo que muda entre os dois — luminosidade em HSL, brilho em HSB. A diferença prática mais notável: em HSL, tanto 0% quanto 100% de luminosidade sempre dão preto e branco puro, não importa a saturação; em HSB, só 0% de brilho garante preto — 100% de brilho com 0% de saturação dá branco, mas 100% de brilho com saturação alta dá a cor mais viva possível daquele matiz.

CMYK: de tela para papel, com uma ressalva

CMYK representa cor por mistura de tinta subtrativa — ciano, magenta, amarelo e preto —, o modelo usado em impressão. A conversão de RGB para CMYK mostrada aqui usa uma fórmula matemática direta, sem levar em conta o perfil de cor de uma gráfica específica, tipo de papel ou de tinta — fatores reais que mudam a cor final impressa. Para produção gráfica profissional que exige fidelidade exata de cor, o valor de CMYK certo depende do perfil ICC usado por aquela gráfica em particular, não só da conversão genérica.

O nome CSS nem sempre existe de verdade

A linguagem CSS define 147 nomes de cor padronizados, cada um associado a um valor hexadecimal fixo e específico — "tomato", "cornflowerblue", "rebeccapurple". A grande maioria das cores possíveis, no entanto, não corresponde exatamente a nenhum desses 147 valores. Quando isso acontece, esta ferramenta mostra o nome cuja cor fica mais próxima, por distância matemática entre os componentes RGB, com aviso claro de que é uma aproximação — não o nome "oficial" daquela cor específica, porque a maioria das cores simplesmente não tem nome padronizado.

Quando usar cada formato no dia a dia

HEX é o formato mais compacto para colar direto em CSS ou numa ferramenta de design. RGB por extenso (rgb(59, 130, 246)) ajuda quando é preciso enxergar cada canal separadamente, por exemplo para comparar duas cores canal a canal. HSL é útil para criar variações de uma mesma cor de forma previsível — manter matiz e saturação fixos e só variar a luminosidade produz uma escala de tons coerente, o mesmo princípio usado pela opção "monocromática" da ferramenta de paleta desta família. HSB/HSV aparece mais em ferramentas de edição de imagem e seletores de cor de software gráfico, por separar melhor "quão viva" (saturação) e "quão clara" (brilho) uma cor é. CMYK só importa quando o destino final é impressão. E o nome CSS serve principalmente para tornar o código mais legível para quem lê — poucas pessoas decoram o hex de "steelblue", mas o nome já entrega a ideia.

O que esta ferramenta não faz

Ela não sugere combinações de cor nem diz se uma cor é "boa" ou "ruim" para determinado uso — isso é avaliação de design, fora do escopo de uma conversão matemática entre formatos. Não verifica contraste de acessibilidade (há uma ferramenta própria para isso nesta família) nem gera paleta a partir da cor escolhida — só converte a cor informada entre os formatos mais usados em código e design, mostrando todos ao mesmo tempo.