配色方案生成器
5 种配色基于任意基色生成和谐配色,支持单色、近似色与互补色等方案。
5 种方案 · 即时 HEX
5
色板
暂无配色
选择基色与配色方案开始生成
关于
关于配色方案生成器
选择基色(取色器或十六进制输入)并选择方案:单色(同一色相的明度变化)、近似色(色轮相邻色)、互补色(色轮对侧)、三角色或四角色(色轮均匀分布)。可调整颜色数量 2-8 个。
色板以色块即时渲染。点击任意色块复制其 HEX 值,或一键复制整组颜色(逗号分隔),方便写入 CSS 变量、设计工具或品牌规范。
颜色通过本地 HSL 数学计算生成,不上传、不存储、不发送到服务器。
功能亮点
- 五种配色方案:单色、近似、互补、三角、四角
- 取色器或 HEX 输入任意基色
- 每板 2-8 色,均匀分布
- 色块即时渲染
- 单击复制单色或整板 HEX
- 100% 本地 HSL 计算
常见问题
配色方案生成器 FAQ
关于颜色方案与生成色板用法的常见问题解答。
什么是颜色方案?
方案是色轮上相对位置固定、视觉上协调的一组颜色。常见有单色(同一色相、不同明度)、近似色(相邻色相)、互补色(对侧色相)、三角色(三个均布色相)与四角色(四个)。
品牌设计该用哪种方案?
单色干净简约,近似色平静柔和,互补色对比强烈适合强调与 CTA,三角/四角色活泼鲜明。建议以一个主色搭配一个互补强调色起步。
可以把配色复制进 CSS 吗?
可以。「全部复制」会生成逗号分隔的 HEX 列表(如 #3498db, #e74c3c, ...),可直接粘贴到 CSS 自定义属性或设计工具。
为什么屏幕与印刷颜色不一样?
HEX 描述的是屏幕使用的 sRGB 色彩空间。印刷使用 CMYK,色域更窄,颜色可能略有差异。需要精确印刷请在设计中转成 CMYK。
生成的颜色放在一起无障碍吗?
方案追求的是美观而非对比度。文字置于彩色背景上时,请另行核验 WCAG 对比度;本工具已将明度控制在多数情况可读的范围内。
我的基色会被上传吗?
不会。所有颜色计算都在浏览器本地完成,不上传、不存储。