首页 / three.js / API 文档
Color
先看结论
颜色对象。内部按线性空间存 RGB，输入输出时按指定的颜色空间转换， 是材质、灯光、顶点色的通用类型。
new THREE.Color(r, g, b)
构造方式
| 写法 | 说明 |
|---|---|
new THREE.Color(0xff8844) | 十六进制数值，按 sRGB 解释 |
new THREE.Color('#ff8844') | CSS 颜色字符串 |
new THREE.Color(1, 0.5, 0.2) | 三个分量，按工作空间（线性）解释 |
new THREE.Color() | 白色 |
属性
| 属性 | 说明 |
|---|---|
r / g / b | 线性空间分量，取值 0 到 1 |
isColor | 恒为 true |
方法
| 方法 | 说明 |
|---|---|
set(value) | 接受十六进制、字符串或 Color |
setHex(hex, colorSpace) | 按指定颜色空间解释十六进制，默认 sRGB |
setStyle(style, colorSpace) | 解析 CSS 颜色字符串，支持 rgb()、hsl()、颜色名 |
setRGB(r, g, b, colorSpace) | 按指定颜色空间设置分量 |
setHSL(h, s, l, colorSpace) | 色相 0 到 1、饱和度、亮度 |
setScalar(v) | 三个分量设为同一个值 |
getHex(colorSpace) | 转成十六进制数值 |
getHexString(colorSpace) | 转成 'ff8844' 形式 |
getStyle(colorSpace) | 转成 'rgb(255,136,68)' |
getHSL(target, colorSpace) | 转成色相、饱和度、亮度 |
lerp(color, alpha) | 朝目标色插值 |
lerpColors(a, b, t) | 两个颜色之间插值 |
offsetHSL(dh, ds, dl) | 在 HSL 空间微调 |
add(color) / addScalar(v) | 分量相加，容易过曝 |
multiply(color) / multiplyScalar(s) | 分量相乘，用于调暗 |
sub(color) | 分量相减 |
convertSRGBToLinear() | 就地转换 |
convertLinearToSRGB() | 就地反向转换 |
equals(color) | 分量是否完全相同 |
clone() / copy(color) | 复制 |
示例
const base = new THREE.Color('#3d7dd8');
const warm = new THREE.Color(0xffb347);
// 按数值在冷暖之间插值
const mixed = new THREE.Color().lerpColors(base, warm, 0.35);
const material = new THREE.MeshStandardMaterial({ color: mixed });
// 生成同色系的深浅变化
for (let i = 0; i < 5; i++) {
const c = base.clone().offsetHSL(0, 0, i * 0.06 - 0.12);
console.log('#' + c.getHexString());
}颜色空间
从 r152 起，three.js 默认开启颜色管理：setHex、
setStyle 按 sRGB 解释输入，转换到线性空间存储；
材质最终输出时再转回 sRGB。r、g、b
读到的是线性值，与 CSS 里的数值并不相同。
直接给分量赋值（color.r = 0.5）走的是线性路径，
视觉上会比 CSS 的 rgb(128,128,128) 更亮。
需要与设计稿对齐时，统一用字符串或 setStyle 输入。
叠加运算会超出有效范围。add 与 multiply
不裁剪结果，连续运算后分量可能大于 1 或小于 0，
最终表现取决于材质与色调映射。需要稳定结果时先
clamp，再赋给材质。
经纬志（2026）。《Color》。https://www.jingweizhi.com/three/api/color.html（访问日期 2026-11-03）。