Conversor de cores

HEX e RGB são a mesma coisa escrita de outro jeito. `#663399` são três pares de dígitos hexadecimais — 102, 51 e 153 — e `rgb(102 51 153)` são esses mesmos números em decimal. Converter entre os dois não perde nada, porque só muda a base.

HSL e HSV descrevem a mesma cor do ponto de vista de uma pessoa, não de uma tela. Em vez de quanto de vermelho, verde e azul misturar, dão o matiz como um ângulo num círculo cromático, depois a saturação e a luminosidade. É por isso que designers recorrem a eles: clarear uma cor em dez por cento é um número em HSL e três nada evidentes em RGB.

Todo o resto desta página é um rearranjo dos mesmos três números. O CMYK não: ele descreve tinta no papel, e como uma mistura de ciano, magenta, amarelo e preto fica de verdade depende da máquina, do papel e do perfil de cor. Nenhuma fórmula tem acesso a isso.

O que você recebe aqui é a conversão nominal de sempre, a mesma que faz qualquer ferramenta que ofereça CMYK sem perguntar por um perfil. Como ponto de partida serve; como valor de impressão, não. Se a cor importa mesmo, a gráfica vai querer o hex e vai fazer a separação com o perfil dela.

O alfa é preservado: `#663399cc`, `rgba(102, 51, 153, 0.8)` e `rgb(102 51 153 / 80%)` significam a mesma cor com 80% de opacidade, e as três são lidas corretamente. A forma hex de oito dígitos é a que menos aparece e a que confunde mais ferramentas, embora seja apenas a de seis com um quarto par para a opacidade.

Em CMYK não há equivalente, porque a tinta vai para o papel ou não vai. Quando a cor informada é parcialmente transparente, os valores CMYK a descrevem como se fosse opaca.

Abaixo das notações há dois números: a razão de contraste da sua cor sobre branco e sobre preto. Vêm da definição da WCAG, que não é uma média de brilho — os canais são ponderados, porque o olho é bem mais sensível ao verde do que ao azul, e cada um é linearizado antes.

O uso prático é decidir que cor de texto pôr sobre um fundo. 4,5 é o limite do texto corrido e 3 o dos títulos grandes, então um fundo cuja melhor razão fica abaixo de 4,5 pede letra maior ou outro fundo. É o jeito mais rápido de descobrir que uma cor institucional bonita no layout não passa numa auditoria de acessibilidade.

Uma cor que não dá para ler é apontada como ilegível em vez de ser substituída em silêncio. Parece óbvio e é incomum: o jeito habitual de construir esta página é entregar o texto ao navegador e reler o que ele calculou, quatro linhas de código que respondem a `#12345` com a cor anterior.

Assim um dígito faltando parece uma conversão bem-sucedida, e você só descobre quando o tom não bate em outro lugar. Aqui a análise é explícita. Custa uma tabela com as cento e quarenta e oito palavras-chave do CSS e devolve um erro em vez de uma resposta errada e convincente.