Automatic Color Schemes

100%

Automatic Color Schemes

✓ Published3🌍 Public

Last edited Oct 9, 2025

Created on Aug 24, 2024

This visualization demonstrates how color schemes can be automatically generated from configurable parameters for hue, saturation, and luminance. Nine distinct schemes are displayed, each containing seven colors that transition from dark to light via cubic interpolation in Cubehelix color space using D3’s `interpolateCubehelix`. The rendered output shows both circles and rectangles filled with the generated colors, with the `d3.cubehelix` function constructing endpoint colors based on the specified hue, saturation, and luminance bounds. The code selects numeric parameters from a CSV file, specifying the active scheme index.

AI-generated description

An example of automatically deriving color schemes from configurations of hues, luminance, and saturation.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Automatic Color Schemes

This example shows how color schemes can be automatically generated from configurations of hue, saturation, and luminance, displayed as vertical gradient bars across the screen. The code uses `d3.cubehelix` to define dark and light endpoints for each hue, then `d3.interpolateCubehelix` and `d3.range` to create seven-step gradients from those endpoints. It renders the resulting colors as adjacent SVG rectangles, with each rect slightly overlapping to produce seamless transitions. A CSV file provides a selected index, though the current code only reads it without affecting the visible output.

HHaili0109

85% match

Loading thumbnail…

Bivariate Color Schemes

This example demonstrates bivariate color schemes for choropleth maps through a grid of color swatches. The visualization generates two color ramps using the `d3.cubehelix` function, each defined by a hue angle with varying luminance values, then interpolates between the two ramps with `d3.interpolateRgb` and `d3.interpolateCubehelix` to build a matrix of 25 colors. The resulting matrix is rendered as SVG rectangles, with the color of each cell reflecting the combined weight of two independent data dimensions. The code includes adjustable constants for color count, hue range, saturation, and luminance values.

CCurran Kelleher

79% match

Loading thumbnail…

colorPalettes

This interactive visualization showcases color palettes generated by rotating the hue of a base color. The view displays six columns, each containing nine shades that transition from light to dark via a linear scale, alongside a row of original base colors. Users can click any color square to copy its hex value to the clipboard, which triggers a temporary tooltip confirming the action. Built with d3.v7, the SVG graphic uses d3.hsl to manipulate hue, d3.scaleLinear to interpolate lightness and saturation, and d3.select for DOM interactions.

GGabriel Ing

72% match

Loading thumbnail…

list d3 color schemes

This example displays a list of color scheme names from the d3-scale-chromatic library, each with an accompanying note about the range of color counts it supports. The page uses `d3.select` to append an `h4` heading and a `div` for each scheme, dynamically reading the `range()` function from each generated scheme to display valid values. The schemes are defined directly in a bundled JavaScript file as hex strings, and the code relies on d3.v4’s selection and append methods for DOM manipulation.

PPhilippe Rivière

72% match

Loading thumbnail…

TODO

This interactive tool visualizes color scales by plotting Bézier curves through multiple color spaces, including RGB, HSL, HCL, Lab, and Cubehelix. Users can edit input colors, adjust the number of output stops, and click to switch between basis and linear curve interpolation across each space’s channels. The page renders using SVG and includes animated draggable points on channel charts, with the current state shared via the URL. Forked from d3-based code by 1wheel, it addresses issues in Gregor Aisch’s Color Palette Helper for diverging scales.

11wheel

72% match

Loading thumbnail…

color palette generator

This example presents a simple color palette generator using D3.js (v7) within an HTML page. It displays a circle and a series of five rectangles, each filled with a color interpolated along a linear scale from orange to black, using a gamma-corrected RGB interpolation with a value of 1.5. The visualization is rendered as SVG, with shapes positioned and colored based on the numeric scale values, demonstrating D3's `scaleLinear` and `interpolateRgb` APIs.

Ssukumardunn

72% match

Loading thumbnail…

Color luminance and saturation

Two horizontal strips of small squares demonstrate how the sequential color scales `d3.interpolateGreys` and `d3.interpolateOranges` change with luminance and saturation. The top strip shows four gray shades, the bottom four orange shades, each sampled at equal intervals from zero to four via `d3.scaleSequential`. Rendered as SVG rectangles in d3.v4, the example uses `d3-color` and `d3-scale-chromatic` to produce the fills, with the squares positioned using `d3.scaleLinear`. The visual contrast between the monochromatic gray ramp and the saturated orange ramp highlights how lightness and color intensity vary independently across each scale's domain.

TTaraZhu

72% match

Loading thumbnail…

Cubehelix II

Six color ramps illustrate variations of the Cubehelix color scheme, including reversed, hue-shifted, diverging, and a perceptual rainbow approximation. Each ramp renders as a horizontal gradient on individual Canvas elements, with pixel colors computed via the `d3.scale.cubehelix` plugin and `d3.interpolateCubehelix`. A polylinear scale with multiple domain points creates the diverging ramps. The labels and layout are positioned absolutely via D3 selections and ordinal scales.

Mmbostock

71% match