Lab Color Picker

100%

Lab Color Picker

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 8, 2015

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

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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…

RGB Color Picker

This interactive RGB color picker displays three horizontal channel strips (red, green, blue) as Canvas gradients, each with a draggable marker. The current color is composed from the selected values in all three channels, shown as a white/black marker line. The visualization uses D3 v3 with `d3.scale.linear`, `d3.interpolateRound`, `d3.svg.axis`, and the `d3.behavior.drag` interaction. Each strip is rendered with `createImageData` and `putImageData` on the Canvas, while SVG axes provide tick labels.

Mmbostock

81% match

Loading thumbnail…

LAB Color Space

The example visualizes the LAB color space by rendering a grid of colored rectangles with fixed lightness (L=50) and varying A and B components along the X and Y axes, producing a perceptually uniform color field. A black circle marks the boundary of the selected A/B radius, and small circles show colors chosen at evenly spaced angles along that circle. The code uses D3.js (version 3.5) and lodash to generate the grid, while a custom `generateColors` function picks distinct colors for 1 to 20 categories, cycling through them every second via `setInterval`. The background fills use `d3.lab`, and the small circles are updated with enter/exit selections.

CCurran Kelleher

80% match

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

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

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

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

75% match