HCL Color Space

100%

HCL Color Space

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 4, 2015

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.

AI-generated description

A two-dimensional cross section of the HCL color space: from top to bottom, hue ranges from 0° to 360°; from left to right, luminance ranges from 100 to 0. Chroma is a constant 50.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Cubehelix Color Space

A two-dimensional cross section of the Cubehelix color space shows hue from 0° to 360° along the vertical axis and lightness from 1 to 0 along the horizontal, with saturation held constant at 1. The canvas renders these colors by mapping each pixel coordinate to a Cubehelix value and converting it to RGB using the d3-color library. The visualization demonstrates the full gamut of the color space through a continuous gradient.

Mmbostock

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

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

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

81% match

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

80% match

Loading thumbnail…

HCL Interpolation

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`.

Mmbostock

78% match

Loading thumbnail…

Rainbow Luminance

Two horizontal bands compare the HSL rainbow to its luminance-only counterpart. The top band uses `d3.hsl` to produce the full rainbow, while the bottom band converts that color to HCL via `d3.hcl` and sets chroma to zero, isolating perceived lightness. Both bands are drawn as 1-pixel-wide Canvas images stretched vertically, generated with `createImageData` and `putImageData`, and labeled to the left of each strip. The visualization demonstrates that the HSL rainbow’s brightness varies widely across hues, making it unsuitable for data encoding.

Mmbostock

76% match

Loading thumbnail…

HSL Color Picker

Three horizontal color-gradient strips display the hue, saturation, and lightness channels of an HSL color model. Dragging any strip updates the selected color value, and each strip re-renders to show the resulting color variation. The visualization uses D3.js for axis rendering and drag behavior, while Canvas `putImageData` writes per-pixel RGB values for the gradients.

Mmbostock

76% match