任务路径 / 从输入到结果
如何构建五色和谐配色
- 01
设置种子色
在“种子色 HEX”中输入六位十六进制值——# 前缀可选——或用“种子色选择器”直观地取色。两个控件会保持同步，工作区以种子色 #5D4DF1 打开。
- 02
选择和谐规则
选择“类似色”“互补色”“分裂互补色”“三色”“四色”或“单色”。引擎先应用固定色相偏移，再把中间色块固定为种子色原值；其余色块不一定落在教科书式的精确角度。“单色”保留种子色的色相，同时改变饱和度和明度。
- 03
设置对比度目标
选择“文本对比度目标”：3:1 大号文本、4.5:1 AA 正文，或 7:1 AAA 正文——默认是 4.5:1。每个色块都会与黑色或白色中表现更好的一方做对比测量。
- 04
生成配色
点击“生成配色”。五个色块随即出现，居中的一块永远是你的种子色原值——其余四块在受控范围内围绕它偏移色相、饱和度和明度，因此整条色带保持可用，而不会滑向荧光色或浑浊色。
- 05
读懂对比度标记
每个色块显示十六进制值、对比度比率，以及“通过”或“低于目标”标记；色块上的文字以对比中胜出的颜色（黑或白）渲染。“低于目标”只是提示文字应选用更深或更浅的相邻色，并不代表这个颜色有问题。
- 06
复制 CSS 或下载 JSON
“复制 CSS”复制一个带注释的 :root 代码块，内含自定义属性 --palette-1 到 --palette-5。“下载 JSON”保存 toolars-palette.json，其中记录种子色、和谐规则、对比度目标和每个颜色的对比度数据，并带有明确置为 null 的 aiModel 与 api 字段。