Sequential single-hue color schemes progress through variations of a single hue family, providing intuitive color gradients for ordered data. These schemes are ideal for representing data intensity, density, or magnitude within a consistent color theme.
Blue color progression from light to dark blue, ideal for water-related data or cool-toned visualizations.
/**
* Blues continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=very light blue, 1=dark blue
* @returns Hex color string
*/
function interpolateBlues(t: number): string;
/**
* Blues discrete color arrays
* Index [n-3] provides array of n blue colors (n = 3 to 9)
*/
const schemeBlues: string[][];Usage Examples:
import { interpolateBlues, schemeBlues } from "d3-scale-chromatic";
import { scaleSequential, scaleQuantize } from "d3-scale";
// Continuous blue scale for water depth
const depthScale = scaleSequential(interpolateBlues)
.domain([0, 100]); // meters
// 5-class discrete blue scale
const categoryScale = scaleQuantize()
.domain([0, 1000])
.range(schemeBlues[5]);
// Usage
const shallowColor = depthScale(10); // Light blue
const deepColor = depthScale(90); // Dark blueGreen color progression from light to dark green, perfect for vegetation, growth, or nature-themed data.
/**
* Greens continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=very light green, 1=dark green
* @returns Hex color string
*/
function interpolateGreens(t: number): string;
/**
* Greens discrete color arrays
* Index [n-3] provides array of n green colors (n = 3 to 9)
*/
const schemeGreens: string[][];Grayscale progression from light to dark grey, ideal for neutral visualizations and accessibility.
/**
* Greys continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=very light grey, 1=dark grey
* @returns Hex color string
*/
function interpolateGreys(t: number): string;
/**
* Greys discrete color arrays
* Index [n-3] provides array of n grey colors (n = 3 to 9)
*/
const schemeGreys: string[][];Purple color progression from light to dark purple, suitable for luxury, premium, or abstract data themes.
/**
* Purples continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=very light purple, 1=dark purple
* @returns Hex color string
*/
function interpolatePurples(t: number): string;
/**
* Purples discrete color arrays
* Index [n-3] provides array of n purple colors (n = 3 to 9)
*/
const schemePurples: string[][];Red color progression from light to dark red, ideal for heat, intensity, or alert-themed visualizations.
/**
* Reds continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=very light red, 1=dark red
* @returns Hex color string
*/
function interpolateReds(t: number): string;
/**
* Reds discrete color arrays
* Index [n-3] provides array of n red colors (n = 3 to 9)
*/
const schemeReds: string[][];Orange color progression from light to dark orange, perfect for warm, energetic, or autumn-themed data.
/**
* Oranges continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=very light orange, 1=dark orange
* @returns Hex color string
*/
function interpolateOranges(t: number): string;
/**
* Oranges discrete color arrays
* Index [n-3] provides array of n orange colors (n = 3 to 9)
*/
const schemeOranges: string[][];import {
interpolateReds,
interpolateBlues,
interpolateGreens
} from "d3-scale-chromatic";
import { scaleSequential } from "d3-scale";
// Temperature visualization (using reds for heat)
const temperatureScale = scaleSequential(interpolateReds)
.domain([0, 40]); // Celsius
// Water depth (using blues)
const bathymetryScale = scaleSequential(interpolateBlues)
.domain([0, 200]); // meters
// Forest coverage (using greens)
const forestScale = scaleSequential(interpolateGreens)
.domain([0, 100]); // percentage
// Usage
const coldTemp = temperatureScale(5); // Light red
const hotTemp = temperatureScale(35); // Dark red
const shallowWater = bathymetryScale(10); // Light blue
const deepWater = bathymetryScale(180); // Dark blueimport {
schemeReds,
schemeGreys,
schemePurples
} from "d3-scale-chromatic";
import { scaleQuantile, scaleThreshold } from "d3-scale";
// Income levels using 7 shades of green
const incomeScale = scaleQuantile()
.domain(incomeData)
.range(schemeGreens[7]);
// Risk levels using 5 shades of red
const riskScale = scaleThreshold()
.domain([0.2, 0.4, 0.6, 0.8])
.range(schemeReds[5]);
// Grayscale for neutral data
const neutralScale = scaleQuantize()
.domain([0, 100])
.range(schemeGreys[6]);import {
interpolateReds,
interpolateBlues,
interpolateOranges,
interpolateGreens
} from "d3-scale-chromatic";
// Fire risk map
const fireRiskScale = scaleSequential(interpolateReds)
.domain([0, 10]);
// Precipitation map
const rainScale = scaleSequential(interpolateBlues)
.domain([0, 500]); // mm annually
// Economic activity (warm colors suggest activity)
const economicScale = scaleSequential(interpolateOranges)
.domain([minActivity, maxActivity]);
// Environmental health
const environmentScale = scaleSequential(interpolateGreens)
.domain([0, 100]); // environmental scoreimport { interpolateGreys, schemeGreys } from "d3-scale-chromatic";
// High-contrast grayscale for accessibility
const accessibleScale = scaleSequential(interpolateGreys)
.domain([minValue, maxValue]);
// Print-safe discrete scale
const printScale = scaleQuantize()
.domain([0, 100])
.range(schemeGreys[5]);
// Combine with patterns for maximum accessibility
function createAccessibleVisualization(data) {
const colorScale = scaleSequential(interpolateGreys)
.domain(d3.extent(data));
// Use both color and pattern/texture for redundant encoding
return data.map(d => ({
value: d,
color: colorScale(d),
pattern: d > 50 ? 'diagonal-lines' : 'dots'
}));
}import {
interpolateReds,
interpolateBlues,
interpolateGreens
} from "d3-scale-chromatic";
// Multi-series data with different hue families
const seriesColors = {
temperature: scaleSequential(interpolateReds).domain([0, 40]),
humidity: scaleSequential(interpolateBlues).domain([0, 100]),
vegetation: scaleSequential(interpolateGreens).domain([0, 100])
};
// Usage in multi-variable visualization
function colorByVariable(value, variable) {
return seriesColors[variable](value);
}All single-hue schemes provide discrete color arrays with consistent structure:
// Example: schemeBlues structure
schemeBlues[0] // 3 colors: [light_blue, medium_blue, dark_blue]
schemeBlues[1] // 4 colors: [very_light, light, medium, dark]
schemeBlues[2] // 5 colors: [very_light, light, medium, medium_dark, dark]
schemeBlues[3] // 6 colors: [very_light, light, light_medium, medium, medium_dark, dark]
// ... up to schemeBlues[6] for 9 colors
// Access n colors using index [n-3]
const fiveBlues = schemeBlues[2]; // 5 blue colors
const nineBlues = schemeBlues[6]; // 9 blue colors// Pre-compute color arrays for repeated use
const temperatureColors = d3.range(0, 41).map(temp =>
interpolateReds(temp / 40)
);
// Fast lookup function
function getTemperatureColor(temp) {
return temperatureColors[Math.floor(temp)];
}
// Cached discrete schemes
const colorCache = new Map();
function getCachedColors(scheme, classCount) {
const key = `${scheme.name}-${classCount}`;
if (!colorCache.has(key)) {
colorCache.set(key, scheme[classCount - 3]);
}
return colorCache.get(key);
}