跳到主要内容

颜色的产生和混合

颜色是光的频率或波长在视觉上的表现。理解颜色的产生原理,掌握颜色的混合规律,是学习光学和显示技术的基础。

什么是颜色?

颜色的定义

颜色(Color):光的频率或波长在视觉上的表现,是人眼对不同频率光的感知。

通俗理解:颜色就是"光的不同频率",像"红橙黄绿蓝靛紫"一样。

颜色的本质

颜色的本质

  • 物理本质:光的频率或波长
  • 视觉本质:人眼对不同频率光的感知
  • 心理本质:大脑对光的频率信息的解释

通俗理解

  • 颜色:光的不同频率(物理本质)
  • 人眼:感知不同频率的光(视觉本质)
  • 大脑:解释为不同的颜色(心理本质)

颜色的产生

光的频率与颜色

光的频率与颜色的关系

颜色频率范围 (THz)波长范围 (nm)能量
400-480625-750最低
480-510590-625-
510-530570-590-
绿530-600500-570-
600-660450-500-
660-680435-450-
680-790380-435最高

可见光范围:380 nm - 750 nm(或 400 THz - 790 THz)

通俗理解

  • 红光:频率最低,波长最长(625-750 nm)
  • 紫光:频率最高,波长最短(380-435 nm)
  • 频率越高,能量越大(紫光能量最高,红光能量最低)

颜色的产生方式

颜色的产生方式

  1. 发光(Emission):

    • 热发光:物体加热发光(如白炽灯)
    • 电发光:电流通过物体发光(如 LED、荧光灯)
    • 化学发光:化学反应发光(如荧光棒)
  2. 反射(Reflection):

    • 物体反射特定频率的光
    • 其他频率的光被吸收
    • 反射的光决定了物体的颜色
  3. 透射(Transmission):

    • 物体透过特定频率的光
    • 其他频率的光被吸收
    • 透射的光决定了物体的颜色

通俗理解

  • 发光:物体自己发光(如灯泡)
  • 反射:物体反射光(如红苹果反射红光)
  • 透射:物体透光(如彩色玻璃透过特定颜色的光)

颜色的混合

三原色

三原色(Primary Colors):不能通过其他颜色混合得到的颜色。

两种三原色系统

  1. 色光三原色(RGB):

    • (Red,R)
    • 绿(Green,G)
    • (Blue,B)
    • 用于发光物体(如显示器、LED)
  2. 色料三原色(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(最亮)

常见错误

  1. 色光混合和色料混合混淆:色光混合是加色(叠加),色料混合是减色(吸收)
  2. RGB 值范围错误:RGB 值通常为 0-255,HSV 值不同(H: 0-360, S: 0-1, V: 0-1)
  3. 颜色系统混淆:RGB 用于发光,CMYK 用于印刷

小结

颜色的产生和混合的核心内容:

  1. 颜色:光的频率或波长在视觉上的表现

    • 可见光范围:380 nm - 750 nm
  2. 颜色的产生

    • 发光:物体自己发光
    • 反射:物体反射特定频率的光
    • 透射:物体透射特定频率的光
  3. 颜色的混合

    • 色光混合(RGB,加色):光叠加,越来越亮(红+绿+蓝=白)
    • 色料混合(CMYK,减色):光吸收,越来越暗(青+品红+黄=黑)
  4. 颜色系统

    • RGB:红、绿、蓝(用于发光,如显示器)
    • CMYK:青、品红、黄、黑(用于印刷)
    • HSV:色相、饱和度、明度(用于颜色选择)
  5. 应用

    • 显示器(RGB)
    • 印刷(CMYK)
    • LED 控制
    • 图像处理

记住:色光混合是加色(叠加),色料混合是减色(吸收),RGB 用于发光,CMYK 用于印刷!