JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div>Color: <span></span></div>
<input type="color">
<button>red</button>
<button>rgb(200, 255, 0)</button>
<button>hsl(0, 45%, 27%)</button>

JavaScript

const picker = document.querySelector('input');
const output = document.querySelector('span');

const showPickerColor = () => {
  output.textContent = picker.value;
};

picker.addEventListener('input', (event) => {
  showPickerColor();
});

[...document.querySelectorAll('button')]
.forEach((el) => {
  el.addEventListener('click', (event) => {
    picker.value = event.currentTarget.innerText.trim();
    showPickerColor();
  });
});