Export Image
Export Code

Perceptual Color Picker

Curran Kelleher

0 views in last 90 days
Last edited Oct 09, 2025
Created on Aug 14, 2025

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