配色方案怎么生成：取色、色阶衍生与互补色的实操

「这个页面该配什么颜色」不该靠灵感抽奖——专业做法是从一个主色出发，系统性地衍生出一整套方案。在线配色器把这些操作可视化，四步就能得到一个像样的配色。

一、四步流程：从主色到完整方案

1. 定主色：来自品牌色、Logo、或一张参考图（用取色器吸出主色调）。主色只应有一个，整个方案围绕它展开；
2. 衍生色阶：把主色按明度生成浅色阶和深色阶——按钮悬停态、背景、分隔线全从色阶里取，这是「看起来协调」的关键（同色相天生和谐）；
3. 补一个强调色：用主色的互补色或邻近色，只用在最重要的行动点（按钮、链接）上；
4. 加渐变：从主色色阶里选两个相邻明度做渐变起点终点，色相一致渐变才不脏。

二、三个最常见的配色雷区

• 颜色太多：页面颜色超过「1 主色 + 1 强调色 + 色阶灰阶」就会花——99% 的「不好看」来自颜色太多而不是颜色不对；
• 饱和度失控：多个高饱和色并存互相打架。主色可以饱和，大面积背景用低饱和色压场；
• 对比度不足：浅色底配浅色字看似「高级」，实则可读性灾难。文字与背景的对比度有可量化标准（正文至少 4.5:1），拿不准就加深文字颜色。

三、格式知识：HEX、RGB、HSL 各用在哪

取色器给的颜色通常有三种写法：#0A7DFF（HEX，网页最常用）、rgb(10,125,255)（编程场景）、HSL（色相/饱和/明度，调色最直观）。想「把某个颜色调深一点」，用 HSL 调明度比在 RGB 里瞎试靠谱得多——这就是为什么专业配色器都提供 HSL 面板。

常见问题

问：没有品牌色，主色从哪选？
从行业联想出发：科技蓝、环保绿、餐饮橙红。先选一个接近的，用色阶衍生整套，比空想配色可靠。

问：为什么我配的渐变总是「脏脏的」？
渐变两端色相不一致（红渐到蓝），中间经过灰紫色的浑浊区。同色相不同明度之间的渐变永远干净。

问：深色模式要单独配色吗？
是。直接反转黑白会把饱和色变成刺眼色。深色模式的背景用低饱和深灰，文字和色阶整体降亮度。