Color Picker
Source on GitHub

Version: 0.2

Download

A simple color picker web component that handles red, green, blue and alpha (transparency) values. Also works with hue, saturation and lightness values. 

<color-picker></color-picker>

Attributes

value The current color value. The format of the color is #RRGGBBAA. It is similar to the <input type="color"> value, but it also contains the alpha amount.

Events

change When the user changes the color value. Either but selecting the color or inputting its value.

Properties & Functions

red
green
blue 		Gets the current red, green and blue color values. They range from 0 to 255. These are read only.
alpha Gets the current alpha (transparency) value. It ranges from 0.0 to 1.0. It is read only.
hue
saturation
lightness 		Gets the hue, saturation and lightness of the HSL color parts. The hue ranges from 0 to 360. The others range from 0 to 100. They are read only.
value Gets and sets the current color value. This is in the format #RRGGBBAA, using hexadecimal characters. You can both read and write this value.

Notes

You need to set the width and height. The internal parts automatically expand to fill the space available. The background, font family and font size are all inherited, so you can style them as you need.

Examples

Using defaults.

In this example we look at how the color picker looks when there are no styling changes made to it. 

<color-picker style="width: 20rem; height: 20rem;">
</color-picker>

Make it small.

Here we style it to look smaller and give it a black background color. 

<color-picker
  style="
    width: 15rem;
    height: 20rem;
    background-color: #303030;
    font-size: 0.75rem;">
</color-picker>

Using it with a dialog.

In this example we put the color picker inside a dialog. It needs some styling but it shows how it could be used this way.

press to select color
<div class="example-dialog">
  <label>Color:</label>
  <div id="color-input">press to select color</div>
</div>

<dialog id="color-dialog">
  <color-picker id="color-picker" style="width: 15rem; height: 20rem;">
  </color-picker>
  <button id="done">Done</button>
</dialog>

// Set current color
let currentColor = '';

// Get color input element
const colorInputElement = document.getElementById('color-input');

// Get color dialog element
const colorDialogElement = document.getElementById('color-dialog');

// Get color picker element
const colorPickerElement = document.getElementById('color-picker');

// Get done element
const doneElement = document.getElementById('done');

// Add color input click event
colorInputElement.addEventListener('click', function () {
  // Show the dialog
  colorDialogElement.showModal();

  // Set starting color to the current color
  colorPickerElement.value = currentColor;
});

// Add done click event
doneElement.addEventListener('click', function () {
  // Update the color input
  colorInputElement.innerText = colorPickerElement.value;

  // Set the new current color
  currentColor = colorPickerElement.value;

  // Close the dialog
  colorDialogElement.close();    
});