Examples

Plotting & 3D

Integrate color schemes with Three.js, WebGL 3D shaders, and HTML5 Canvas 2D engines.

Plotting & 3D Visualization

color-schemes-js seamlessly integrates with modern JavaScript visualization libraries, HTML5 Canvas 2D engines, and WebGL / Three.js 3D rendering pipelines.

Three.js & WebGL 3D Integration

When building 3D graphics in Three.js (surfaces, particle systems, volume rendering, shader material uniforms), color-schemes-js maps colors directly onto mesh materials and 1D DataTexture lookup tables (LUT).

Three.js WebGL Renderer

Drag mouse to rotate 3D WebGL Cube

t = 0.0#440154rgb(68, 1, 84)

t = 0.5#21908crgb(33, 144, 140)

t = 1.0#fde725rgb(253, 231, 37)

threejs-cube-mapping.ts

import * as THREE from 'three';
import { colorschemes, get } from 'color-schemes-js';

// 1. Create a 1D CanvasTexture from the continuous colormap
const scheme = colorschemes.viridis;

const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 1;
const ctx = canvas.getContext('2d');

for (let i = 0; i < 256; i++) {
  const c = get(scheme, i / 255);
  ctx.fillStyle = `rgb(${Math.round(c.r * 255)}, ${Math.round(c.g * 255)}, ${Math.round(c.b * 255)})`;
  ctx.fillRect(i, 0, 1, 1);
}

const texture = new THREE.CanvasTexture(canvas);
texture.needsUpdate = true;

// 2. Directly update material map
const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.35 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

HTML5 Canvas 2D Visualization

For HTML5 Canvas 2D rendering, heatmaps, contour plots, and statistical charts, sample any colormap continuously or resample discrete color arrays directly onto canvas contexts:

HTML5 Canvas 2D Engine

canvas-2d-rendering.ts

import { colorschemes, get } from 'color-schemes-js';

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const scheme = colorschemes.viridis;

const imgData = ctx.createImageData(canvas.width, canvas.height);
const data = imgData.data;

for (let y = 0; y < canvas.height; y++) {
  for (let x = 0; x < canvas.width; x++) {
    // 1. Calculate normalized value t ∈ [0.0, 1.0]
    const t = calculateNormalizedValue(x, y);
    
    // 2. Sample color continuously
    const color = get(scheme, t);
    const idx = (y * canvas.width + x) * 4;

    data[idx]     = Math.round(color.r * 255);
    data[idx + 1] = Math.round(color.g * 255);
    data[idx + 2] = Math.round(color.b * 255);
    data[idx + 3] = 255;
  }
}

ctx.putImageData(imgData, 0, 0);

Edit this pageorReport an issue

Good Practice

Best practices for choosing perceptually uniform, accessible, and colorblind-safe colormaps.

Image Processing

Procedural fractal generation, false-color elevation maps, and pixel data manipulation.