JSFiddle - React, Tailwind, and code Playground

by Ben Gillbanks

HTML

<h1>HSLA Color Picker</h1>
  
  <div id="colorPreview"></div>

  <label for="hue">Hue:</label>
  <input type="range" id="hue" min="0" max="360" value="0">

  <label for="saturation">Saturation:</label>
  <input type="range" id="saturation" min="0" max="100" value="50">

  <label for="lightness">Lightness:</label>
  <input type="range" id="lightness" min="0" max="100" value="50">

  <label for="alpha">Alpha:</label>
  <input type="range" id="alpha" min="0" max="1" step="0.01" value="1">

CSS

body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }

    #colorPreview {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      margin: 20px auto;
    }

    input {
      width: 200px;
      margin: 10px;
    }

JavaScript

const hueSlider = document.getElementById('hue');
    const saturationSlider = document.getElementById('saturation');
    const lightnessSlider = document.getElementById('lightness');
    const alphaSlider = document.getElementById('alpha');
    const colorPreview = document.getElementById('colorPreview');

    function updateColor() {
      const hue = hueSlider.value;
      const saturation = saturationSlider.value;
      const lightness = lightnessSlider.value;
      const alpha = alphaSlider.value;

      const color = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
      colorPreview.style.backgroundColor = color;
    }

    // Attach event listeners
    hueSlider.addEventListener('input', updateColor);
    saturationSlider.addEventListener('input', updateColor);
    lightnessSlider.addEventListener('input', updateColor);
    alphaSlider.addEventListener('input', updateColor);

    // Initial update
    updateColor();