有用

演示与视觉03 / 10

HSL 色彩模型

色相、饱和度、亮度:三个数字描述任何颜色。

  • 学会用时1 小时
  • 你的收获配色有公式,不再凭感觉试
  • 用到的频率每周 2 次
  • 难度进阶

01为什么学

没学之前

在拾色器里乱点,配出来的颜色不统一。

学会之后

固定一个色相,只调亮度做一整套色阶,再用色环关系找搭配色。

  • 网页、PPT、海报配色都适用
  • 做出一整套深浅一致的主题色

02图解

色相环
0° 红60° 黄120° 绿180° 青240° 蓝300° 洋红基准 210°
色环上,互补色在对面(+180°),三等分在 ±120°,邻近色在 ±30°。

03基本单元6 个

  • 色相 H0–360°
  • 饱和度 S0–100%
  • 亮度 L0–100%
  • 互补+180°
  • 三等分±120°
  • 邻近±30°

04怎么用

  1. 色相色环上的位置,0° 红、120° 绿、240° 蓝
  2. 同色相只调亮度做出统一的一整套深浅色阶
  3. 互补色对比最强,三等分活泼,邻近色柔和
  4. 先确定一个主色,其余颜色由它推出

05速查表

关系色相差效果
同色相0°统一、稳重
邻近±30°柔和、统一
三等分±120°活泼、和谐
互补180°强对比

06动手试试

拖动三个滑块,看配色

07套用一次

主色 210° 蓝:同色相 L=95/85/70/50/30 做背景到文字的整套色阶,强调色用互补色 30° 橙。

08常见的坑

  • 同时用很多色相

    一个主色加一个强调色就够。

  • 只调色相不管亮度

    对比度不够,文字看不清。

09自测与练习

先做 10 秒自测,再动手练一下。

互补色在色环上相差多少度?

10 分钟小练习

在演示里选一个主色,复制它的 5 级亮度色阶用在 PPT 里。

看参考答案
同色相不同亮度,页面看起来统一。

+配合着学

演示与视觉的全部 10 条