← Three.jsMaterial Colors

BaseHarmonyTetradicTriadicAnalogousLight 30%

import kleur from "@driangle/kleur";
import * as THREE from "three";

const base = kleur("#ff6b35");
const palette = base.tetradic();

const meshes = [];
for (const color of palette) {
  const [r, g, b] = color.toNormalized();
  const material = new THREE.MeshStandardMaterial({
    color: new THREE.Color(r, g, b),
  });

  const [er, eg, eb] = color
    .lighten(0.3).toNormalized();
  material.emissive = new THREE.Color(er, eg, eb);
  material.emissiveIntensity = 0.15;

  meshes.push(new THREE.Mesh(geometry, material));
}

color#ff6b35

emissive#ff9772

r1.000

g0.420

b0.208

color#64ff35

emissive#93ff72

r0.392

g1.000

b0.208

color#35c9ff

emissive#72d9ff

r0.208

g0.788

b1.000

color#d035ff

emissive#de72ff

r0.816

g0.208

b1.000