Seletor de cores

Todas as cores desta página usam o sRGB, o espaço de cor padrão da web desde que os navegadores o adotaram no fim dos anos 1990. A tela mistura luz vermelha, verde e azul, e cada canal tem 256 níveis (0–255), o que resulta em 16.777.216 cores possíveis. O RGB escreve esses três números diretamente; o HEX escreve os mesmos três números na base 16, com dois dígitos cada, então #FF6600 é vermelho 255, verde 102 e azul 0. A forma abreviada de três dígitos duplica cada dígito: #F60 equivale a #FF6600.

HSL e HSB (também chamado de HSV) descrevem as mesmas cores de um jeito mais fácil de ajustar à mão. O matiz é um ângulo na roda de cores: 0° vermelho, 120° verde, 240° azul. A diferença está no último número. No HSL, luminosidade de 100% é sempre branco e 50% é a versão mais pura do matiz; no HSB, brilho de 100% é o matiz puro e o branco exige saturação de 0%. Aplicativos de design como Photoshop e Figma usam HSB nos seletores, enquanto o CSS entende hsl() nativamente, por isso os dois aparecem acima.

As telas somam luz; as impressoras a subtraem com tinta ciano, magenta, amarela e preta. Os dois sistemas cobrem faixas de cor diferentes, chamadas de gamuts. Cores muito saturadas de tela, como um verde RGB vivo, um azul elétrico ou um laranja neon, ficam fora do que as tintas de processo conseguem reproduzir, por isso saem mais opacas na impressão do que no monitor.

Os valores CMYK daqui usam a conversão matemática simples, sem perfil ICC, o que serve para um briefing aproximado, mas não para a gráfica. A gráfica converte com um perfil do seu papel e da sua impressora, como FOGRA39 na Europa ou GRACoL nos Estados Unidos, e a mesma cor RGB pode resultar em porcentagens de tinta diferentes em cada um. Para trabalhos impressos, envie o valor RGB ou HEX junto com o perfil que a gráfica pedir.

O WCAG 2.1 compara a luminância relativa de duas cores: a mais clara mais 0,05, dividida pela mais escura mais 0,05. O resultado vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). O nível AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande, ou seja, 18 pontos ou 14 pontos em negrito; o nível AAA eleva isso para 7:1 e 4,5:1. Elementos de interface, como bordas de campos e ícones, precisam de 3:1 em relação ao entorno, conforme o critério de sucesso 1.4.11.

A luminância dá muito mais peso ao verde do que ao azul, porque o olho é mais sensível a ele. Por isso texto amarelo sobre branco falha feio, enquanto azul-escuro sobre branco passa com folga, mesmo que as duas cores pareçam totalmente saturadas. Logotipos e texto puramente decorativo estão isentos da regra.

A paleta da imagem lê o arquivo com o canvas do navegador, reduz para no máximo 200 pixels no lado maior e agrupa pixels parecidos com o método de corte pela mediana (median-cut) descrito por Paul Heckbert em 1982: a faixa de cores é dividida várias vezes ao longo do canal mais largo até restarem seis grupos, e a média de cada grupo vira uma amostra. Pixels transparentes são ignorados, então um logotipo com fundo transparente resulta nas cores do próprio logotipo.

Com as cores em mãos, um logotipo chapado costuma funcionar melhor como vetor. O conversor de imagem em SVG vetoriza o arquivo em formas que mantêm exatamente essas cores, e, se você está criando o cabeçalho de um canal, o redimensionador de banner do YouTube ajusta a arte para 2560 × 1440 respeitando a área segura.