Accessible Color Picker – Coloris.js

Category: Color , Javascript | May 22, 2022
Author:mdbassit
Views Total:82 views
Official Page:Go to website
Last Update:May 22, 2022
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: default, large, polaroid.

<input type="text" class="coloris" />
Coloris({
  theme: 'large',
  themeMode: 'light', // light, dark, auto
});

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
  • auto
  • 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,
  // enable format toggle button
  formatToggle: true,
  // Margin in px
  margin: 2,
  // Show only the color swatches in the picker dialog
  swatchesOnly: false,
  // disable alpha
  alpha: true,
  // not focus the color value input
  focusInput: true,
  // auto close
  autoClose: false,
  // config the clear button
  clearButton: {
    show: false,
    label: 'Clear' 
  },
  // a11y
  a11y: {
    open: 'Open color picker',
    close: 'Close color picker',
    marker: 'Saturation: {s}. Brightness: {v}.',
    hueSlider: 'Hue slider',
    alphaSlider: 'Opacity slider',
    input: 'Color value field',
    format: 'Color format',
    swatch: 'Color swatch',
    instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' 
  }
});

9. API methods.

// Close the color picker
Coloris.close();
// Close the color picker and reset the color
Coloris.close(true);

10. Event handlers.

  • open
  • close
  • input
  • change

Changelog:

v0.12.2 (05/22/2022)

  • Add type=”button” to all button elements to avoid submitting a container form

v0.12.1 (05/01/2022)

  • Fix an issue with the calculation of the color area position in inline mode

v0.12.0 (04/26/2022)

  • Add a new inline (static) mode
  • Trigger an event when a new color is picked

v0.11.0 (04/24/2022)

  • Add an “open” and “close” events.

v0.10.3 (04/06/2022)

  • Fix a bug where the color swatches are not reset.

v0.10.2 (03/09/2022)

  • Mitigate a Chromium bug where the alpha value is rounded incorrectly

v0.10.1 (03/04/2022)

  • Add spellcheck=”false” to the color value field.

v0.10.0 (01/05/2021)

  • Add an option to show only the color swatches in the picker dialog

v0.9.2 (01/03/2021)

  • Fix issue where clear button was not clearing the selected color anymore

v0.9.1 (12/18/2021)

  • Improved dark mode alpha gradient

v0.9.0 (12/14/2021)

  • Add an option to not focus the color value input

v0.8.0 (11/13/2021)

  • Add support for automatic dark mode

v0.7.0 (11/09/2021)

  • Add a color format toggle to switch between Hex, RGB and HSL
  • Add a new “auto” color format
  • Add a new “large” theme

11/03/2021

  • Add the ability to disable alpha

10/27/2021

  • Fix swatches distribution for the polaroid theme

10/19/2021

  • Add a clear button

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