色彩基础 · 互动小课

RGB、CMYK 和色相

同一个颜色,屏幕、印刷品和调色板各有一套“说法”。先听 2 分钟讲解,再往下自己动手:换算、混色、调色、猜颜色。

名词小注Hue 就是色相,意思是“哪一种颜色”。它是 HSB(Photoshop、Figma 的拾色器)和 HSL(网页 CSS)这类颜色模式里的 H。

两分钟讲解

带中文语音和字幕。重点句会放慢、停顿,并标上“重点”。暂停后可以用 ‹ › 一句一句看。

RGB屏幕 · 发光
CMYK印刷 · 油墨
HSB调色 · 色相 Hue
R 红 G 绿 B 蓝
放大屏幕:1 个像素 = 红、绿、蓝 3 盏小灯全部关掉 = 黑色
黄青品红白

红 + 绿 = 黄

红 + 绿 + 蓝 = 白光叠得越多,越亮

R
0
G
0
B
0
0(关)255(最亮)
rgb(255, 165, 0)#FFA500

每种 256 档 · 256 × 256 × 256 ≈ 1677 万种颜色

RGB = 屏幕的语言

手机
电脑
电视
C青 Cyan
M品红 Magenta
Y黄 Yellow
K黑 Key

印刷机上的 4 种油墨

蓝红绿黑

墨叠得越多,越暗墨把光“吃掉”,反射回来的就少了

光 RGB红+绿=绿+蓝=红+蓝=

墨 CMY青+品红=品红+黄=青+黄=

C + M + Y理论上:黑色实际:发闷的深棕
→
K 黑墨更黑 · 字更清楚 · 更省墨

K 来自 Key(印刷里的“主版”,通常就是黑版)。不用 B,也免得和 Blue 搞混。

C
0%
M
0%
Y
0%
K
0%
0%(没墨)100%(满墨)
C0 M100 Y100 K0

印刷“大红”(屏幕上的近似色)

屏幕上(RGB)

荧光绿
亮蓝
亮青
亮品红

印出来(CMYK,示意)

变暗、发灰
变暗、发灰
没那么亮
没那么艳
做印刷品:提前转成 CMYK 预览,或先打样
0° 红60° 黄120° 绿 180° 青240° 蓝300° 品红
0°
Hue= 色相“哪一种颜色”,用角度表示
S 饱和度 →B 明度 →
H 210°S 90%B 85%

Hue 色相 + Saturation 饱和度 + Brightness 明度

同一种蓝,想深一点?

用 RGB
→
51153255

3 个数都要改

用 HSB
→
210°80%100%

只改 B 一个数

HSB(210°, 80%, 60%) ⇅ 换算 RGB(31, 92, 153) #1F5C99

同一个颜色,换种说法

屏幕 → RGB

光,越加越亮

印刷 → CMYK

墨,越叠越暗

换颜色 → 转色相

HSB 更好调

开场

约 2 分钟 · 建议打开声音

重点

0:00 / 2:00
重点

动手玩

四个小实验:先换算,再混色,然后自己调色,最后只看数字猜颜色。

实验 1

颜色转换器:同一个颜色,三种说法

拖任意一组滑块,或直接输入色号,另外几种写法会同时换算出来。

屏幕上大概叫:橙

色号就是 RGB 的十六进制写法:#FF A5 00 = 红 255、绿 165、蓝 0。

印出来大概是这样

基本能印准

上半是屏幕色,下半是模拟印刷色。只是粗略模拟,真实效果要看纸张、油墨和印刷厂的设置。
RGB 屏幕的光 · 每个 0–255
HSB 色相 0–360° · 饱和度、明度 0–100%
CMYK 印刷的墨 · 每个 0–100%

CMYK 用的是最常见的简化公式;真正印刷时,会按纸张和油墨的“色彩配置文件”换算,数字会略有不同。

屏幕放大

屏幕上:3 盏小灯的亮度

红 255 · 绿 165 · 蓝 0

印刷品放大

印刷品上:4 种颜色的小网点

C 0% · M 35% · Y 100% · K 0%

看看是怎么换算的
实验 2

光和墨:一个越叠越亮,一个越叠越暗

拖动圆圈让它们重叠;点一下圆圈可以开关。下面的滑块调亮度或墨量。

黑屏幕 + 三盏灯(RGB)

白纸 + 三种墨(CMY)

试试:只开红和绿;把三盏灯都调到 128;把三种墨全叠满。
实验 3

调色挑战:RGB 和 HSB 哪个更好调?

把右边的颜色调得和左边一样。同一个颜色可以分别用 RGB 和 HSB 各调一次,比比哪种更快。

目标珊瑚橙
你的
相似度 0%

实验 4

看数值猜颜色

不看颜色,只看数字,在脑子里“换算”一下,选出对应的颜色。

第 1 / 8 题答对 0 题

rgb(255, 255, 0) 是什么颜色?

速查表

三种说法放在一起对比。

RGB红 · 绿 · 蓝CMYK青 · 品红 · 黄 · 黑HSB色相 · 饱和度 · 明度
用在哪屏幕:手机、电脑、电视、网页、视频、数码照片印刷:书、海报、包装、名片选颜色、调颜色、做配色(最后还是换算成 RGB 显示)
原理加色:光叠加,越加越亮减色:墨吸收光,越叠越暗换个角度描述颜色:哪一种色 + 多鲜艳 + 多亮
起点黑色(不发光)白色(纸本身)—
数值每个 0–255,或 #RRGGBB每个 0–100%(墨量)H 0–360°;S、B 0–100%
全开255, 255, 255 = 白C+M+Y 全满 ≈ 深棕,所以另加 KS = 0 → 灰;B = 0 → 黑
例子rgb(255, 165, 0) 橙C0 M100 Y100 K0 大红210°, 80%, 100% 天蓝
红 + 绿 = 黄?可是颜料不是这样混的呀

光和颜料是两套规则。光是“加”:红光和绿光一起进到眼睛里,同时刺激了感受红和感受绿的细胞,大脑就把它当成黄色。颜料是“减”:每种颜料都会吸收掉一部分光,混得越多,反射回来的光越少,所以红颜料加绿颜料会变成暗暗的褐色。

美术课学的“红黄蓝三原色”和 CMY 是什么关系?

红黄蓝是传统绘画里的说法,比较粗略。印刷用的青、品红、黄是更“准”的一组减色原色,混出来的颜色范围更大。可以把品红理解成“偏粉的纯红”,把青理解成“偏绿的纯蓝”。

为什么电脑上做好的海报,印出来颜色发灰?

屏幕能显示的颜色范围(色域)比油墨大,特别是亮绿、亮蓝、亮紫和荧光色,油墨根本调不出来。做印刷品时,尽早在软件里切换到 CMYK 模式或打开“校样颜色”预览;重要的颜色可以先打样,或者用专色(比如潘通色)。

网页 CSS 的 hsl() 和 Photoshop 的 HSB 一样吗?

不完全一样。H(色相)是同一个角度,但另外两个数的算法不同。HSB 的 B = 100% 时颜色最亮最纯;HSL 的 L = 50% 时颜色最纯,L = 100% 就成了白色。比如纯红:HSB 是 0°, 100%, 100%,HSL 是 0°, 100%, 50%。

HEX 色号(比如 #FFA500)怎么读?

它就是 RGB 的十六进制写法,每两位代表一个通道:FF = 255(红),A5 = 165(绿),00 = 0(蓝)。所以 #FFA500 和 rgb(255, 165, 0) 是同一个颜色。

印刷时,黑色的字和大面积黑底用什么黑?

黑色文字一般只用 K100(单色黑),就算几块印版没完全对齐,字边也不会出现彩色毛边。大面积黑底常用“四色黑”(比如 C60 M40 Y40 K100),看起来更深更沉。具体配方以印刷厂要求为准。