Skip to main content
100%

Colorspaces

✓ Published0🌍 Public
AAjayyy
Last edited Mar 6, 2019
Created on Mar 6, 2019

This visualization uses 500×500 colored pixels to represent the HCL color space across a canvas. It plots hue along the horizontal axis and lightness along the vertical axis, with chroma fixed at 100, showing the full gamut of colors as a smooth, continuous gradient. The code iterates through each pixel coordinate, calling `d3.hcl` from the d3-color library to generate the corresponding color, and draws it on a Canvas element via `d3.range` loops. The example relies on D3 v4 alpha and the d3-scale-chromatic module to provide the color interpolation.

AI-generated description

Examples

API References

forked from <a href='http://bl.ocks.org/alecburch/'>alecburch</a>'s block: <a href='http://bl.ocks.org/alecburch/f822e4381d4124ce199bf72652897274'>Colorspaces</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Colorspaces

This visualization maps the HCL color space onto a 960-by-500 pixel canvas, with hue varying horizontally and lightness varying vertically at full chroma. Each pixel is drawn individually using Canvas’s `fillRect` method, and the color is computed via `d3.hcl()` from the d3-color API. The result is a smooth gradient that reveals the perceptual structure of the HCL space, where horizontal bands show hue transitions and vertical shifts alter lightness. The code uses `d3.range()` to iterate over every pixel, and the page includes the d3-hsv and d3-scale-chromatic libraries, though only the HCL constructor is exercised here.

AAlec Burch
94% 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
88% match
Loading thumbnail…

color scale

This example displays a two-dimensional color gradient across a 960-by-500 canvas, with hue and lightness varying along the horizontal and vertical axes. The code uses D3 v4’s `d3.hcl` color space to generate colors, then paints each pixel individually via the Canvas 2D API’s `fillRect`. It also loads the d3-hsv and d3-scale-chromatic modules for extended color support, though only HCL values are used in the final rendering. The nested `d3.range` loops iterate over every x and y coordinate to fill the canvas with a smooth, continuous color field.

AAlec Burch
84% 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
84% 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…

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
80% match
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
79% match
Loading thumbnail…

Perceptual Color Picker

This interactive color picker demonstrates the HCL (Hue-Chroma-Luminance) color space for perceptually uniform color selection. Three sliders adjust hue, chroma, and luminance, while gradient canvas backgrounds show how each parameter affects the final color. The interface converts between HCL and hex values bidirectionally, with a preview box and text input for direct hex entry. The visualization uses D3.js v5 for color space conversions and Topologica for reactive data flow, while rendering gradient backgrounds to canvas and checking color gamut validity with D3's displayable method.

CCurran Kelleher
79% match