Skip to main content
SimilarExport ZIP
100%

Perceptual Color Picker

✓ Published0🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Aug 14, 2025

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.

AI-generated description

Perceptual Color Picker

A web-based color picker that uses the HCL (Hue-Chroma-Luminance) color space for perceptually uniform color selection. Unlike traditional RGB or HSL pickers, HCL provides more intuitive control over color appearance.

Features

  • Perceptual color space: Uses D3's HCL color model for better visual control
  • Interactive sliders: Real-time visual feedback with gradient backgrounds
  • Gamut awareness: Automatically indicates out-of-gamut colors
  • Hex output: Easy copy-paste of color values
  • Bidirectional editing: Edit via sliders or paste hex codes
  • Responsive design: Works on desktop and mobile devices

What is HCL?

HCL (Hue-Chroma-Luminance) is a perceptually-based color space:

  • Hue (0-360°): The color type (red, blue, green, etc.)
  • Chroma (0-100): The color intensity or saturation
  • Luminance (0-150): The perceived brightness

This makes it easier to create harmonious color palettes and maintain consistent perceived brightness across different hues.

Usage

Simply open index.html in a modern web browser. No build process or server required.

Controls

  1. Adjust sliders to change hue, chroma, and luminance
  2. View the color in the preview box
  3. Copy the hex value from the text field
  4. Paste a hex color into the text field to reverse-convert to HCL

The gradient backgrounds on each slider show how that parameter affects the final color while holding the other two constant.

Technical Details

Dependencies

Color Gamut

Not all HCL combinations produce valid RGB colors. The picker:

  • Displays gray for out-of-gamut combinations
  • Automatically clamps values to valid ranges
  • Uses D3's .displayable() method to check gamut validity

Browser Compatibility

Works in all modern browsers that support:

  • ES6 JavaScript
  • HTML5 Canvas
  • CSS3 range input styling

Customization

You can modify the color space ranges by editing the max attributes on the range inputs:

MIT Licensed

Similar vizzes

Loading thumbnail…

Perceptual Color Picker Prototype

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.

CCurran Kelleher
89% 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
87% 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…

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
82% 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
81% 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
80% 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
79% 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
77% match