Version: 0.2
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>
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.
|
change | When the user changes the color value. Either but selecting the color or inputting its value. |
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. |
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.
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>
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>
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.
<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(); });