Ordenar Colores
Lee cualquier lista de colores hex separada por espacios o saltos de línea (con o sin # inicial, de 3 o 6 dígitos), deduplica, y ordena el resultado por el criterio elegido. Las entradas casi en escala de grises (saturación bajo 5%) se sacan del orden por tono y se agrupan al inicio, ordenadas por claridad, para que no se dispersen aleatoriamente por el arcoíris. Cada fila muestra el swatch, el valor hex, y el HSL subyacente.
- #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%
Duplicados eliminados. Casi-grises (S < 5%) suben al frente de un orden por tono, ordenados por claridad.
Cómo usar
- Pega colores hex — uno por línea, separados por comas, o cualquier mezcla.
- Elige qué eje usar para ordenar y ascendente vs descendente.
- Copia la lista ordenada de vuelta.
Preguntas frecuentes
- ¿Por qué el gris queda al frente al ordenar por tono?
- El tono no está definido para grises puros (saturación = 0) y es inestable para casi-grises. Agrupar colores de baja saturación al frente y ordenarlos por claridad da un resultado más predecible que dejarlos caer en un tono arbitrario.
- ¿Ordenar por tono vs por luma — cuál debería usar?
- El tono agrupa colores por familia (todos los rojos, luego naranjas, luego amarillos…). Luma ordena por qué tan brillantes los percibe el ojo usando pesos Rec. 709 — mejor para apilar colores sobre un fondo oscuro/claro por contraste.
- Dos colores me parecen igual de claros pero quedan lejos al ordenar. ¿Por qué?
- La luminosidad de HSL es aritmética sobre los números RGB, no una medida de lo brillante que parece un color. Un amarillo saturado y un azul saturado pueden compartir el mismo valor de luminosidad aunque uno sea claramente el más brillante, porque el ojo es mucho más sensible al verde que al azul. Ordena por brillo percibido siempre que el orden deba coincidir con lo que ves.
- ¿Puedo ordenar una lista que mezcla hex con rgb() o nombres de color?
- Convierte antes las otras notaciones a hexadecimal: aquí la entrada es solo hex. La conversión merece la pena de todos modos, porque saca a la luz duplicados escondidos tras distintas escrituras: #ff0000, rgb(255, 0, 0) y red son un mismo color escrito de tres formas, y solo en hexadecimal se reconocen como repetición y se eliminan.
Herramientas relacionadas
Paleta de Colores Tailwind
La paleta por defecto completa de Tailwind CSS — 22 matices × 11 sombras, 50 a 950 — click para copiar como clase Tailwind, HEX o rgb().
Generador de Paleta de Colores
Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Colores Nombrados de CSS
Los 147 colores nombrados CSS / X11 con HEX, RGB y muestra en vivo — buscables y agrupados por matiz.
Conversor de longitud de onda a color (nm → sRGB)
Convierte una longitud de onda en nanómetros (380–780 nm — el espectro visible) a un color sRGB aproximado, con una barra de gradiente arcoíris clicable y líneas de absorción de Fraunhofer del espectro solar real como referencia.
Generador de Colores Aleatorios
Genera una cuadrícula de colores aleatorios en HEX, RGB o HSL — elige cuántos, copia cualquier valor con un clic y regenera al instante para inspirarte.