UI 与产品设计
在各界面构建一致的主色、辅色与表面色。
免费 · 无需注册色彩理论和谐CSS · Tailwind · JSON在浏览器中运行
为何在这里生成调色板
六种和谐引擎
互补、类似、三角、四角、单色与分裂互补 — 基于经典色彩理论。
锁定并精炼
锁定喜欢的颜色，重新生成其余颜色，直到方案契合为止。
面向开发的导出
复制 CSS 变量、Tailwind 令牌、SCSS 映射或 JSON — 直接粘贴到设计系统。
WCAG 对比度检查
检测调色板中的文字-背景对，保证界面可读且可访问。
即时反馈
色块、UI 示意与代码实时更新。无上传、无等待、无账号。
免费且不限量
个人与商业项目均可无限生成调色板。无水印。
如何创建调色板
- 1
选择基础色
使用取色器或输入 HEX。它是所有和谐计算的锚点。
- 2
选择和谐规则
在互补、类似、三角等之间切换，探索不同氛围。
- 3
锁定、随机、精炼
锁定保留色，重新生成或按空格换基础色，直到贴合品牌。
- 4
导出到你的技术栈
复制 HEX/RGB/HSL，或导出 CSS、Tailwind、SCSS、JSON 供设计与开发使用。
从一个 HEX 到设计系统种子
设计师与开发者真正会上线的和谐规则、对比度检查与导出格式。
01
为何和谐胜过随机色块
随机色很少有关系。和谐规则有意地在色轮上排布色相 — 对立求活力、相邻求平静、等分求生动 — 让界面显得有意为之。
02
产品 UI 中的互补与类似
互补让 CTA 在背景上更醒目。类似适合仪表盘与长文。同一基础色切换规则，即时比较氛围。
03
面向现代技术栈的导出路径
CSS 变量适配任意框架。Tailwind 映射写入配置。SCSS 映射服务 Sass 设计系统。JSON 用于工具与文档。
04
把无障碍当作一等功能
若正文未过 AA，好看也不够。取色器打开时就检查对比度，可避免无障碍评审后的昂贵返工。
谁在用调色板生成器
从品牌套件到产品 UI — 平衡的配色始于扎实的色彩理论。
品牌识别
在确定品牌指南前探索互补或单色体系。
前端开发
导出 CSS 变量或 Tailwind 令牌，让代码与设计一致。
营销与社媒
为广告、演示与落地页生成品牌一致的活动配色。
数据可视化
选择顺序单色或类别三角色组，让图表更清晰。
学习色彩理论
观察和谐规则如何把单一基础色变成专业多色方案。
真正有用的调色板技巧
把「好看色块」与可用设计系统区分开的小习惯。
- 1
从品牌或产品约束开始
若已有主色 HEX，先锁定再围绕生成 — 不要再随机发明第五个强调色。
- 2
尽早检查对比度
未通过 AA 的漂亮组合会毁掉按钮与正文。上线前在表面上测试文字。
- 3
角色更少、更清晰
按角色命名（primary、accent、muted、danger），而不只按色相。
- 4
导出一次，处处复用
将 CSS 变量或 Tailwind 令牌放在单一事实来源，避免营销与产品漂移。
FAQ
常见问题
什么是调色板生成器？
从起始色或规则构建一组协调颜色的工具。本生成器应用色彩理论和谐，服务于 UI、品牌与设计系统。
支持哪些和谐规则？
互补、类似、三角、四角（矩形）、单色与分裂互补 — 设计师最常用的六种。
可以锁定喜欢的颜色吗？
可以。锁定任意色块，再重新生成未锁定色或随机基础色。锁定色保持不变。
如何导出供代码使用？
用导出复制 CSS 自定义属性、Tailwind 映射、SCSS 映射或 JSON。也可按色块复制 HEX、RGB 或 HSL。
什么是 WCAG 对比度？为何检查？
WCAG 规定文字与背景的最低对比度以保证可访问性。检查器测量你的调色板配对，使界面文字可读。
商业项目也免费吗？
是。无限调色板、无需账号、无水印。生成颜色与导出代码可用于商业。
数据会离开浏览器吗？
不会。颜色计算、对比度与剪贴板导出均在客户端。不会上传到服务器。
每个调色板有多少色？
每种和谐返回五个协调色块 — 足够主色、强调色与表面，又不会撑爆系统。
基于色彩理论的专业调色板
BosConvertPro 调色板生成器用成熟的和谐规则，将一个基础色变成平衡的多色块方案。设计师与开发者可锁定收藏色、验证对比度、预览 UI，并导出可上线令牌 — 全程浏览器内、免费、无需注册。
- 六种色彩和谐模式
- 重新生成时锁定颜色
- WCAG 对比度检查器
- CSS、Tailwind、SCSS 与 JSON 导出
- HEX、RGB、HSL 复制格式
- 浏览器内免费无限使用