What it does
Coloris adds a free, MIT-licensed colour picker to HTML input fields. It offers themes, swatches, alpha controls and several output formats, with documented keyboard and screen-reader support.
Include its script and stylesheet, then add data-coloris to the intended inputs. Configure the common theme and format, and use selector-based overrides where fields need different swatches or transparency settings. The onChange callback receives the selected colour and its input field.
Several behaviours affect integration. Disabling alpha removes transparency from existing values; enabling the format toggle changes format handling to automatic. Virtual instances share one physical picker, so separate fields cannot display multiple pickers simultaneously. Accessibility labels are configurable globally, including translated control descriptions.
Coloris is free under the MIT licence. Retain the licence notice when redistributing the code.
Strengths
- Field-specific overrides can share a common configuration.
- Screen-reader labels can be customized or translated.
- The callback identifies the field being edited.
Watch out for
- Only one picker can be displayed at a time.
- Disabling alpha strips existing transparency values.
Best for
- Forms with several colour fields and differing format requirements
Sources
- Coloris features and setup (Oct 27, 2026)
- Coloris options, accessibility and virtual instances (Oct 27, 2026)
- Coloris MIT licence (Oct 27, 2026)