色相环与HSL: 调色板的生成原理
本工具先把颜色转换成HSL,即用色相(Hue)、饱和度(Saturation)、明度(Lightness)来描述颜色,然后只按规则旋转色相角度来得到新颜色。 色相环是0~360度的圆,0°附近是红色,约60°是黄色,约120°是绿色,约180°是青色,约240°是蓝色,约300°是品红。 由于饱和度和明度保持不变,生成的颜色看起来像是明暗与鲜艳程度相近的“一家人”。内部流程是:HEX转RGB再转HSL,旋转角度,再由HSL转RGB和HEX。 每一步的四舍五入可能让数值相差1左右,因此基准色一栏始终显示你输入的原值。
需要注意,HSL里的“明度”并不等于人眼感受到的亮度。同样是50%明度,黄色看起来很亮,蓝色则显得很暗。 所以把配色用作文字色或背景色时,不要凭肉眼判断,而要用下文的对比度来核实。
各种配色的角度规则与用途
- 互补色(+180°): 色相环上正对面的颜色,对比最强,适合按钮、重点文字等需要把视线集中到一处的场合。大面积等比例使用两种颜色会让眼睛疲劳,建议一种占七成以上,另一种只作点缀。
- 邻近色(±30°): 相邻的颜色,稳定统一,但区分度弱,强调的元素容易被淹没。适合背景、插画和渐变。
- 三角配色(+120°、+240°): 把色相环三等分,活泼且平衡,适合信息图等。三种颜色同等比例使用会显得杂乱,最好分成主色、辅色和强调色。
- 分裂互补色(+150°、+210°): 不用正对面的那一种,而是用它两侧的两种颜色。既保留互补的对比,又不那么刺眼,对新手比较友好。
- 四角配色(每隔90°共4色): 颜色多,调节难度大。通常让一种颜色为主,其余只小面积使用,也可作为图表的分类色。
- 同色系: 同一色相下明度取20、35、50、65、80%的5种颜色。最不容易出错,适合界面中背景、卡片、边框、文字的层级划分。
示例1: 以金色#c9a961为基准的调色板
基准色#c9a961在HSL中约为色相41.5°、饱和度49%、明度58.4%。只改变色相角度,就得到下表中的颜色(表格在页面生成时用同样的公式计算)。
| 配色方式 | 角度规则 | 结果颜色(HEX) |
|---|---|---|
| 互补色 | 基准色相 +180° | #c9a961#6181c9 |
| 邻近色 | -30°、0°、+30° | #c97561#c9a961#b5c961 |
| 三角配色 | 0°、+120°、+240° | #c9a961#61c9a9#a961c9 |
| 分裂互补色 | 0°、+150°、+210° | #c9a961#61b5c9#7561c9 |
| 四角配色 | 0°、+90°、+180°、+270° | #c9a961#61c975#6181c9#c961b5 |
这种金色的互补色是色相约221.5°的蓝色#6181c9。在以金色为主的品牌里,把这个蓝色用作链接或次要按钮的颜色,可以形成暖色与冷色的平衡。
用WCAG对比度判断文字是否易读
网页无障碍指南WCAG为每种颜色计算相对亮度L,并把对比度定义为 (较亮颜色的L + 0.05) ÷ (较暗颜色的L + 0.05)。数值范围从1:1(没有差别)到21:1(黑底白字)。 普通大小的正文,AA级要求至少4.5:1;大号文字(大约24px以上,或加粗的18.66px以上)至少3:1;更严格的AAA级要求普通文字7:1,大号文字4.5:1。 本工具会在每个色块上自动选择白色或黑色中对比度更高的文字色,并显示该数值。
示例2: #c9a961上的白字与黑字
白色文字放在#c9a961上的对比度为2.25:1,达不到AA标准的4.5:1;黑色文字为9.33:1,连AAA的7:1也能满足。 也就是说,金色按钮上用深色文字比白字更易读。同一色相的明度梯度如下:
| 明度 | HEX | 白字对比度 | 黑字对比度 | 建议文字色 |
|---|---|---|---|---|
| 20% | #4c3d1a | 10.55:1 | 1.99:1 | 白色(通过AA) |
| 35% | #856a2d | 5.13:1 | 4.10:1 | 白色(通过AA) |
| 50% | #be9841 | 2.71:1 | 7.76:1 | 黑色(通过AA) |
| 65% | #d2b77a | 1.95:1 | 10.79:1 | 黑色(通过AA) |
| 80% | #e5d6b3 | 1.44:1 | 14.60:1 | 黑色(通过AA) |
从表中可见,明度35%的深金色(#856a2d)配白字为5.13:1,通过AA;而明度50%左右(#be9841)白字2.71、黑字7.76,实际上只适合配黑字。 中等明度是最难作为文字背景的区间。想精确检查任意两种颜色,可以使用颜色对比度检测器。
实用比例: 60-30-10 法则
生成调色板后如果不知从何下手,先确定面积比例。常用的经验法则是主色(背景和大面积)占60%,辅色占30%,强调色占10%。 如果用的是同色系5色,可以把最亮的一档作背景,稍深一档作卡片和分隔线,最深的一档作文字,基准色作强调,通常不会显得别扭。 “复制为CSS变量”按钮会以--color-1: #...;的格式复制,可直接粘贴到:root中使用。
常见错误与局限
- 把生成的颜色全部用上: 调色板只是候选。实际设计中通常选2~3种颜色,再搭配白、灰、黑等中性色会更稳妥。
- 忽视明度: 工具会保持基准色的饱和度和明度,所以蓝色、紫色看起来会比同明度的黄色暗得多。把它们用作文字背景前,务必检查对比度。
- 只靠色相区分信息: 红与绿之类仅靠色相区分的信息,部分用户可能分辨不出。请同时使用图标、文字标签或明度差。
- 屏幕与印刷的差异: HEX是屏幕(RGB)用的表示方式。鲜艳的蓝色、绿色在印刷(CMYK)中可能变暗,不同显示器的呈现也不同,印刷品请先打样确认。
- 文化差异: 同一种颜色在不同地区和场合有不同的含义,使用前请考虑受众。
- 本生成器只基于简单的角度规则,不能替你确定品牌形象。需要从图片提取颜色或做用户测试的项目,还需要另行处理。
结果怎么用
做网站时,可以复制为CSS变量并定义在:root中,按钮、链接和背景都只引用变量,这样颜色可以集中在一处管理。 如果需要RGB或HSL值,可直接使用色块中显示的数值,或用颜色代码转换转换。 想做渐变,可以把两种邻近色放进CSS渐变生成器。 想练习辨别颜色差异,可以玩玩配色匹配游戏。
常见问题
生成的色值怎么使用?
点击色块即可把HEX色值复制到剪贴板,直接粘贴到设计工具或CSS中。点击“复制为CSS变量”则会把当前整个调色板以变量形式一次复制。
哪种配色最好?
没有标准答案。需要强调的设计适合互补色或分裂互补色,需要稳定感则适合邻近色或同色系。关键是结合实际使用场景和对比度检查结果来选择。
可以直接输入HEX色值作为基准色吗?
可以。在HEX输入框中填入如#c9a961的6位色值(或#abc这样的3位简写),取色器会同步并刷新调色板。格式有误时会显示错误提示。
对比度低于4.5就不能用吗?
普通正文建议满足AA标准。装饰性元素、大号标题(标准为3:1)和徽标等在指南中通常有例外。是否有法律上的强制要求取决于服务类型和所在地区,请查阅相关规定。
同色系的5档里包含基准色吗?
同色系的明度固定为20、35、50、65、80%,所以可能没有与基准色明度完全相同的一档。需要基准色时,会在最前面单独显示“基准”色块。