摘要：免费的颜色调色板生成器，支持互补色、类似色、三元色等配色方案，基于 HSL 科学生成，本地运行。
本地工具可在 DevTools → Network 搜索输入内容，通常不会出现在请求中。
使用指南
从基色扩展出一套可用的配色，便于 UI 草稿与文档示意。本工具在本地根据选项生成色板并复制色值——快速探索，不是完整品牌设计系统交付。
1. 生成色板
选定基色与生成策略（邻近/互补等，以界面为准），复制 HEX 或其它格式到设计稿。
- 选基色。
- 调生成选项。
- 复制色值。
2. 对比度
色板好看不等于文字可读。正文色对背景务必过 color-contrast-checker。
3. 暗色模式
同一套亮色板不能直接反相当暗色。两套主题分别生成并实测。本页能力以当前界面与本地实现为准：文档若与选项不一致，以屏幕上可见控件为准。
- 查对比度。
- 分主题验证。
- 写入 token 名。
4. 从图片取色
已有海报可先 image-color-extractor 取主色，再回本工具扩展。处理含个人信息或密钥的内容时，即使计算在本地完成，也要留意屏幕分享与下载文件的二次传播。
5. 色盲
信息编码不要只靠色相。可用色盲模拟工具做补充检查。遇到异常输出时，先用最小可复现样例确认是输入问题还是选项组合问题，再衔接下一步工具。
6. 落地
把色板写成 CSS 变量或设计 token，并注明用途（背景/正文/强调），避免「第 3 个色」口头指代。
常见问题
不用。打开页面即可在本地生成色板并复制色值，没有账户也没有付费墙。它的定位是快速探索配色，而不是完整的品牌设计系统交付。
支持互补色、类似色、三元色、四元色、单色等基于 HSL 色彩空间的常见方案（以页面实际提供的选项为准），选定基色后即可扩展出一套色板。
每种颜色都可复制 HEX、RGB、HSL 值，直接用于 CSS 或设计软件。更好的落地方式是把色板写成 CSS 变量或设计 token，并注明用途（背景/正文/强调），避免团队里口头指代「第 3 个色」。
不等于。正文色与背景的对比度需要单独验证——把常用组合过一遍 color-contrast-checker，不达标的组合宁可换色，不要硬套进界面。
不能简单反相——对比关系会随之变形，两套主题应分别生成并各自实测。另外不要只靠色相编码信息，可用色盲模拟工具做补充检查。
先用 image-color-extractor 从海报提取主色，再把得到的基色放回本工具扩展成完整色板；扩展结果同样要回到前面两条，验证对比度与暗色模式。