extração e seleção de cores
Escolher uma cor não termina em pegar um valor, termina em decidir seis formatos ao mesmo tempo, gerar uma escala de tons a partir dela e saber se o texto por cima deve ser branco ou preto, três problemas técnicos diferentes escondidos atrás de um único clique.
Os seis valores descrevem a mesma cor sob seis lentes diferentes; note que o HSB (85% de brilho) não é igual ao HSL (46% de luminosidade), são eixos de brilho calculados de formas distintas.
A cor original ocupa o degrau cuja meta de luminosidade OKLCH está mais próxima da dela (0,80 no degrau 300, distância de só 0,005); os demais degraus são recalculados, não interpolados em RGB.
A diferença entre os dois vereditos é grande porque esse ciano tem luminância intermediária: fica perto demais do branco para o texto branco funcionar, mas longe o bastante do preto para render um contraste quase máximo.
Seis, todos copiáveis com um clique: HEX, RGB, HSL, OKLCH, HSB e CMYK. Os quatro primeiros podem ser colados direto em CSS; HSB é o formato dos editores gráficos e CMYK é de impressão, então vêm marcados como fora do CSS. Todos descrevem a mesma cor, apenas por sistemas de coordenadas diferentes.
Porque clarear em RGB ou HSL soma valor aos canais de forma linear, o que distorce matizes de forma desigual, especialmente amarelo (escurece rápido demais) e azul (satura rápido demais). Escalas construídas em OKLCH evitam isso porque fixam a meta de luminosidade perceptual e ajustam croma, sem tocar diretamente nos canais R, G, B.
OKLCH é um espaço de cor perceptualmente uniforme criado por Björn Ottosson e adotado pelo CSS Color 4, com luminosidade (L), croma (C) e matiz (H) separados de um jeito que se aproxima de como o olho humano percebe diferença de cor. Escalas de design token usam esse espaço porque variar só a luminosidade preserva o matiz de forma consistente entre cores diferentes, algo que RGB e HSL não garantem.
Calcule a razão de contraste WCAG da cor de fundo contra branco e contra preto e escolha a que atinge pelo menos 4,5:1; cores de luminância intermediária, como um ciano médio, costumam falhar contra branco e passar com folga contra preto, então a escolha não é intuitiva sem o cálculo.
Sim, principalmente em croma alto no espaço OKLCH: existem combinações de matiz e croma que nenhum monitor sRGB consegue exibir. Quando isso acontece, a alternativa a cortar canal por canal é reduzir o croma mantendo matiz e luminosidade, o que preserva a aparência da cor pedida em vez de deformá-la.
#14b8a6Tudo roda no seu navegador: a imagem aberta não sai do dispositivo, e a paleta salva fica só neste aparelho.