Flat RGB/HEX/HSV Color Picker In JavaScript

Category: Color , Javascript | February 18, 2021
Author: ivanvmat
Views Total: 84 views
Official Page: Go to website
Last Update: February 18, 2021
License: MIT

Preview:

Flat RGB/HEX/HSV Color Picker In JavaScript

Description:

A flat style, light/dark themed color picker component that supports alpha channel and three color formats of RGB, HEX, and HSV.

How to use it:

1. Load the required JavaScript and CSS files in the document.

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

2. Create a container to hold the color picker.

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

3. Initialize the color picker and done.

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 example shows how to apply the selected color to a given element.

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);
    });
  });
});

You Might Be Interested In:


Leave a Reply