What is the Color class in three.js?

No arguments

Not providing any arguments will initialize the color to white.

const color = new THREE.Color(); 
// initializes to white

Hexadecimal color

We can also provide the Color constructor with a hexadecimal value of the 0xRRGGBB form. The least significant bytes represent the amount of blue. The most significant bytes represent the amount of red, and the two bytes in the middle represent the amount of green.

const color = new THREE.Color(0xff0000); 
// initializes to red

RGB string

We can also use an RGB string to initialize the Color object. It is of the 'rgb(red, green, blue)' format. Instead of hex, we use decimal numbers to represent the amount of each primary color in the final color. Each primary color can vary between 0 and 255.

const color = new THREE.Color('rgb(0, 255, 0)'); 
// initializes to green

We can also use the percentages of each primary color instead:

const color = new THREE.Color('rgb(0, 100%, 0)')
// initializes to green

We can also use RGB values between 0 and 1. Let’s suppose that x, y, and z are the concentrations of red, green, and blue we want in our color. Dividing each by 255 will give us the RGB value between 0 and 1:

const color = new THREE.Color(0, 0, 1);
// initializes to blue

X11 color names

X11 color names are strings mapped to pre-defined values of hexadecimal colors:

const color = new THREE.Color("goldenrod");
// initializes to a shade of gold

HSL string

HSL is an abbreviation for hue, saturation, and lightness. We can use these values as well to define the color we need. HSL strings are of the 'hsl(hue, saturation, lightness)' format. hue ranges from 0–360. saturation and lightness can vary from 0–100%:

const color = new THREE.Color('hsl(255, 100%, 50%)');