Press "Enter" to skip to content

A Lightweight and Elegant JavaScript Color Picker | Coloris

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


See Demo And Download

Official Website(mdbassit): Click Here

This superior jQuery/javascript plugin is developed by mdbassit. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.