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:
Implementaion
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:
Output-formats
- cmyk
- hex (default)
- hsl
- rgb
Size
- full (default)
- micro (no alpha-channel, use for
<input type="color">
):
- mini:
And, if you want to use the trigger (the <input>
itself) as preview, the value "update" will hide the preview of the Color Picker:
Examples:
<input type="text" data-colorpicker="rgb mini">
<input type="text" data-colorpicker="hsl micro update">
Keyboard Shortcuts:
<input>
-trigger:
-
ArrowDown
: Open ColorPicker. -
Escape
: Close ColorPicker.
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!