Most of the Color Pickers I've seen and used, haven't been accessible. They've been touch-friendly, but not keyboard-friendly.
So, I set out to create a Color Picker with range-sliders, which are both touch- and keyboard-friendly (using arrow-keys).
For that, the hsl-format (hue, saturation, lightness) is perfect. "Hue" is the recognisable "rainbow", also often seen as a color wheel.
"Saturation" and "Lightness" are normally "merged" into two overlapping gradients with a single x/y-selector.
Here, they appear as two individual sliders:
I recommend using an
<input type="text">, since the
value of this type supports any string.
<input type="color"> only supports a 7-char hex-code.
The Color Picker can be configured with some options as well:
- hex (default)
- full (default)
- micro (no alpha-channel, use for
And, if you want to use the trigger (the
<input> itself) as preview, the value "update" will hide the preview of the Color Picker:
<input type="text" data-colorpicker="rgb mini">
<input type="text" data-colorpicker="hsl micro update">
ArrowDown: Open ColorPicker.
Escape: Close ColorPicker.
Arrow Keys: Change value on selected input.
Enter: Close ColorPicker, set value.
Escape: Close ColorPicker, do not set value.
Tab: Go to next element. When tabbing away from last input, the ColorPicker wll close and re-focus on the input/trigger.
And finally, here's a CodePen-demo:
Thanks for reading!