和谐色阶曲线
平衡的明度步骤有助于界面保持清晰易读。
全部工具
开发者工具
颜色调色板与 Tailwind 色阶生成器
从图片或主要 HEX 颜色生成 50–950 色阶，并提供 WCAG 对比度和一键 CSS 变量。
默认保护隐私。 处理过程在浏览器中完成。
- 添加输入选择文件、粘贴内容或填写信息。
- 选择设置查看实用的默认设置，并按需调整。
- 保存结果复制或下载完成的结果。
预设：
50
#fcf4f3
深色 AA
100
#f9e6e2
深色 AA
200
#f3c3b9
深色 AA
300
#ee9886
深色 AA
400
#ea684e
深色 AA
500基础
#e84e2f
深色 AA
600
#c23114
白色 AA
700
#9a250e
白色 AA
800
#711b0a
白色 AA
900
#471005
白色 AA
950
#2b0903
白色 AA
快速复制：
HSL: 10°, 80%, 55%·RGB: 232, 78, 47
为设计系统和前端开发者打造
几秒内从图片灵感得到可直接复制的主题令牌。
支持 Tailwind v3 和 v4
将调色板值导出到现代 CSS 和 Tailwind 流程。
调色板生成要点
生成可复用颜色并获得对比度提示。
- 生成 50–950 色阶。
- 从图片提取颜色或选择 HEX 值。
- 导出 CSS、SCSS、JSON 或 Tailwind 代码。
常见问题
可以从图片提取颜色吗？
可以，上传 PNG、JPG 或 WebP 图片即可提取主色。
颜色数据会离开浏览器吗？
不会，颜色计算在本地完成。
需要定制设计系统？
我们构建 UI 组件库和可扩展设计令牌。
开始项目