Accessible Color Picker – Coloris.js

Category: Color , Javascript | October 16, 2021
Views Total:10 views
Official Page:Go to website
Last Update:October 16, 2021


Accessible Color Picker  – Coloris.js


Coloris.js is a vanilla JavaScript library for creating responsive, mobile-friendly, and fully accessible color pickers.

More Features:

  • Allows you to pre-define color swatches.
  • Dark and Light themes.
  • Supports HEXa, HEX, RGBa, RGB color formats.
  • Saturation and Brightness sliders.

How to use it:

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

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

2. To initialize the color picker automatically, just add the data-coloris attribute to the target input field as follows:

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

3. Or initialize the color picker in JavaScript.

<input type="text" class="coloris" />
  el: '.coloris'

4. Specify 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" />
  theme: 'dark'

6. Define an array of predefined swatches to display.

  swatches: [

7. Set the color format:

  • hex
  • rgb
  • mixed (default)
  format: 'hex',

8. More configurations.

  // 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.' 



  • Add an arrow to the polaroid theme that points to the active input field

You Might Be Interested In:

Leave a Reply