Color Picker

Here we are using 3 sliders for the hue, saturation and lightness values.

The color is then calculated using the hsl() function and placed into the style="" property as a css variable.

<script>

  let color = { h: [122], s: [60], l: [90] };

  $: styles = `
    --hue: ${color.h[0]}deg;
    --saturation: ${color.s[0]}%;
    --lightness: ${color.l[0]}%;
    --color: hsl( var(--hue), var(--saturation), var(--lightness) );
    --range-handle-focus: hsla( var(--hue), 60%, 70%, 1 );
  `;

</script>

<div class="color-ui" style="{styles}">

  <RangeSlider float prefix="h: " suffix="°" bind:values={color.h} max={360} />
  <RangeSlider float prefix="s: " suffix="%" bind:values={color.s} max={100} />
  <RangeSlider float prefix="l: " suffix="%" bind:values={color.l} max={100} />

  {#if styles}
    <div class="color">
      --hue: {color.h[0]}deg;
      --saturation: {color.s[0]}%;
      --lightness: {color.l[0]}%;
    </div>
  {/if}

</div>

.color {
  padding: 1em;
  background-color: var(--color);
  transition: all 0.5s ease;
}

.color-ui .rangeSlider.rangeSlider {
  margin-block: 2em;
  font-family: var(--font-mono);
}

.color-ui .rangeSlider.rangeSlider .rangeFloat,
.color-ui .rangeSlider.rangeSlider.focus .rangeFloat,
.color-ui .rangeSlider.rangeSlider:hover .rangeFloat {
  opacity: 1;
  top: -.25em;
  translate: 0% 100%;
  border-radius: 1em;
  padding: .25em .75em;
  pointer-events: all;
}

/**
 * Simple Styling
 */
.color-ui {
  border-radius: 0.5rem;
  border: 2px solid var(--color);
  color: var(--color);
  transition: all 0.5s ease;
  user-select: none;
}

/**
 * Advanced Styling for the Demo
 */
.color-ui {
  color: hsla(var(--hue), calc( var(--saturation) / 2),calc( (var(--lightness ) - 50%) * -1 + 100% ), 1);
  text-shadow: 0 1px 1px hsla(var(--hue), calc( var(--saturation) / 2),calc( var(--lightness ) - 50% ), 1);
  box-shadow: 
    0 1px 1px 2px hsla(var(--hue), calc( var(--saturation) / 2), max( calc( var(--lightness ) - 10% ), 30% ), 1),
    0 4px 4px 1px hsla(var(--hue), calc( var(--saturation) / 2), max( calc( var(--lightness ) - 10% ), 30% ), .5),
    0 8px 10px 5px hsla(var(--hue), calc( var(--saturation) / 2), max( calc( var(--lightness ) - 10% ), 30% ), .5);
}