调色板生成器
根据基础颜色生成配色方案，锁定喜欢的颜色，检查 WCAG 对比度，并导出为 CSS、Tailwind、JSON 或 PNG。
在浏览器中本地处理，你的文本不会被上传。
这个工具能做什么
选择一个基础颜色，立即得到按色彩理论规则生成的调色板：互补色、类似色、三角色、四角色、分裂互补色、单色，或一组明暗色阶。色相计算在 HSL 中完成，每个色块都会以 HEX、RGB、HSL 和 OKLCH 显示颜色值，方便你复制技术栈所需的格式。
每个色块还会给出它与白色文字、黑色文字的对比度，以及是否达到 WCAG AA（4.5:1）、AAA（7:1），或仅达到大号文字的门槛（3:1），这在挑选按钮和背景颜色时很有帮助。点击“随机”来探索：锁定你喜欢的颜色，其余颜色会围绕它们变化。
满意之后，可以把调色板导出为 CSS 自定义属性、Tailwind v4 的 @theme 块、Tailwind v3 的配置扩展、JSON，或 PNG 色板图。一切都在本地运行，不会发送到任何地方。
使用方法
- 1用取色器选择一个基础颜色，或输入十六进制值，例如 #2f5bea。
- 2选择一种配色方案。单色、明暗色阶可以用数量滑块调整。
- 3点击“随机”来探索，并锁定你想保留的颜色。
- 4在将色块用于文字或按钮之前，先查看每个色块上的对比度标签。
- 5按色块复制颜色值，或按你需要的格式导出整个调色板。
支持的格式
输入：HEX 颜色（#rgb 或 #rrggbb）。输出：CSS 变量、Tailwind v3/v4 代码片段、JSON 和 PNG。
隐私
此工具在你的浏览器中运行。你提供的数据在你的设备上处理，不会发送到我们的服务器。
限制
- 配色方案只是基于数学的建议，并非成品设计；请凭肉眼调整，并在实际场景中测试。
- 对比度只针对色块颜色与纯白、纯黑进行测量。你真实使用的文字与背景组合需要另行检查。
- 不同屏幕和色彩配置文件下，颜色的显示效果会有差异；颜色值为 sRGB。
- 调色板不包含 alpha/不透明度数值。
常见问题
类似色和三角色有什么区别？
类似色在色环上彼此相邻（相隔 30 度），给人平静、统一的感觉。三角色相隔 120 度，变化更丰富，对比也更强。
AA 和 AAA 是什么意思？
它们是 WCAG 2 中针对文字的对比度等级。AA 要求普通文字达到 4.5:1（大号文字 3:1）；AAA 要求普通文字达到 7:1。本工具会显示每个色块相对于白色和黑色所能达到的最高等级。
锁定是如何工作的？
被锁定的色块在你点击“随机”或更改基础颜色、配色方案时会保持不变，因此你可以围绕已有的喜欢的颜色来构建调色板。
Tailwind 应该用哪种导出格式？
Tailwind 4（以 CSS 为先的配置方式）请使用 v4 的 @theme 输出；仍在使用 tailwind.config.js 的项目请使用 v3 配置输出。