色彩是UI设计最强大也最易误用的工具——很多设计师配色全凭感觉，要么保守只用灰蓝，要么杂乱堆砌颜色，最终踩坑不断。
不用死记复杂理论，一篇讲透色彩核心知识、配色方法和避坑要点，新手也能快速搭建合规又好看的色彩系统👇
一、色彩感知3大核心维度（必懂）
❶ 色相：颜色名称（红、橙、黄、绿、蓝、紫），是色彩最直观的特征；
❷ 饱和度：色彩鲜艳程度，越高越鲜艳，越低越接近灰色；
❸ 明度：色彩亮暗程度，越高越浅，越低越暗。
核心：同一色相调整明度/饱和度，可生成适配不同场景的色阶变体。
✅ 色轮核心配色方案（直接套用）
1. 互补色：色轮直径两端（红-绿、蓝-橙），对比强，适合CTA按钮（主色大面积，辅助色小面积点缀）；
2. 类似色：色轮相邻2-3种（蓝-蓝绿-绿），和谐统一，适合专业类界面；
3. 三角色：色轮等距三种（红-黄-蓝），丰富平衡，选一种做主色即可；
4. 冷暖分区：暖色（红橙黄）显活力，冷色（蓝绿紫）显专业，冷色适合大面积背景。
✅ 数字色彩模型（实操必备）
❶ RGB/HEX：屏幕显示专用，HEX色码（如FF6600）是设计师常用格式；
❷ HSL：最友好，直接调整色相、饱和度、明度，轻松生成色阶；
❸ 注意：纯数字设计用sRGB色域，避免颜色在不同设备上偏差。
💡 界面配色系统构建（核心实操）
1. 品牌色：围绕品牌色生成9-10个色阶，浅阶做背景，中阶做主要元素，深阶做文字/悬停；
2. 功能色：固定惯例（绿=成功、红=错误、黄=警告、蓝=信息），各生成对应色阶；
3. 中性色：一套完整灰度（9-12个色阶），可加轻微色相倾向提升质感；
4. 比例法则：60%主色（背景）、30%辅助色（容器）、10%强调色（按钮）。
❌ 新手3大配色误区（必避）
1. 颜色过多：4-5种基础色相足够，多靠色阶变体丰富层次；
2. 盲目追流行：优先适配品牌和可用性，再考虑趋势；
3. 只看好看：可读性、对比度优先，需符合WCAG标准（正文对比≥4.5:1）。
总结：配色不是凭感觉，而是有系统方法的技术活。掌握基础维度、配色方案和实操步骤，就能避开大部分坑，做出既好看又实用的UI色彩。
评论区留你的品牌色，帮你搭配适配的配色系统～
