August 8, 2022

[RGB/HEX/HSV] Flat And Simple Color-Picker Library In JavaScript

Flat and simple colorpicker is a flat and light/dark style color picker component that supports alpha channel and three RGB, HEX, and HSV color formats.

Features:

  • Simple: The interface is straightforward and easy to use.
  • Practical: multiple color representations. Multiple topics.
  • Mobile Compatible: Works well on mobile devices and touch screens.

How to make use of it:

1. Load the required JavaScript and CSS information within the doc.

<link rel="stylesheet" href="src/css/color-picker.css" />
<script src="dist/color-picker.min.js"></script>

2. Create a container to carry the colour picker.

<div class="example"></div>

3. Initialize the colour picker and accomplished.

let color_pickers = [
    new ColorPickerControl({ container: document.querySelector('.example')}),
    // more instances...
];

4. Change the theme to Light.

new ColorPickerControl({ 
    container: document.querySelector('.example'),
    theme: 'light'
}),

5. This instance reveals tips on how to apply the chosen colour to a given component.

color_pickers.forEach(color_picker => {
  color_picker.on('change', function(color){
    document.getElementById("demo").style.setProperty('color', color.toHEX());
    document.getElementById("demo").style.setProperty('color', color.a / 255);
    color_pickers.filter(p=>p!=color_picker).forEach((p) => {
      p.color.fromHSVa(color.h, color.s, color.v, color.a);
      p.update(false);
    });
  });
});

Flat RGB/HEX/HSV Color Picker, Flat and simple color-picker Plugin/Github


See Demo And Download

Official Website(ivanvmat): Click Here

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

Share

You may also like...

Leave a Reply

Your email address will not be published.