Perceptual Color Picker Prototype

100%

Perceptual Color Picker Prototype

✓ Published0🌍 Public

Last edited Aug 14, 2025

Created on Jun 24, 2019

Forked from Topologica.js Color Picker Example

This interactive prototype demonstrates picking colors in the HCL color space, where hue, chroma, and luminance sliders adjust a background color while a text field displays the current RGB hex value. Built with D3.js v5 and Topologica for reactive data flow, the visualization uses `d3.hcl` to convert slider inputs into color strings and updates the page background and form fields in real time. Users can also paste a hex color into the text field to sync the sliders, enabling perceptual adjustments like changing hue while preserving luminance. The sliders are bound via the `input` event, and Topologica manages the dependencies between color components, slider positions, and output display.

AI-generated description

This color picker uses the HCL Color Space to support picking colors to alignn with human perception of color.

Example workflow: Create a new color that has the same luminance as an existing one but a different hue by:

Pasting the color into the text field
Dragging the Hue slider

Inspired by HCL Color Picker.

MIT 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

83% match

Loading thumbnail…

Topologica.js Color Picker Example

Three range sliders control the red, green, and blue components of a color, which updates the page’s background in real time. Built with D3 v5 for DOM selection and event handling, it uses Topologica.js to define a reactive data flow graph where the color string and background style are computed from slider values. Each slider input triggers a state update, demonstrating how Topologica manages dependencies between data and visual output.

CCurran Kelleher

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

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

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

74% match

Loading thumbnail…

Hello Topologica.js!

Three range sliders for red, green, and blue each send their current value into a Topologica.js state graph, which recomputes a CSS color string and applies it as the page background. The example relies on D3 v5's `select` and `selectAll` to bind slider input events to state updates, demonstrating Topologica’s dependency-driven propagation for reactive data visualization without a chart.

CCurran Kelleher

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

73% match

Loading thumbnail…

Color Range slider

This example demonstrates an interactive color range slider that dynamically adjusts the displayed hue. Users manipulate the slider to select a specific color value, which updates the visualization in real time. The implementation uses React for component state and rendering, while D3.js (d3.v5) manages the slider’s input handling and color scale transitions. The project references the React Starter template and uses a minimal HTML page with embedded D3 and custom CSS for styling. The color transitions are driven via D3’s interpolation methods, though the exact rendering target is not specified beyond the slider interaction.

SShweta-tech

72% match