01
确定起点，而不是猜格式
可输入三位或六位 HEX，也可使用系统取色器。默认基色是 #3B82F6；输入停顿后自动更新。若想一次调完几个选项，可关掉自动生成，再按 Ctrl 或 Cmd 加 Enter 运行。
颜色与可访问性
配色生成器— 从基色到可用的 CSS 变量
输入一个 HEX 基色，比较配色规则、九级色阶和白字可读性。
配色生成器
所有计算都在当前浏览器标签页进行，不上传颜色。
生成结果
配色方案
显示 5 / 5 个色块
九级明暗色阶
双颜色混合
基色 HEX
双颜色混合
第二种颜色 HEX
配色已生成，可见 5 色
CSS 变量
品牌主色已经定好，按钮、背景和强调色却还在靠感觉挑。配色生成器先固定主色，再按色相环关系给出候选，方便看清类似色、互补色和三角配色到底差在哪里。它给的是可重复计算的起点，不会替你判断品牌气质。
需要把色板交给前端时，这个配色方案生成器还能把基色展开为九级明暗色阶，并用第二种颜色做指定比例的颜色混合。配色生成器会列出白色文字与每个色块的对比度；开启筛选后，导出的 CSS 变量只包含当前可见的配色候选，色阶和混色仍完整保留。
为什么用配色生成器
色相关系解决“选哪些色”，对比度解决“白字能否看清”。
同一个基色，试六种色相关系
输入固定的蓝色后，可在相邻的类似色、正对面的互补色和间隔均匀的三角配色之间切换。这个调色板生成器不会随机改掉基色；九级色阶也始终围绕原来的颜色，便于比较规则本身的影响。
把白字可读性变成可核对的数字
每个候选色块旁都显示白色文字的实际对比度。开启 4.5:1 筛选后，不达普通文字 AA 门槛的颜色从当前配色及 CSS 导出中消失；这只是单一文字颜色的检查，并不宣称整套界面无障碍。
从基色走到经过检查的色值
02
区分配色规则与颜色混合
默认的类似色适合先看相邻色；切换互补色、三角配色等规则，色块数量由该规则决定。双颜色混合另用第二个 HEX 和默认 50% 比例，不等于把两种颜料调在一起。
03
读数字，再导出
筛选前先看白字对比度和可见色块数量。打开 AA 筛选可能得到零个候选，但不会暗中改色。单个 HEX 可直接复制；整份 CSS 则带当前可见配色、九级色阶和混色。
把配色候选落实到可用色值
六种配色关系
类似、互补、三角、分裂互补、四角和单色规则都从同一个 HEX 基色推导。切换规则只改变色相关系，不覆盖你的品牌主色。
九级浅深色阶
四个提亮值、原始基色和四个压暗值，可分别用于浅背景、边框、悬停状态和文字。色阶生成器在这里使用数字 RGB 与白色或黑色混合。
比例明确的颜色混合
拖动 0–100% 比例即可在两种颜色之间取值。RGB 按通道插值，HSL 沿最短色相弧插值；两种模型都给出屏幕用 HEX，不模拟油墨或颜料。
按白字对比度筛选
每个候选显示基于最终 sRGB 色值计算的比值。筛选只保留达到普通文字 4.5:1 的候选，关闭后仍能查看所有原色块。
直接使用的 CSS 变量
复制或下载 :root 代码，包含当前可见配色、全部色阶与混色值。筛掉的候选不会悄悄混进导出结果。
色值计算与可读性的边界
- 只接收不透明的 HEX
- 基色和第二种颜色支持 #RGB 或 #RRGGBB，并统一显示为六位。透明度、图片提色和广色域输入不参与计算；透明颜色需要先确定底色才能计算实际对比。
- 和谐规则不是审美评分
- 色相环角度只能给出配色候选，不能判断品牌语义、色块面积或实际界面效果。互补色也可能太抢眼，需要在真实页面中核对。
- 白字检查只覆盖一种场景
- 工具按 WCAG 相对亮度公式计算纯色色块上的白色普通文字，AA 门槛是 4.5:1。黑字、大字号例外、图片背景、半透明叠层和非文字控件未在此检查。
- 筛选不自动修色
- 打开可读性筛选只隐藏不达标的配色候选及对应 CSS 变量，不会改基色、九级色阶或混色；若显示 0 项，可换规则或基色。
- 数字混色不等于调颜料
- RGB 与 HSL 两种模式返回显示器上的 HEX 值。实体油墨和颜料受材料与印刷条件影响，无法从这条数字插值直接预测。
配色生成器常见问题
互补色、类似色、三角配色有什么区别？
互补色在色相环两端，类似色围绕基色左右分布，三角配色按约 120 度间隔取色。本页按所选规则输出固定数量的色块，色相差异大并不代表文字一定清晰。
可以改变生成的颜色数量吗？
本页色块数由六种配色规则决定，没有单独的数量滑块；另有固定九级色阶。需要更多层级时可使用色阶，不能把两色互补规则硬扩成任意数量。
能看到每种颜色的对比度（文字可读性）吗？
可以。每个配色色块都显示白字与该底色的对比度及 AA 结果。数值由 WCAG 相对亮度公式计算，不是仅凭颜色深浅猜测。
如何保证配色的可读性与对比度？
先把文字色定为本页检查的白色，再看每个候选是否达到普通文字 4.5:1。只有这组纯色前景与背景通过了计算；真正上线仍需检查字号、覆盖层和非文字元素。
如何把配色用于 CSS 或设计工具？
下载或复制 :root 块即可把 `--color-1` 等变量放进样式表，九级色阶和混色也有独立变量。若开启筛选，导出只包含通过筛选的配色候选。
还有没解决的配色问题？