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
- Adjust sliders to change hue, chroma, and luminance
- View the color in the preview box
- Copy the hex value from the text field
- 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: