Color
Quick answer
Color represents an RGB color stored in linear space, converting to and from sRGB when reading or writing hex and CSS values. It is shared by materials, lights, and vertex colors, with helpers such as setStyle(), setHSL(), lerp(), and getHexString(). Use it whenever a parameter expects a color instead of a raw number.
new THREE.Color ( r , g , b )
Key points
- new Color(0xff8844) and setStyle('#ff8844') treat input as sRGB, while setRGB() uses the working space.
- r, g, and b expose linear components in the 0 to 1 range; getHex() returns sRGB by default.
- lerp() and lerpColors() interpolate colors for gradients and transitions.
Example
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());
}Notes
- add() and multiply() do not clamp, so repeated operations push components outside 0 to 1.
- Passing linear components to setRGB() when you meant sRGB produces washed-out colors.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Color. https://www.jingweizhi.com/en/three/api/color.html (accessed 2026-11-03).