A Lightweight and Elegant JavaScript Color Picker

Coloris is a lightweight and elegant JavaScript color picker written in Vanilla ES6. Convert any text input field to a color field.

colour accessibility checker, accessible color palette, color contrast generator online, accessible color palette examples, wcag color contrast, accessible color picker component

Features

Zero Dependencies
Very easy to use
Customizable
Dark appearance
Blackout support
Color changer
Multiple color formats
Touch support
Fully accessible
It works on all modern browsers

How to make use of it:

1. Import the coloris.min.css and JavaScript coloris.min.js stylesheet into the HTML document.

<link rel="stylesheet" href="coloris.min.css" />
<script src="coloris.min.js"></script>

2. To automatically configure the color picker, simply add the data-coloris attribute to the target input field.

<input type="text" data-coloris />

3. Or configure the color picker in JavaScript.

<input type="text" class="coloris" />

Coloris({
  el: '.coloris'
});

4. Define the initial color using the value attribute.

<input type="text" class="coloris" value="rgb(255, 0, 0)" />

5. Change the theme to “Dark”.

<input type="text" class="coloris" />

Coloris({
  theme: 'dark'
});

6. Select an array of predefined color swatches to display.

Coloris({
  swatches: [
    '#264653',
    '#2a9d8f',
    '#e9c46a',
    '#f4a261',
    '#e76f51',
    '#d62828',
    '#023e8a',
    '#0077b6',
    '#0096c7',
    '#00b4d8',
    '#48cae4',
  ]
});

7. Set the color format.

Coloris({
  format: 'hex',
});

8. More configurations.

Coloris({
  // parent container
  parent: null,
  // The bound input fields are wrapped in a div that adds a thumbnail showing the current color
  // and a button to open the color picker (for accessibility only).
  wrap: true,
  // Margin in px
  margin: 2,
  a11y: {
    open: 'Open color picker',
    close: 'Close color picker',
    marker: 'Saturation: {s}. Brightness: {v}.',
    hueSlider: 'Hue slider',
    alphaSlider: 'Opacity slider',
    input: 'Color value field',
    swatch: 'Color swatch',
    instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' 
  }
});

Accessible Color Picker, Coloris Plugin/Github, accessible colours, wcag aaa