调色板生成器
即时创建专业配色方案
基于色彩理论原理创建美丽的调色板。生成HEX、RGB、HSL格式的专业配色方案,具备无障碍测试和色盲模拟功能 - 是设计师和开发者的完美工具
调色板生成器使用方法
1
使用颜色选择器选择基础颜色或输入HEX代码
2
选择调色板类型:单色、类似色、互补色、三角配色或四边形配色
3
点击「生成调色板」基于色彩理论原理创建配色方案
4
尝试「随机颜色」发现创意项目的新颜色
5
根据需要在HEX、RGB或HSL显示格式之间切换
6
使用色盲模拟测试无障碍性,确保您的调色板适用于所有人
7
点击任意颜色将其代码复制到剪贴板
8
将调色板导出为CSS变量或JSON格式,用于开发项目
主要功能
五种基于色彩理论的专业调色板类型:单色、类似色、互补色、三角配色和四边形配色
完整的颜色格式支持,包含HEX、RGB和HSL,适用于多样化的工作流程
内置色盲模拟功能,支持无障碍测试
一键复制颜色代码到剪贴板
自动亮度计算,用于符合WCAG标准的对比度分析
CSS变量和JSON格式导出功能
随机颜色生成功能,激发创意灵感
完全响应式设计,针对所有设备进行优化
常见问题 (FAQ)
单色使用一个色相的变化,类似色使用色轮上相邻的颜色,互补色使用相对的颜色,三角配色使用等距离的三种颜色,四边形配色使用在色轮上形成矩形的四种颜色。
该工具模拟三种类型的色觉缺陷:红色盲、绿色盲和蓝色盲。这有助于确保您的调色板对具有色觉差异的用户是可访问的。
亮度测量颜色的感知明度(0-100%)。它对于确定文本背景对比度比率以满足WCAG可访问性标准等要求至关重要。
将导出的CSS变量复制到样式表的:root选择器中。然后您可以在整个CSS中使用它们,如'color: var(--color-1)'以实现一致的主题。
目前,您只能输入HEX格式(#RRGGBB)的颜色,但工具会以HEX、RGB和HSL格式显示颜色。您可以复制任何这些格式的颜色。
HEX使用十六进制表示法(#FF0000),RGB使用红绿蓝值(0-255),HSL使用色相(0-360°)、饱和度(0-100%)和亮度(0-100%)。每种格式适用于不同的设计和开发目的。