HCL Interpolation

100%

HCL Interpolation

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 3, 2015

This example demonstrates color interpolation in the CIELCH color space, showing how hue transitions along the shortest path between two colors. An animated gradient sweeps horizontally across a canvas, with the starting and ending hues continuously shifting over time. The visualization uses the `d3.interpolateHcl` function from the d3-color module and the `d3.timer` function from the d3-transition module to drive the animation and render the gradient pixels with Canvas `putImageData`.

AI-generated description

A simple test of interpolateHcl from the d3-color module, animated with timer from the d3-transition module. Note that interpolateHcl chooses the shortest path between two hues, and the change in hue is thus always less than 180°; use interpolateHclLong to take the long path.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

HCL Interpolation II

A canvas displays a single horizontal strip of animated color that cycles through hues. The strip updates every frame using `d3.timer`, computing a gradient from one HCL color to another with `d3.interpolateHclLong`. The code writes RGB values into an `ImageData` buffer and draws it with `putImageData`, showing the long path between hues 360° apart.

Mmbostock

89% match

Loading thumbnail…

Cubehelix Interpolation

This example demonstrates color interpolation in Cubehelix color space by rendering a horizontal gradient across a 960-pixel canvas. The visualization uses d3-color, specifically the `d3.cubehelix` interpolation method, to smoothly transition between colors along the visible spectrum. The single-row canvas is stretched vertically via CSS to create a tall, banded display. The code implements the full d3-color library inline, including color parsing, RGB and HSL conversions, and the Cubehelix interpolation logic, all rendered through the Canvas 2D API without additional libraries.

Mmbostock

83% match

Loading thumbnail…

Cubehelix Interpolation II

A single-row canvas at 960 by 1 pixels renders a continuous horizontal color gradient, testing how interpolation behaves in Cubehelix color space. The code uses D3’s color module to compute the transition between two endpoint colors, drawing each column to the canvas with the `fillRect` method. This demonstrates how the Cubehelix model’s hue, saturation, and lightness axes produce a smooth, perceptually balanced ramp.

Mmbostock

79% match

Loading thumbnail…

HCL Color Space

A two-dimensional cross section of the HCL color space maps hue from 0° to 360° vertically and luminance from 100 to 0 horizontally, with chroma held constant at 50. The visualization uses d3.hcl to compute RGB values for each pixel, writing them directly to a Canvas `ImageData` buffer. The resulting gradient reveals how perceived color and brightness shift across the HCL space, rendered at a 960×500 resolution.

Mmbostock

78% 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

77% 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

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

74% match

Loading thumbnail…

Colors Interpolation

Three color interpolation scales demonstrate how D3.js v4 maps numeric domains to color ramps, rendered as rows of circles in SVG. The first scale interpolates from red to green using two stops, the second adds a middle yellow stop, and the third uses eight discrete stops for a finer gradient. Each scale employs `d3.scaleLinear` with the `d3.interpolateHcl` color interpolator, while the circles are generated programmatically from a simple data array. The example illustrates how interpolation choice and stop density affect perceived color transitions.

EEfratVil

74% match