Ordenar Cores
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.
- #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.
- Duas cores me parecem igualmente claras, mas ficam distantes na ordenação. Por quê?
- A luminosidade do HSL é aritmética sobre os números RGB, não uma medida de quão clara uma cor parece. Um amarelo saturado e um azul saturado podem ter o mesmo valor de luminosidade mesmo com um sendo visivelmente mais claro, porque o olho é muito mais sensível ao verde do que ao azul. Ordene por brilho percebido sempre que a ordem precisar bater com o que você vê.
- Dá para ordenar uma lista que mistura hex com rgb() ou nomes de cores?
- Converta as outras notações para hexadecimal antes — aqui a entrada é só hex. A conversão vale a pena de todo jeito, porque revela duplicatas escondidas atrás de grafias diferentes: #ff0000, rgb(255, 0, 0) e red são uma única cor escrita de três maneiras, e só na forma hexadecimal elas são reconhecidas como repetição e removidas.
Ferramentas relacionadas
Paleta de Cores Tailwind
Paleta padrão completa do Tailwind CSS — 22 matizes × 11 tons, 50 até 950 — clique pra copiar como classe Tailwind, HEX ou rgb().
Gerador de Paleta de Cores
Escolha uma cor base, obtenha harmonias clássicas de roda de cores — complementar, split-complementar, triádica, tetrádica, quadrado, análoga, monocromática.
Paleta de Cor a partir de Imagem
Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.
Cores Nomeadas do CSS
Todas as 147 cores nomeadas CSS / X11 com HEX, RGB e amostra visual — pesquisáveis e agrupadas por tonalidade.
Conversor de comprimento de onda para cor (nm → sRGB)
Converte um comprimento de onda em nanômetros (380–780 nm — o espectro visível) em uma cor sRGB aproximada, com barra de gradiente arco-íris clicável e linhas de absorção de Fraunhofer do espectro solar real como referência.
Gerador de Cores Aleatórias
Gere uma grade de cores aleatórias em HEX, RGB ou HSL — escolha quantas, copie qualquer valor com um clique e regenere na hora para se inspirar.