颜色排序
读取任何由空白或换行分隔的 hex 颜色列表（含或不含 #，3 位或 6 位均可），去重并按所选标准排序。近灰度条目（饱和度低于 5%）会从色相排序中抽出并集中到开头，按明度排列，避免在彩虹中随机散落。每行显示色块、hex 值与基础 HSL。
—
排序依据
方向
颜色数: 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%
去除重复。近灰（S < 5%）会浮到色相排序最前，并按明度排列。
使用方法
- 粘贴 hex 颜色 — 每行一个、逗号分隔，或任意混合皆可。
- 选择按哪个轴排序以及升序或降序。
- 把排序后的列表复制出去。
常见问题
- 按色相排序时为何灰色排在前面？
- 纯灰色（饱和度 = 0）的色相未定义，近灰色亦不稳定。把低饱和度颜色集中到开头并按明度排序，比让它们落在任意色相位置更可预测。
- 色相 vs 亮度排序，该用哪个？
- 色相按颜色族分组（所有红，然后橙、黄……）。亮度则按人眼用 Rec. 709 加权的感知亮度排序 — 用对比把颜色叠在深/浅背景上时更合适。
- 两种颜色在我看来一样亮，排序时却离得很远，为什么?
- HSL 的亮度是对 RGB 数值做的算术，而不是对「看起来有多亮」的度量。一种饱和的黄色和一种饱和的蓝色可能具有相同的亮度值，但实际上其中一个明显更亮，因为人眼对绿色远比对蓝色敏感。当排序结果必须符合肉眼所见时，请按感知亮度排序。
- 列表里混着 hex、rgb() 和颜色名，也能排序吗?
- 请先把其他写法转成十六进制——这里只接受 hex 输入。这一步转换本身也值得做，因为它会暴露藏在不同写法背后的重复：#ff0000、rgb(255, 0, 0) 和 red 是同一种颜色的三种写法，只有都变成十六进制，才会被识别为重复并去掉。
相关工具
Tailwind 调色板
完整 Tailwind CSS 默认调色板 — 22 色相 × 11 色阶（50 至 950）— 点击复制为 Tailwind 类、HEX 或 rgb()。
颜色 0 0
调色板生成器
选择基色，得到经典色环和谐配色 —— 互补、分裂互补、三色、四色、正方、类似、单色。
颜色 0 0
从图片提取调色板
拖入图片，工具通过 Canvas 分析主色并提取调色板——复制 HEX 或一键复制全部。
颜色 0 0
CSS 命名颜色
全部 147 个 CSS / X11 命名颜色，含 HEX、RGB 与实时色块 — 可搜索、按色相分组。
颜色 0 0
波长转颜色（nm → sRGB）
把光的波长（380–780 nm，可见光）转换为近似的 sRGB 颜色，附可点击的彩虹渐变条，以及来自真实太阳光谱的 Fraunhofer 吸收线参考表。
颜色 0 0
随机颜色生成器
以 HEX、RGB 或 HSL 批量生成随机颜色 —— 选择数量，一键复制任意值，并即时重新生成以获取设计灵感。
随机 0 0