mdbassit/Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.

Summary

Coloris is a lightweight JavaScript color picker written in vanilla ES6 with no dependencies. It converts text inputs into color fields via a single HTML attribute and ships with themes, dark mode, opacity, swatches, and screen-reader accessibility. The project is MIT licensed and targets modern browsers, with no Internet Explorer support.

What it is useful for

• Adding a color picker to web forms without adopting a framework or pulling in third-party libraries
• Projects that need accessible UI, since the screen-reader strings are exposed through the a11y option and can be translated
• Interfaces that require multiple color representations, including hex, rgb(), hsl(), auto, and mixed formats, plus an optional alpha channel
• Apps that mix form styles: four themes (default, large, polaroid, pill), light or dark mode, and runtime configuration that can simulate per-field behavior
• Touch-driven UIs, where touch support is documented

How engineers can use it

The documented quick start is to include the shipped stylesheet and script and add data-coloris to any input:

<link rel="stylesheet" href="coloris.min.css"/>
<script src="coloris.min.js"></script>
<input type="text" data-coloris>

Behavior is configured by calling Coloris({...}) with an options object; for example, Coloris({ themeMode: 'dark', alpha: false }) switches the picker to dark mode and disables opacity. The same call can be invoked repeatedly to change settings at runtime, which the README suggests for simulating per-field behavior, or you can register overrides per CSS selector using Coloris.setInstance('.my-fields', { ... }). Any options not set by an instance inherit the global values.

Events on the active input include open, close, input, and change, and a global coloris:pick event fires on document with the picked color in event.detail.color. For projects that prefer a package manager, the README notes that an NPM and TypeScript distribution is maintained in a separate fork by a contributor.

To build from source, the documented steps are git clone, npm install, and npm run build, which produces minified and full copies in dist. A live demo is linked from the README for trying themes and formats before integrating.

One documented constraint to keep in mind: only one picker is shown at a time, so the multi-instance story is virtual, achieved by swapping global configuration rather than rendering several pickers simultaneously. Engineers should also note the README's caveat that the wrap, el, rtl, inline, defaultColor, and a11y options can only be set globally, not per instance, so plan your form structure accordingly before configuring the picker.