Accessible Color Pickers

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!