配色方案生成器
从基础色生成单色、邻近色、互补色等配色，并复制颜色值。
切换语言会开始新的会话。请先保存结果。
正在加载工具…
如何使用
选择配色关系，再输入 HEX 代码或使用颜色选择器。查看生成的颜色与对比度，点击复制单个颜色或全部颜色。
限制与检查
配色关系提供设计参考，不保证视觉效果或整页无障碍符合性。请结合实际文字、背景和使用情境检查对比度。
1
选择配色关系 2
选择颜色 3
获取配色 第 1 步：选择配色关系
第 2 步：选择基础颜色
选择基础色以生成配色方案
输入 HEX 颜色代码（例如 #3B82F6），或使用颜色选择器
第 3 步：生成的配色方案
#042761
rgb(4, 39, 97)
hsl(217, 92%, 20%)
对比度： 14.3:1AA ✓
#094fc2
rgb(9, 79, 194)
hsl(217, 91%, 40%)
对比度： 7.2:1AA ✓
#3b82f6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
对比度： 3.7:1AA ✗
#9dc0fa
rgb(157, 192, 250)
hsl(217, 90%, 80%)
对比度： 11.4:1AA ✓
#fefeff
rgb(254, 254, 255)
hsl(240, 100%, 100%)
对比度： 20.8:1AA ✓