100%

TODO

✓ Published0🌍 Public

Last edited Aug 10, 2021

Created on Jul 20, 2021

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.

AI-generated description

Based on https://gka.github.io/palettes/

Great tool, but gets wonky with diverging color scales

https://gka.github.io/palettes/#/99|d|002854,a1ffe1,b2b2b2|b2b2b2,f47e2a,9e005c|1|1

https://gka.github.io/palettes/#/99|d|00429d,96ffea,cccccc|cccccc,ff005e,93003a|1|1

https://github.com/d3/d3-color

rgb

hsl

hcl

lab

cubehelix

hsv

hsi

TODO

range round

x input colors

x color band for each

x state in url

x output colors

x link to colormap

colorblind
black boxes on safari
tidy code

Similar vizzes

Loading thumbnail…

Cubehelix Color Picker

This example presents an interactive Cubehelix color picker with three horizontal channel strips for hue, saturation, and lightness. Each strip renders a gradient swatch on a canvas element with an SVG axis below it, using d3.svg.axis to label the value ranges. The code relies on d3-color’s `cubehelix` and `hsl` functions to convert channel values into displayable colors, drawing the gradient bars programmatically via canvas `getImageData`. The interface allows direct manipulation of each channel to explore the three-dimensional color space.

Mmbostock

76% match

Loading thumbnail…

ColorBrewer Spline

This example converts the eleven-color ColorBrewer “PiYG” scheme into a continuous color scale by interpolating in RGB color space using uniform one-dimensional b-splines. It shows a set of circles representing the original discrete colors, with three channels plotted as red, green, and blue curves, alongside a canvas gradient that visualizes the resulting smooth interpolation. Using d3-scale-chromatic for the source colors, the code relies on d3.interpolateRgbBasis and d3.interpolateBasis to generate the continuous scale, while rendering the curves with SVG paths and the gradient via Canvas createImageData.

Mmbostock

76% match

Loading thumbnail…

Gist ac01c91d8c9c9dd4b825

This example uses D3.js and the HTML5 Canvas API to render an interactive color picker that visualizes the HCL (Hue-Chroma-Lightness) color space. It shows a 500×500 pixel grid where the horizontal axis maps hue from 360 to 0 degrees, the vertical axis maps lightness from 0 to 100, and chroma is fixed at 35. The code uses `d3.scale.linear` to map pixel coordinates to color values, converts HCL to RGB via `d3.hcl().rgb()`, and writes the results directly to image data with `createImageData` and `putImageData`. Moving the mouse over the canvas triggers `getImageData` to read the pixel color and display its hex value in a label, demonstrating direct pixel manipulation without SVG or DOM elements.

CCaged

76% match

Loading thumbnail…

HCL Color Picker

This example presents an interactive HCL color picker with three horizontal channel strips for hue, chroma, and lightness. Each strip displays a gradient of colors, and the user can drag a marker along any channel to adjust that component, with the current color shown as a white pixel and its predecessor as black. The visualization uses D3 v3 with SVG axes for channel scales and Canvas `createImageData` and `putImageData` to render the per-pixel gradients. The HCL color is converted to RGB via `d3.rgb`, and dragging is handled with `d3.behavior.drag`.

Mmbostock

75% match

Loading thumbnail…

ColorBrewer Spline II

This example visualizes the differences between color interpolation methods by comparing splines in L\*a\*b\* color space to a direct linear interpolation. A horizontal canvas strip renders a gradient produced using `d3.interpolateBasis` on L\*a\*b\* channels, while an SVG chart plots the individual L, a, and b channel curves as both smooth basis splines and dashed linear segments. The code uses d3.lab, d3.interpolateBasis, and d3.line, with circular swatches showing the original PiYG palette colors at corresponding positions along the x-axis.

Mmbostock

75% match

Loading thumbnail…

Lab Color Picker

This interactive tool visualizes the CIELAB color space by displaying three horizontal gradient strips, one for each of the L, a, and b channels. Dragging a marker along a strip adjusts that channel’s value, and all three strips update to show the resulting color as a vertical slice through the space. The example uses d3.v3 for scales, axes, and drag behavior, with the gradients rendered to Canvas via `createImageData` and `putImageData`, converting between Lab and RGB using `d3.lab` and `d3.rgb`.

Mmbostock

75% match

Loading thumbnail…

Lab and HCL Color Spaces

Four horizontal gradients compare color interpolation across RGB, HSL, Lab, and HCL color spaces. Each row renders a 960-pixel-wide linear scale transitioning from pale yellow to dark blue, using `d3.scale.linear` with the respective `d3.interpolateRgb`, `d3.interpolateHsl`, `d3.interpolateLab`, or `d3.interpolateHcl` method. The code draws each gradient into a 1-pixel-high Canvas via `putImageData`, then stretches it vertically for display. This juxtaposition reveals how perceptually uniform Lab and HCL spaces avoid the muddy midtones visible in RGB and HSL interpolation.

Mmbostock

74% match

Loading thumbnail…

Cubehelix Color Picker

The Cubehelix Color Picker displays three horizontal channels—hue, saturation, and lightness—as gradient strips, each paired with an axis. It uses D3.js to render the axes and SVG structure, while Canvas draws the color gradients. The visualization demonstrates the cubehelix color space by letting viewers compare how each channel varies independently, with the final color resulting from the combination of all three channels.

CCaged

74% match