Predefined color palettes and schemes for data visualization, providing perceptually uniform, colorblind-friendly, and aesthetically pleasing color mappings for categorical, sequential, and diverging data.
Distinct colors for categorical data visualization, optimized for differentiation and accessibility.
/**
* Categorical color schemes for discrete data
*/
const schemeCategory10: readonly string[]; // 10 colors
const schemeAccent: readonly string[]; // 8 colors
const schemeDark2: readonly string[]; // 8 colors
const schemePaired: readonly string[]; // 12 colors
const schemePastel1: readonly string[]; // 9 colors
const schemePastel2: readonly string[]; // 8 colors
const schemeSet1: readonly string[]; // 9 colors
const schemeSet2: readonly string[]; // 8 colors
const schemeSet3: readonly string[]; // 12 colors
const schemeTableau10: readonly string[]; // 10 colors - Tableau palette
/**
* Get color from categorical scheme by index
* @param scheme - Color scheme array
* @param index - Color index (wraps around if beyond array length)
* @returns Hex color string
*/
function schemeColor(scheme: readonly string[], index: number): string;Usage Examples:
import { schemeCategory10, schemeSet3, schemeTableau10 } from "d3";
// Use for categorical data
const categories = ["A", "B", "C", "D", "E"];
const colorScale = d3.scaleOrdinal(schemeCategory10).domain(categories);
colorScale("A"); // "#1f77b4"
colorScale("B"); // "#ff7f0e"
// Access colors directly
schemeCategory10[0]; // "#1f77b4"
schemeSet3[5]; // "#bebada"
// Create custom categorical scale
const customColors = d3.scaleOrdinal()
.domain(["urgent", "normal", "low"])
.range(schemeTableau10.slice(0, 3));Color schemes that progress from light to dark for representing continuous data.
/**
* Single-hue sequential schemes (3-9 colors each)
*/
const schemeBlues: { [k: number]: readonly string[] };
const schemeGreens: { [k: number]: readonly string[] };
const schemeGreys: { [k: number]: readonly string[] };
const schemeOranges: { [k: number]: readonly string[] };
const schemePurples: { [k: number]: readonly string[] };
const schemeReds: { [k: number]: readonly string[] };
/**
* Multi-hue sequential schemes (3-9 colors each)
*/
const schemeBuGn: { [k: number]: readonly string[] }; // Blue-Green
const schemeBuPu: { [k: number]: readonly string[] }; // Blue-Purple
const schemeGnBu: { [k: number]: readonly string[] }; // Green-Blue
const schemeOrRd: { [k: number]: readonly string[] }; // Orange-Red
const schemePuBu: { [k: number]: readonly string[] }; // Purple-Blue
const schemePuBuGn: { [k: number]: readonly string[] }; // Purple-Blue-Green
const schemePuRd: { [k: number]: readonly string[] }; // Purple-Red
const schemeRdPu: { [k: number]: readonly string[] }; // Red-Purple
const schemeYlGn: { [k: number]: readonly string[] }; // Yellow-Green
const schemeYlGnBu: { [k: number]: readonly string[] }; // Yellow-Green-Blue
const schemeYlOrBr: { [k: number]: readonly string[] }; // Yellow-Orange-Brown
const schemeYlOrRd: { [k: number]: readonly string[] }; // Yellow-Orange-Red
/**
* Interpolators for continuous sequential schemes
*/
const interpolateBlues: (t: number) => string;
const interpolateGreens: (t: number) => string;
const interpolateGreys: (t: number) => string;
const interpolateOranges: (t: number) => string;
const interpolatePurples: (t: number) => string;
const interpolateReds: (t: number) => string;
const interpolateBuGn: (t: number) => string;
const interpolateBuPu: (t: number) => string;
const interpolateGnBu: (t: number) => string;
const interpolateOrRd: (t: number) => string;
const interpolatePuBu: (t: number) => string;
const interpolatePuBuGn: (t: number) => string;
const interpolatePuRd: (t: number) => string;
const interpolateRdPu: (t: number) => string;
const interpolateYlGn: (t: number) => string;
const interpolateYlGnBu: (t: number) => string;
const interpolateYlOrBr: (t: number) => string;
const interpolateYlOrRd: (t: number) => string;Usage Examples:
import { schemeBlues, interpolateBlues, scaleSequential } from "d3";
// Discrete sequential colors
const blueScale = d3.scaleOrdinal(schemeBlues[5]);
schemeBlues[3]; // ["#deebf7", "#9ecae1", "#3182bd"]
schemeBlues[7]; // More granular blue progression
// Continuous sequential colors
const continuousBlue = d3.scaleSequential(interpolateBlues)
.domain([0, 100]);
continuousBlue(0); // Light blue
continuousBlue(50); // Medium blue
continuousBlue(100); // Dark blue
// Multi-hue progression
const colorScale = d3.scaleSequential(interpolateYlOrRd)
.domain([0, 1]);Color schemes with a neutral midpoint for data that has a meaningful center value.
/**
* Diverging color schemes (3-11 colors each)
*/
const schemeBrBG: { [k: number]: readonly string[] }; // Brown-Blue-Green
const schemePiYG: { [k: number]: readonly string[] }; // Pink-Yellow-Green
const schemePRGn: { [k: number]: readonly string[] }; // Purple-Red-Green
const schemePuOr: { [k: number]: readonly string[] }; // Purple-Orange
const schemeRdBu: { [k: number]: readonly string[] }; // Red-Blue
const schemeRdGy: { [k: number]: readonly string[] }; // Red-Gray
const schemeRdYlBu: { [k: number]: readonly string[] }; // Red-Yellow-Blue
const schemeRdYlGn: { [k: number]: readonly string[] }; // Red-Yellow-Green
const schemeSpectral: { [k: number]: readonly string[] }; // Spectral rainbow
/**
* Interpolators for continuous diverging schemes
*/
const interpolateBrBG: (t: number) => string;
const interpolatePiYG: (t: number) => string;
const interpolatePRGn: (t: number) => string;
const interpolatePuOr: (t: number) => string;
const interpolateRdBu: (t: number) => string;
const interpolateRdGy: (t: number) => string;
const interpolateRdYlBu: (t: number) => string;
const interpolateRdYlGn: (t: number) => string;
const interpolateSpectral: (t: number) => string;Usage Examples:
import { schemeRdYlBu, interpolateRdYlBu, scaleDiverging } from "d3";
// Discrete diverging colors
const divergingScale = d3.scaleOrdinal(schemeRdYlBu[9]);
// Continuous diverging scale
const temperatureScale = d3.scaleDiverging(interpolateRdYlBu)
.domain([-10, 0, 10]); // Cold-neutral-hot
temperatureScale(-10); // Red (cold)
temperatureScale(0); // Yellow (neutral)
temperatureScale(10); // Blue (hot)Color schemes for cyclical data like time of day, compass directions, or periodic phenomena.
/**
* Cyclical/rainbow interpolators for periodic data
*/
const interpolateRainbow: (t: number) => string; // Full spectrum
const interpolateSinebow: (t: number) => string; // Sine-based rainbow
const interpolateTurbo: (t: number) => string; // Perceptually uniform rainbow
const interpolateViridis: (t: number) => string; // Purple-blue-green-yellow
const interpolateMagma: (t: number) => string; // Black-purple-pink-yellow
const interpolateInferno: (t: number) => string; // Black-red-orange-yellow
const interpolatePlasma: (t: number) => string; // Purple-pink-yellow
const interpolateWarm: (t: number) => string; // Black-red-yellow-white
const interpolateCool: (t: number) => string; // Cyan-magenta
const interpolateCubehelixDefault: (t: number) => string; // Cubehelix spiralUsage Examples:
import { interpolateRainbow, interpolateViridis, scaleSequential } from "d3";
// Hour of day (cyclical)
const timeScale = d3.scaleSequential(interpolateRainbow)
.domain([0, 24]);
// Scientific data (perceptually uniform)
const dataScale = d3.scaleSequential(interpolateViridis)
.domain([0, 100]);
// Heat map
const heatScale = d3.scaleSequential(interpolatePlasma)
.domain([0, 1]);Create custom color schemes using D3's interpolation system.
/**
* Create custom color interpolator from color list
* @param colors - Array of color strings to interpolate between
* @returns Interpolation function (t: number) => string
*/
function interpolateRgbBasis(colors: string[]): (t: number) => string;
/**
* Create custom color interpolator with specified positions
* @param colors - Array of [position, color] tuples
* @returns Interpolation function (t: number) => string
*/
function interpolateRgbBasisClosed(colors: string[]): (t: number) => string;
/**
* Piecewise color interpolation
* @param interpolate - Base interpolation function
* @param values - Array of values to interpolate between
* @returns Piecewise interpolation function
*/
function piecewise<T>(interpolate: (a: T, b: T) => (t: number) => T, values: T[]): (t: number) => T;Usage Examples:
import { interpolateRgbBasis, piecewise, interpolateRgb } from "d3";
// Custom brand colors
const brandInterpolator = interpolateRgbBasis([
"#003f5c", // Dark blue
"#58508d", // Purple
"#bc5090", // Pink
"#ff6361", // Coral
"#ffa600" // Orange
]);
const brandScale = d3.scaleSequential(brandInterpolator)
.domain([0, 100]);
// Piecewise interpolation
const customInterpolator = piecewise(interpolateRgb, [
"#ff0000", // Red at 0
"#00ff00", // Green at 0.5
"#0000ff" // Blue at 1
]);Helper functions for working with color schemes programmatically.
/**
* Get all available color scheme names
* @returns Array of scheme name strings
*/
function schemeNames(): string[];
/**
* Get color scheme by name and size
* @param name - Scheme name (e.g., "Blues", "Set1")
* @param size - Number of colors (3-11 for most schemes)
* @returns Color array or interpolator function
*/
function scheme(name: string, size?: number): string[] | ((t: number) => string);
/**
* Check if a scheme supports a given size
* @param name - Scheme name
* @param size - Desired number of colors
* @returns Whether the scheme supports this size
*/
function schemeSupportsSize(name: string, size: number): boolean;