颜色的产生和混合
颜色是光的频率或波长在视觉上的表现。理解颜色的产生原理,掌握颜色的混合规律,是学习光学和显示技术的基础。
什么是颜色?
颜色的定义
颜色(Color):光的频率或波长在视觉上的表现,是人眼对不同频率光的感知。
通俗理解:颜色就是"光的不同频率",像"红橙黄绿蓝靛紫"一样。
颜色的本质
颜色的本质:
- 物理本质:光的频率或波长
- 视觉本质:人眼对不同频率光的感知
- 心理本质:大脑对光的频率信息的解释
通俗理解:
- 颜色:光的不同频率(物理本质)
- 人眼:感知不同频率的光(视觉本质)
- 大脑:解释为不同的颜色(心理本质)
颜色的产生
光的频率与颜色
光的频率与颜色的关系:
| 颜色 | 频率范围 (THz) | 波长范围 (nm) | 能量 |
|---|---|---|---|
| 红 | 400-480 | 625-750 | 最低 |
| 橙 | 480-510 | 590-625 | - |
| 黄 | 510-530 | 570-590 | - |
| 绿 | 530-600 | 500-570 | - |
| 蓝 | 600-660 | 450-500 | - |
| 靛 | 660-680 | 435-450 | - |
| 紫 | 680-790 | 380-435 | 最高 |
可见光范围:380 nm - 750 nm(或 400 THz - 790 THz)
通俗理解:
- 红光:频率最低,波长最长(625-750 nm)
- 紫光:频率最高,波长最短(380-435 nm)
- 频率越高,能量越大(紫光能量最高,红光能量最低)
颜色的产生方式
颜色的产生方式:
-
发光(Emission):
- 热发光:物体加热发光(如白炽灯)
- 电发光:电流通过物体发光(如 LED、荧光灯)
- 化学发光:化学反应发光(如荧光棒)
-
反射(Reflection):
- 物体反射特定频率的光
- 其他频率的光被吸收
- 反射的光决定了物体的颜色
-
透射(Transmission):
- 物体透过特定频率的光
- 其他频率的光被吸收
- 透射的光决定了物体的颜色
通俗理解:
- 发光:物体自己发光(如灯泡)
- 反射:物体反射光(如红苹果反射红光)
- 透射:物体透光(如彩色玻璃透过特定颜色的光)
颜色的混合
三原色
三原色(Primary Colors):不能通过其他颜色混合得到的颜色。
两种三原色系统:
-
色光三原色(RGB):
- 红(Red,R)
- 绿(Green,G)
- 蓝(Blue,B)
- 用于发光物体(如显示器、LED)
-
色料三原色(CMYK):
- 青(Cyan,C)
- 品红(Magenta,M)
- 黄(Yellow,Y)
- 黑(Black,K,补充)
- 用于颜料、印刷
通俗理解:
- 色光三原色:红、绿、蓝(用于发光,如显示器)
- 色料三原色:青、品红、黄(用于颜料,如印刷)
色光混合(加色混合)
色光混合(Additive Color Mixing):将不同颜色的光叠加,产生新的颜色。
色光三原色混合:
| 混合 | 结果 |
|---|---|
| 红 + 绿 | 黄 |
| 红 + 蓝 | 品红(紫红) |
| 绿 + 蓝 | 青(蓝绿) |
| 红 + 绿 + 蓝 | 白 |
通俗理解:
- 红光 + 绿光 = 黄光
- 红光 + 蓝光 = 品红光
- 绿光 + 蓝光 = 青光
- 红光 + 绿光 + 蓝光 = 白光(所有颜色)
应用:
- 显示器:RGB 显示器,通过红、绿、蓝三色发光,混合产生各种颜色
- LED:RGB LED,通过三种颜色的 LED,混合产生各种颜色
- 投影仪:RGB 投影仪,通过三色光,混合产生各种颜色
色料混合(减色混合)
色料混合(Subtractive Color Mixing):将不同颜色的颜料混合,吸收某些颜色的光,产生新的颜色。
色料三原色混合:
| 混合 | 结果 |
|---|---|
| 青 + 品红 | 蓝 |
| 青 + 黄 | 绿 |
| 品红 + 黄 | 红 |
| 青 + 品红 + 黄 | 黑(理论上,实际为深褐色) |
通俗理解:
- 青色 + 品红色 = 蓝色(青色吸收红光,品红色吸收绿光,剩余蓝光)
- 青色 + 黄色 = 绿色(青色吸收红光,黄色吸收蓝光,剩余绿光)
- 品红色 + 黄色 = 红色(品红色吸收绿光,黄色吸收蓝光,剩余红光)
- 青色 + 品红色 + 黄色 = 黑色(吸收所有颜色的光)
应用:
- 印刷:CMYK 印刷,通过青、品红、黄、黑四色,混合产生各种颜色
- 绘画:颜料混合,通过不同颜色的颜料,混合产生各种颜色
- 滤镜:彩色滤镜,通过不同颜色的滤镜,过滤某些颜色的光
色光混合 vs 色料混合
色光混合 vs 色料混合:
| 特征 | 色光混合(RGB) | 色料混合(CMYK) |
|---|---|---|
| 原理 | 光叠加(加色) | 光吸收(减色) |
| 三原色 | 红、绿、蓝 | 青、品红、黄 |
| 混合结果 | 越来越亮(趋向白色) | 越来越暗(趋向黑色) |
| 应用 | 显示器、LED、投影仪 | 印刷、绘画、滤镜 |
通俗理解:
- 色光混合:光叠加,越来越亮(红+绿+蓝=白)
- 色料混合:光吸收,越来越暗(青+品红+黄=黑)
颜色的表示
RGB 颜色系统
RGB 颜色系统:用红、绿、蓝三原色的强度表示颜色。
RGB 值:每种颜色的强度范围 0-255(8 位)或 0-1(归一化)
例子:
- 红色:RGB(255, 0, 0)
- 绿色:RGB(0, 255, 0)
- 蓝色:RGB(0, 0, 255)
- 黄色:RGB(255, 255, 0)(红+绿)
- 白色:RGB(255, 255, 255) (红+绿+蓝)
- 黑色:RGB(0, 0, 0)(无光)
通俗理解:RGB 值表示每种颜色的强度(0-255)。
HSV 颜色系统
HSV 颜色系统:用色相(Hue)、饱和度(Saturation)、明度(Value)表示颜色。
HSV 值:
- H(色相):0-360°(颜色的种类)
- S(饱和度):0-1 或 0-100%(颜色的纯度)
- V(明度):0-1 或 0-100%(颜色的亮度)
通俗理解:
- 色相:什么颜色(红、绿、蓝等)
- 饱和度:颜色有多纯(纯色 vs 灰色)
- 明度:颜色有多亮(亮 vs 暗)
实际应用
游戏开发
在游戏开发中,颜色的产生和混合用于:
- 图形渲染:RGB 颜色系统,渲染图像
- 颜色混合:实现透明、混合等效果
- 颜色校正:调整颜色、对比度、亮度
// 颜色的产生和混合的应用
class ColorProductionMixing {
// RGB 转 HSV
static rgbToHsv(r, g, b) {
// r, g, b: 0-255
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0;
if (delta !== 0) {
if (max === r) {
h = ((g - b) / delta) % 6;
} else if (max === g) {
h = (b - r) / delta + 2;
} else {
h = (r - g) / delta + 4;
}
}
h = (h * 60 + 360) % 360; // 转换为度
const s = max === 0 ? 0 : delta / max;
const v = max;
return { h, s, v };
}
// HSV 转 RGB
static hsvToRgb(h, s, v) {
// h: 0-360, s: 0-1, v: 0-1
const c = v * s;
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
const m = v - c;
let r = 0, g = 0, b = 0;
if (h < 60) {
r = c; g = x; b = 0;
} else if (h < 120) {
r = x; g = c; b = 0;
} else if (h < 180) {
r = 0; g = c; b = x;
} else if (h < 240) {
r = 0; g = x; b = c;
} else if (h < 300) {
r = x; g = 0; b = c;
} else {
r = c; g = 0; b = x;
}
return {
r: Math.round((r + m) * 255),
g: Math.round((g + m) * 255),
b: Math.round((b + m) * 255)
};
}
// 色光混合(RGB 加色混合)
static additiveColorMixing(color1, color2) {
// color1, color2: {r, g, b}
// 加色混合:叠加,不超过 255
return {
r: Math.min(255, color1.r + color2.r),
g: Math.min(255, color1.g + color2.g),
b: Math.min(255, color1.b + color2.b)
};
}
// 色料混合( 减色混合,简化)
static subtractiveColorMixing(color1, color2) {
// 减色混合:取最小值(简化)
return {
r: Math.min(color1.r, color2.r),
g: Math.min(color1.g, color2.g),
b: Math.min(color1.b, color2.b)
};
}
// 计算颜色的亮度(简化)
static calculateLuminance(r, g, b) {
// 亮度公式(简化):L = 0.299R + 0.587G + 0.114B
return 0.299 * r + 0.587 * g + 0.114 * b;
}
// 颜色混合(Alpha 混合)
static alphaBlend(color1, color2, alpha) {
// alpha: 0-1,color1 的透明度
// alpha = 1: 完全 color1,alpha = 0: 完全 color2
return {
r: Math.round(color1.r * alpha + color2.r * (1 - alpha)),
g: Math.round(color1.g * alpha + color2.g * (1 - alpha)),
b: Math.round(color1.b * alpha + color2.b * (1 - alpha))
};
}
// 波长转 RGB(简化,近似)
static wavelengthToRgb(wavelength) {
// 波长:nm,转换为 RGB(简化近似)
let r = 0, g = 0, b = 0;
if (wavelength >= 380 && wavelength < 440) {
r = -1 * (wavelength - 440) / (440 - 380);
g = 0;
b = 1;
} else if (wavelength >= 440 && wavelength < 490) {
r = 0;
g = (wavelength - 440) / (490 - 440);
b = 1;
} else if (wavelength >= 490 && wavelength < 510) {
r = 0;
g = 1;
b = -1 * (wavelength - 510) / (510 - 490);
} else if (wavelength >= 510 && wavelength < 580) {
r = (wavelength - 510) / (580 - 510);
g = 1;
b = 0;
} else if (wavelength >= 580 && wavelength < 645) {
r = 1;
g = -1 * (wavelength - 645) / (645 - 580);
b = 0;
} else if (wavelength >= 645 && wavelength <= 750) {
r = 1;
g = 0;
b = 0;
}
// 归一化到 0-255
const factor = 1.0;
if (wavelength >= 380 && wavelength < 420) {
factor = 0.3 + 0.7 * (wavelength - 380) / (420 - 380);
} else if (wavelength >= 420 && wavelength <= 700) {
factor = 1.0;
} else if (wavelength > 700 && wavelength <= 750) {
factor = 0.3 + 0.7 * (750 - wavelength) / (750 - 700);
}
return {
r: Math.round(255 * Math.max(0, Math.min(1, r * factor))),
g: Math.round(255 * Math.max(0, Math.min(1, g * factor))),
b: Math.round(255 * Math.max(0, Math.min(1, b * factor)))
};
}
}
// 使用示例
let hsv = ColorProductionMixing.rgbToHsv(255, 0, 0);
// RGB(255, 0, 0) - 红色
// HSV: {h: 0, s: 1, v: 1}
let rgb = ColorProductionMixing.hsvToRgb(0, 1, 1);
// HSV(0, 1, 1) - 红色
// RGB: {r: 255, g: 0, b: 0}
let mixedColor = ColorProductionMixing.additiveColorMixing(
{r: 255, g: 0, b: 0}, // 红色
{r: 0, g: 255, b: 0} // 绿色
);
// 红色 + 绿色 = 黄色
// RGB: {r: 255, g: 255, b: 0}
let subtractiveMixed = ColorProductionMixing.subtractiveColorMixing(
{r: 0, g: 255, b: 255}, // 青色
{r: 255, g: 0, b: 255} // 品红色
);
// 青色 + 品红色 = 蓝色(简化)
// RGB: {r: 0, g: 0, b: 255}
let luminance = ColorProductionMixing.calculateLuminance(255, 255, 255);
// RGB(255, 255, 255) - 白色
// 亮度:255(最大)
let blended = ColorProductionMixing.alphaBlend(
{r: 255, g: 0, b: 0}, // 红色
{r: 0, g: 0, b: 255}, // 蓝色
0.5 // alpha = 0.5(半透明)
);
// 红色和蓝色混合,alpha = 0.5
// RGB: {r: 128, g: 0, b: 128}(紫红色)
let rgbFromWavelength = ColorProductionMixing.wavelengthToRgb(650);
// 波长 650 nm(红光)
// RGB: {r: 255, g: 0, b: 0}(近似红色)
电子工程
在电子工程中,颜色的产生和混合用于:
- 显示技术:RGB 显示器,通过三原色混合产生各种颜色
- LED 设计:RGB LED,通过三色 LED 混合产生各种颜色
- 图像处理:颜色空间转换、颜色校正
Arduino/Raspberry Pi
在 Arduino/Raspberry Pi 中,颜色的产生和混合用于:
- LED 控制:RGB LED,控制颜色和亮度
- 传感器应用:颜色传感器、光传感器
- 图像处理:颜色识别、图像处理
例子:RGB LED 控制
- 控制红、绿、蓝三种 颜色的亮度
- 混合产生各种颜色
- 颜色 = RGB(red, green, blue)
常见问题
1. 色光混合
问题:红光 RGB(255, 0, 0) 和绿光 RGB(0, 255, 0) 混合,求结果颜色。
分析:
- 红光 + 绿光 = 黄光
- RGB(255, 255, 0)
2. 色料混合
问题:青色(吸收红光)和黄色(吸收蓝光)混合,求结果颜色。
分析:
- 青色吸收红光,黄色吸收蓝光
- 剩余绿光
- 结果:绿色
3. RGB 转 HSV
问题:RGB(255, 255, 0),求 HSV 值。
分析:
- RGB(255, 255, 0) = 黄色
- HSV: 约 (60, 1, 1)
- 色相:60°(黄色)
- 饱和度:1(纯色)
- 明度:1(最亮)
常见错误
- 色光混合和色料混合混淆:色光混合是加色(叠加),色料混合是减色( 吸收)
- RGB 值范围错误:RGB 值通常为 0-255,HSV 值不同(H: 0-360, S: 0-1, V: 0-1)
- 颜色系统混淆:RGB 用于发光,CMYK 用于印刷
小结
颜色的产生和混合的核心内容:
-
颜色:光的频率或波长在视觉上的表现
- 可见光范围:380 nm - 750 nm
-
颜色的产生:
- 发光:物体自己发光
- 反射:物体反射特定频率的光
- 透射:物体透射特定频率的光
-
颜色的混合:
- 色光混合(RGB,加色):光叠加,越来越亮(红+绿+蓝=白)
- 色料混合(CMYK,减色):光吸收,越来越暗(青+品红+黄=黑)
-
颜色系统:
- RGB:红、绿、蓝(用于发光,如显示器)
- CMYK:青、品红、黄、黑(用于印刷)
- HSV:色相、饱和度、明度(用于颜色选择)
-
应用:
- 显示器(RGB)
- 印刷(CMYK)
- LED 控制
- 图像处理
记住:色光混合是加色(叠加),色料混合是减色(吸收),RGB 用于发光,CMYK 用于印刷!
