Por que o cinza fica na frente ao ordenar por matiz?

O matiz é indefinido pra cinzas puros (saturação = 0) e instável pra quase-cinzas. Agrupar cores de baixa saturação na frente e ordená-las por claridade dá um resultado mais previsível do que deixá-las cair num matiz arbitrário.

Ordenar por matiz vs luma — qual devo usar?

Matiz agrupa cores por família (todos os vermelhos, depois laranjas, depois amarelos…). Luma ordena por quão brilhantes o olho percebe usando pesos Rec. 709 — melhor pra empilhar cores num fundo escuro/claro por contraste.

Ordenar Cores

Cor

Lê qualquer lista de cores hex separada por espaços ou quebras de linha (com ou sem # inicial, 3 ou 6 dígitos), deduplica, e ordena o resultado pelo critério escolhido. Entradas quase em escala de cinza (saturação abaixo de 5%) são tiradas da ordem por matiz e agrupadas no início, ordenadas por claridade, pra não se espalharem aleatoriamente pelo arco-íris. Cada linha mostra o swatch, o valor hex, e o HSL subjacente.

—

Cores hex

Ordenar por

Direção

Cores: 11

#ef4444h 0° · s 84% · l 60%
#f97316h 25° · s 95% · l 53%
#eab308h 45° · s 93% · l 47%
#22c55eh 142° · s 71% · l 45%
#14b8a6h 173° · s 80% · l 40%
#f8fafch 210° · s 40% · l 98%
#64748bh 215° · s 16% · l 47%
#3b82f6h 217° · s 91% · l 60%
#0f172ah 222° · s 47% · l 11%
#8b5cf6h 258° · s 90% · l 66%
#ec4899h 330° · s 81% · l 60%

Duplicatas removidas. Quase-cinzas (S < 5%) sobem pra frente de uma ordem por matiz, ordenados por claridade.

Como usar

Cole cores hex — uma por linha, separadas por vírgulas, ou qualquer mistura.
Escolha qual eixo usar pra ordenar e ascendente vs descendente.
Copie a lista ordenada de volta.

Perguntas frequentes

Por que o cinza fica na frente ao ordenar por matiz?: O matiz é indefinido pra cinzas puros (saturação = 0) e instável pra quase-cinzas. Agrupar cores de baixa saturação na frente e ordená-las por claridade dá um resultado mais previsível do que deixá-las cair num matiz arbitrário.
Ordenar por matiz vs luma — qual devo usar?: Matiz agrupa cores por família (todos os vermelhos, depois laranjas, depois amarelos…). Luma ordena por quão brilhantes o olho percebe usando pesos Rec. 709 — melhor pra empilhar cores num fundo escuro/claro por contraste.