Accessible Color Picker – Coloris.js

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

Preview:

Accessible Color Picker  – Coloris.js

Description:

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" />
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" />
Coloris({
  theme: 'dark'
});

6. Define an array of predefined swatches to display.

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

7. Set the color format:

  • hex
  • rgb
  • mixed (default)
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.' 
  }
});

Changelog:

10/16/2021

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

You Might Be Interested In:


Leave a Reply