slider solour picker

by Ben Gillbanks

HTML

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

  <label for="saturation">
  <span>Saturation</span>
  <input type="range" id="saturation" min="0" max="100" value="0">
 </label>
 
  <label for="lightness">
  <span>Lightness</span>
  <input type="range" id="lightness" min="0" max="100" value="0">
</label>
  
  <label for="alpha">
<span>Alpha</span>
  <input type="range" id="alpha" min="0" max="1" step="0.01" value="1">
  </label>

  <input type="text" id="rgba-display">
  <div class="color-preview" id="color-preview"></div>

CSS

body {
      font-family: Arial, sans-serif;
      margin: 50px;
    }
    input[type=range] {
      width: 80%;
      margin: 0;
      appearance: none;
      border-radius: 10px;
      border: 1px solid black;
    }
    label { display: flex; margin-bottom: 15px; }
    label span {
        width: 5em;
    }
    .color-preview {
      width: 80%;
      height: 50px;
      margin: 10px auto;
      border: 1px solid #ccc;
    }

JavaScript

// DOM elements
const hueInput = document.getElementById('hue');
const saturationInput = document.getElementById('saturation');
const lightnessInput = document.getElementById('lightness');
const alphaInput = document.getElementById('alpha');
const colorPreview = document.getElementById('color-preview');
const rgbaDisplay = document.getElementById('rgba-display');

// Function to update color and gradients
function updateColor() {

      const hue = Math.round(hueInput.value);
      const saturation = Math.round(saturationInput.value);
      const lightness = Math.round(lightnessInput.value);
      const alpha = parseFloat(alphaInput.value);
      const hsla = [hue, saturation, lightness, alpha];
      
      const rgba = HSLAToRGBA(hsla);
      
        const hexString = rgbToHexString( rgba );

  // Update color and gradients
  colorPreview.style.backgroundColor = hexString;

  // Display RGBA string
  rgbaDisplay.value = hexString;

  // Update the hue slider gradient
  hueInput.style.background = `linear-gradient(to right, 
    hsl(0, ${saturation}%, ${lightness}%) 0%,
    hsl(60, ${saturation}%, ${lightness}%) 17%,
    hsl(120, ${saturation}%, ${lightness}%) 33%,
    hsl(180, ${saturation}%, ${lightness}%) 50%,
    hsl(240, ${saturation}%, ${lightness}%) 67%,
    hsl(300, ${saturation}%, ${lightness}%) 83%,
    hsl(360, ${saturation}%, ${lightness}%) 100%
  )`;

  // Update the saturation slider gradient
  saturationInput.style.background = `linear-gradient(to right, 
    hsl(${hue}, 0%, ${lightness}%) 0%, 
    hsl(${hue}, 100%, ${lightness}%) 100%
  )`;

  // Update the lightness slider gradient
  lightnessInput.style.background = `linear-gradient(to right, 
    hsl(${hue}, ${saturation}%, 0%) 0%, 
    hsl(${hue}, ${saturation}%, 50%) 50%, 
    hsl(${hue}, ${saturation}%, 100%) 100%
  )`;
}

function setColor( color='hsla(60, 100%, 50%, 0.5)' ) {

  const rgba = colorToRGBA(color);
  const hsla = rgbToHSLA(rgba);
  
  const [hue, saturation, lightness,...