or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

color-parsing.mdcubehelix-color-space.mdhsl-color-space.mdindex.mdlab-color-space.mdlch-color-space.mdrgb-color-space.md
tile.json

index.mddocs/

d3-color

d3-color provides comprehensive color manipulation and conversion functionality across multiple color spaces. It enables parsing, conversion between color formats, and mathematical operations with support for RGB, HSL, CIELAB, CIELCh, and Cubehelix color spaces, all optimized for both machine computation and human perception.

Package Information

  • Package Name: d3-color
  • Package Type: npm
  • Language: JavaScript (ES6 modules)
  • Installation: npm install d3-color

Core Imports

import { color, rgb, hsl, lab, lch, hcl, gray, cubehelix, darker, brighter } from "d3-color";

For legacy environments:

<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script>
// Available as d3.color, d3.rgb, etc.
const steelblue = d3.rgb("steelblue");
</script>

Basic Usage

import { color, hsl } from "d3-color";

// Parse any CSS color string
const c = color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1}

// Convert and manipulate in HSL space
const hslColor = hsl("steelblue"); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1}
hslColor.h += 90;    // Rotate hue by 90°
hslColor.s += 0.2;   // Increase saturation
hslColor.opacity = 0.8; // Set transparency

// Convert back to CSS string
console.log(hslColor.toString()); // rgba(198, 45, 205, 0.8)

Architecture

d3-color is built around several key concepts:

  • Universal Parsing: The color() function parses any valid CSS color string into appropriate color space objects
  • Color Space Classes: Each color space (RGB, HSL, Lab, LCh, Cubehelix) has its own class with specialized methods
  • Cross-format Conversion: All color objects can convert to any other color space via .rgb() and format methods
  • Immutable Operations: All methods return new color instances, preserving originals
  • Human-perceptual Color Spaces: CIELAB and CIELCh provide perceptually uniform color manipulation

Capabilities

Color Parsing and Construction

Universal color parsing and construction functions for creating color objects from various input formats.

function color(specifier: string): Rgb | Hsl | null;
function rgb(r: number, g: number, b: number, opacity?: number): Rgb;
function rgb(specifier: string): Rgb;
function rgb(color: Color): Rgb;

const darker: number;
const brighter: number;

Color Parsing and Construction

RGB Color Space

Standard RGB color space operations for web-compatible color manipulation.

class Rgb {
  r: number;
  g: number; 
  b: number;
  opacity: number;
  
  brighter(k?: number): Rgb;
  darker(k?: number): Rgb;
  rgb(): Rgb;
  clamp(): Rgb;
  displayable(): boolean;
  formatHex(): string;
  formatRgb(): string;
}

RGB Color Space

HSL Color Space

HSL (Hue, Saturation, Lightness) color space for intuitive color adjustments.

class Hsl {
  h: number;
  s: number;
  l: number;
  opacity: number;
  
  brighter(k?: number): Hsl;
  darker(k?: number): Hsl;
  rgb(): Rgb;
  clamp(): Hsl;
  displayable(): boolean;
  formatHsl(): string;
}

HSL Color Space

CIELAB Color Space

Perceptually uniform CIELAB color space for accurate color manipulation and grayscale operations.

function lab(l: number, a: number, b: number, opacity?: number): Lab;
function lab(specifier: string): Lab;
function lab(color: Color): Lab;
function gray(l: number, opacity?: number): Lab;

class Lab {
  l: number;
  a: number;
  b: number;
  opacity: number;
  
  brighter(k?: number): Lab;
  darker(k?: number): Lab;
  rgb(): Rgb;
  displayable(): boolean;
}

CIELAB Color Space

CIELCh Color Space

Polar representation of CIELAB providing intuitive hue-based color manipulation.

function lch(l: number, c: number, h: number, opacity?: number): Hcl;
function hcl(h: number, c: number, l: number, opacity?: number): Hcl;

class Hcl {
  h: number;
  c: number;
  l: number;
  opacity: number;
  
  brighter(k?: number): Hcl;
  darker(k?: number): Hcl;
  rgb(): Rgb;
  displayable(): boolean;
}

CIELCh Color Space

Cubehelix Color Space

Dave Green's Cubehelix color space for monotonic lightness transitions ideal for data visualization.

function cubehelix(h: number, s: number, l: number, opacity?: number): Cubehelix;

class Cubehelix {
  h: number;
  s: number;
  l: number;
  opacity: number;
  
  brighter(k?: number): Cubehelix;
  darker(k?: number): Cubehelix; 
  rgb(): Rgb;
  displayable(): boolean;
}

Cubehelix Color Space

Types

function Color(): void;

interface ColorPrototype {
  opacity: number;
  
  copy(values?: object): Color;
  displayable(): boolean;
  rgb(): Rgb;
  brighter(k?: number): Color;
  darker(k?: number): Color;
  formatHex(): string;
  formatHex8(): string;
  formatHsl(): string;
  formatRgb(): string;
  toString(): string;
}

const radians: number;
const degrees: number;