配色方案
HOT
Color Palette · 设计工具
智能生成和谐统一的配色方案,支持多种配色规则理论,一键导出 CSS 变量代码,大幅提升设计工作效率
配色色彩方案
总访问 0 次总使用 0 次
什么是配色方案
智能生成和谐统一的配色方案,支持多种配色规则理论,一键导出 CSS 变量代码,大幅提升设计工作效率
配色方案 是设计师、前端开发者和创意工作者的配色灵感助手。优秀的配色是设计成功的关键,但手动调配和谐的色彩组合既耗时又需要专业色彩理论知识。本工具基于经典色彩理论,提供随机生成和和谐配色两种模式,支持互补色、类似色、三角色、四角色、分裂互补、单色等 6 种配色规则,帮助您快速找到完美的色彩组合,并一键导出为 CSS 变量代码直接用于项目。
功能特色
6种配色规则理论
互补色:色轮相对位置的颜色,对比强烈;类似色:相邻颜色,和谐统一;三角色:等边三角形位置,平衡活泼;四角色:矩形位置,丰富多变;分裂互补:互补色的两侧,对比柔和;单色:同一色相的不同明度,简约专业。
颜色锁定与智能生成
点击颜色块上的锁定图标可固定该颜色,在生成新配色时保持不变。这样可以基于一个确定的品牌色或主色,自动生成与之搭配的辅助色。支持添加最多 10 个颜色,删除多余颜色(至少保留 2 个),灵活调整配色方案规模。
CSS 变量一键导出
自动生成格式规范的 CSS 变量代码(
--color-1: #6366f1; 等),点击复制即可粘贴到项目的 CSS 或 CSS-in-JS 代码中。支持导出为 :root 选择器下的全局变量,便于在整个项目中统一管理和使用配色方案。如何使用配色方案
1
生成配色方案
点击"生成随机配色"获得完全随机的颜色组合,适合寻找灵感。或使用"和谐配色"功能:选择一个基础颜色(点击色块使用颜色选择器),选择配色规则(互补色/类似色等),点击"生成和谐配色",工具会基于色彩理论自动计算并生成协调的配色方案。
2
调整与锁定颜色
点击调色板中的任意颜色块可直接复制色值。在下方颜色编辑器中,点击色块使用颜色选择器,或在输入框中输入十六进制色值精确调整。对满意的颜色点击锁定图标,该颜色会在后续生成中保持不变,只更新未锁定的颜色。点击"+"添加新颜色,点击"×"删除颜色。
3
导出 CSS 变量
配色方案确定后,在"CSS 变量"区域查看自动生成的代码。格式为
--color-1: #hex; 等。点击复制按钮将代码粘贴到您的 CSS 文件中,通常放在 :root 选择器下作为全局变量使用。这样就可以在整个项目中通过 var(--color-1) 等方式引用这些颜色。色彩理论与配色规则详解
6种经典配色规则解析
互补色(Complementary):色轮上相对(180度)的颜色,如红-绿、蓝-橙。对比最强烈,适合强调和突出重点,但大面积使用可能刺眼。建议一个作主色,一个作强调色。
类似色(Analogous):色轮上相邻(约30度)的颜色,如黄-黄绿-绿。和谐统一,过渡自然,适合营造舒适、宁静的氛围。注意选择足够区分开的颜色以避免单调。
三角色(Triadic):色轮上等边三角形(120度间隔)的三种颜色,如红-黄-蓝。平衡且丰富,适合活泼、创意的设计。通常选择一个主色,另外两个作辅助。
分裂互补(Split-Complementary):一个颜色与其互补色两侧相邻的颜色组合。对比强烈但比互补色更柔和,是安全又富有活力的选择。
四角色(Tetradic/Double Split):色轮上矩形位置的四种颜色,两组互补色。非常丰富多变,适合复杂设计。建议平衡四种颜色的使用比例。
单色(Monochromatic):同一色相的不同明度和饱和度变化。最和谐、最不会出错的选择,适合专业、简约的设计。通过明度差异创造层次。
类似色(Analogous):色轮上相邻(约30度)的颜色,如黄-黄绿-绿。和谐统一,过渡自然,适合营造舒适、宁静的氛围。注意选择足够区分开的颜色以避免单调。
三角色(Triadic):色轮上等边三角形(120度间隔)的三种颜色,如红-黄-蓝。平衡且丰富,适合活泼、创意的设计。通常选择一个主色,另外两个作辅助。
分裂互补(Split-Complementary):一个颜色与其互补色两侧相邻的颜色组合。对比强烈但比互补色更柔和,是安全又富有活力的选择。
四角色(Tetradic/Double Split):色轮上矩形位置的四种颜色,两组互补色。非常丰富多变,适合复杂设计。建议平衡四种颜色的使用比例。
单色(Monochromatic):同一色相的不同明度和饱和度变化。最和谐、最不会出错的选择,适合专业、简约的设计。通过明度差异创造层次。
设计系统中的配色应用
主色(Primary):品牌核心颜色,用于主要按钮、链接、关键元素。通常占界面的 60%。
辅助色(Secondary):与主色协调的颜色,用于次要按钮、标签、分类标识。占 30%。
强调色(Accent):用于特别提醒、成功状态、重要通知。占 10%。
中性色(Neutral):黑、白、灰系列,用于文字、背景、边框。建立界面的层次结构。
语义色(Semantic):成功(绿)、警告(黄)、错误(红)、信息(蓝),用于状态反馈。
使用本工具生成配色后,建议在实际界面中测试可读性(文字与背景对比度),确保符合 WCAG 无障碍标准。
辅助色(Secondary):与主色协调的颜色,用于次要按钮、标签、分类标识。占 30%。
强调色(Accent):用于特别提醒、成功状态、重要通知。占 10%。
中性色(Neutral):黑、白、灰系列,用于文字、背景、边框。建立界面的层次结构。
语义色(Semantic):成功(绿)、警告(黄)、错误(红)、信息(蓝),用于状态反馈。
使用本工具生成配色后,建议在实际界面中测试可读性(文字与背景对比度),确保符合 WCAG 无障碍标准。
核心特性
6种配色规则
基于经典色彩理论
颜色锁定
保留喜欢的颜色
CSS变量导出
一键复制即用
随机+和谐
两种生成模式