## 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%)');
```


<html>
	<head>
		<title>THREE Color</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
		<script type="importmap">
		{
			"imports": {
			"three": "https://unpkg.com/three/build/three.module.js"
			}
		}
		</script>
		<script type="module">

			import * as THREE from 'three';

			// scene
			const scene = new THREE.Scene();

			// camera
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.z = 20;

			// renderer
			const renderer = new THREE.WebGLRenderer();
			document.body.appendChild(renderer.domElement);
			renderer.setSize(window.innerWidth, window.innerHeight);

			// shape
			const geometry = new THREE.SphereGeometry(3, 16, 16);
            const material = new THREE.MeshBasicMaterial();

			// setting color
			const color1 = new THREE.Color(0xff66ff);
			const color2 = new THREE.Color('rgb(150, 0, 150)');
			const color3 = new THREE.Color('hsl(255, 100%, 50%)');
			const color4 = new THREE.Color('goldenrod');

			material.color.set(color4);

            const shape = new THREE.Mesh(geometry, material);

			scene.add(shape);
			
			// rendering function
			function animate() {	
				requestAnimationFrame(animate);
				renderer.render(scene, camera);
			};

			animate();

		</script>
	</body>
</html>

codemirror

What is the Color class in three.js?

Three.js's Color class allows initializing and manipulating colors using various formats, providing flexibility in setting material colors.

What is the Color class in three.js?

Constructor

No arguments

Hexadecimal color

RGB string

X11 color names

HSL string

Return value

Example

Explanation