色环关系更直观
围绕主色快速生成邻近色、互补色、三分色等关系，方便看整体风格。
支持 CSS 变量
生成结果可以直接复制成 CSS 变量，适合主题色和组件状态色整理。
完全本地运行
颜色计算和预览都在浏览器本地完成，不会把色值上传到服务器。
色环配色 · 浏览器本地生成
按色环关系生成配色方案
输入主色或拖动色相，按邻近色、互补色、三分色等关系生成 HEX、HSL 和 CSS 变量。所有计算都在浏览器本地完成。
主色
#3C83F6
方案
邻近色
颜色数
5
外圈是完整色相环，内圈是当前方案生成的配色环。
Color 1
#0AD3D6
hsl(181, 91%, 44%)
Color 2
#12A8ED
hsl(199, 86%, 50%)
Color 3
#2977F5
hsl(217, 91%, 56%)
Color 4
#4B59F1
hsl(235, 86%, 62%)
Color 5
#8363F8
hsl(253, 91%, 68%)
色环配色只在浏览器本地生成，不会上传服务器。
工具使用说明
怎么用 色环配色器
输入主色或拖动色相
先用 HEX 或色相滑块确定主色基准。
选择配色关系
再切换邻近色、互补色、三分色等关系。
复制结果继续使用
把 HEX、HSL 或 CSS 变量复制到设计稿或前端主题里。
功能说明
这个工具解决什么问题
色环配色器 为什么适合做成本地工具
在浏览器本地按色环和配色关系生成配色方案，适合快速挑选主色、邻近色和互补色。
先把高频模板和常见组合沉淀成浏览器本地工具，能显著减少重复起草时间。
色环配色适合哪些场景
适合做主题色延展、按钮状态色、海报草稿和 UI 视觉方向初筛。
先把主色和配色关系看清，再去做更细的视觉收口会更快。
常见问题
关于 色环配色器，用户常问这些
色环配色器 会上传色值吗？
不会，所有颜色计算都在浏览器本地完成。
可以复制 CSS 变量吗？
可以，页面会直接输出可复制的变量文本。
适合做正式主题吗？
适合做第一轮配色草案，正式主题仍建议再根据品牌规范微调。
支持多少组颜色？
支持 3 到 8 组常用配色，便于快速对比。