调色板生成器
在 HSL 色环上旋转色相，生成画家和 UI 设计师常用的七种调色板。投入一个 hex，得到匹配色调 —— 当你有品牌色需要图表调色板、CTA 强调色或背景平静类似色条时很有用。数学保持在 HSL 中，所以每种和谐都保留与基色相同的饱和度和明度，单色除外，它有意上下偏移明度。
—
色相: 217°饱和: 91%明度: 60%
色卡
#3B82F6
#F6AF3B
色相旋转在 HSL 中完成，快但感知不均匀。感知调色板请试 OKLCH 拾色器。
使用方法
- 把你的品牌或锚定 hex 粘贴到基色字段（或使用拾色器）。
- 选择适合用例的和谐 —— 平静背景选类似，鲜明对比选三色。
- 复制单个 hex 代码或整个逗号分隔列表。
常见问题
- 图表调色板哪种和谐最安全？
- 三色或分裂互补 —— 三个左右间距良好的色相，对大多数观看者保持可区分。除强调色对外避免纯互补（仅两色）。
- 为什么单色给五种颜色？
- 单色是明度刻度，不是色相旋转。五步（−30%、−15%、基色、+15%、+30%）是常见折衷 —— 足够变化又不丢失基色。
- 色相是对的，但几种颜色放在一起很平淡，怎么办?
- 配色方案只旋转色相，保持饱和度和明度不变，所以每个色块分量相同，没有哪一处能抓住视线。一套调色板通常既需要色相差异，也需要明度对比：把一个调暗、一个调亮，把基准色留作强调色。这样做之后，原本只适合图形的配色，才变得能用在文字和背景上。
- 这些颜色能通过无障碍对比度检查吗?
- 从原理上并不保证。色相之间的关系完全不涉及对比度，而对比度比较的是相对亮度。因此两种彼此和谐的颜色，明暗可能几乎相同，作为文字与背景叠在一起时并不达标。请把配色方案当作起点，凡是打算叠放使用的组合，都用对比度工具检查一遍。
相关主题指南
相关工具
颜色明暗变体生成器
从基础色生成 tint（更亮）、shade（更暗）、tone（与灰混合）——2 到 20 档，HEX、RGB、HSL 输出。
颜色 0 0
从图片提取调色板
拖入图片，工具通过 Canvas 分析主色并提取调色板——复制 HEX 或一键复制全部。
颜色 0 0
Tailwind 调色板
完整 Tailwind CSS 默认调色板 — 22 色相 × 11 色阶（50 至 950）— 点击复制为 Tailwind 类、HEX 或 rgb()。
颜色 0 0
颜色排序
粘贴 hex 颜色列表，按色相、饱和度、明度或感知亮度排序 — 适用于整理设计令牌调色板。
颜色 0 0
Conic Gradient 生成器
CSS `conic-gradient()` 的可视化构建器 — 旋转角度、中心位置、颜色停止、形状预览。适用于饼图、环形图、棋盘格图案、色轮。
颜色 0 0
色盲模拟器
查看你的图片对 8 种色觉异常（CVD）人群分别如何呈现。
颜色 0 0