UI 颜色：在真实界面中测试 Tailwind 调色板
选择一个 Tailwind 色系，查看它在按钮、图表、表单、卡片和徽章上的效果。调整主要色阶，生成随机调色板并导出结果。
如何使用颜色预览
- 1
选择色系
在顶部栏中选择任意色系。页面地址会保存所选色系，方便你分享链接。
- 2
调整色阶
用选择器修改 600（主色）、500（次色）或 200（柔和色），或生成随机调色板。整个界面会立即更新。
- 3
导出调色板
满意后，将 50 到 950 的完整色阶导出为 Tailwind v4、Tailwind v3、Figma 或 CSS 格式。点击色阶中的任意色调即可复制。
常见问题
在把调色板用到项目之前先看看实际效果：浅色和深色色阶是否搭配、按钮是否足够突出、图表和表单是否清晰易读。
600 用于操作和突出元素，500 用于次要元素和图表，100–200 用于背景和柔和状态，700–800 用于浅色背景上的文字。
可以。页面地址包含所选色系，例如 ?family=yellow，打开链接即可直接载入。
可以将完整色阶导出为 Tailwind v4 变量、Tailwind v3 配置、Figma 样式、CSS 变量，或仅导出 HEX、RGB、HSL 和 OKLCH 代码。