color does not want to convert automatically

Question

I'm a javascript noob.

I made a hsl colorpicker and I would like to convert the hsl color automatically to rgb and hex. I found a piece of code from w3schools that I would like to use for this. The only problem is that the color code is only converted when the color code is entered manually.

I would like the colors to be automatically converted as soon as the color is changed with the oniput function in the sliders. I just do not know how to change the code for this.

Here is the code:

// below color converter
    // Make sure to include https://www.w3schools.com/lib/w3color.js
        var colora1, rgba1, hexa1;
    

        $('#colora1').on('keyup', function() {
          colora1 = w3color($(this).val());
          
          if(colora1.valid) {
            hexa1  = colora1.toHexString();
         
            $('#hexa1').html(hexa1);
            
            if(colora1.opacity == 1) {
              rgba1  = colora1.toRgbString();
              
              $('#rgbNamea1').text('Rgb');
              $('#hslNamea1').text('Hex');
            } 
            else {
              rgba1  = colora1.toRgbaString();
              hexa1  = colora1.toHslaString();
              
              $('#rgbNamea1').text('Rgba');
              $('#hslNamea1').text('Hsla');
            }
              
            $('#rgba1').html(rgba1);
            $('#hexa1').html(hexa1);
          }
          
        });

body{
  text-align: center;
}
#view-color{
  width: 200px;
  height: 200px;
  border: solid #000 1px;
  margin: 10px auto;
}
.colors{
  width: 200px;
  margin: 20px auto;
}
#colora1, textarea{
  width: 100%;
  height: 20px;
}

<div id="view-color" style="background-color: hsl(100, 100%, 50%)"></div><br>
hue<br>
<input oninput="changeColor()" type="range" id="hue" max="360" min="0" value="100"><br>
sat<br>
<input oninput="changeColor()" type="range" id="sat" max="100" min="0" value="100"><br>
light<br>
<input oninput="changeColor()" type="range" id="light" max="100" min="0" value="50">
    
<div class="colors">
  input<br>
    <input id="colora1" value="red" type="text">
  output rgb<br>
          <textarea id="rgba1" readonly>rgb(255, 0, 0)</textarea>
  output hex<br>
          <textarea id="hexa1" readonly>#ff0000</textarea>
 </div>
<script>
  function changeColor(){
    hue   = document.getElementById('hue').value;
    sat   = document.getElementById('sat').value;
    light = document.getElementById('light').value;
    hsl   = 'hsl('+hue+', '+sat+'%, '+light+'%)';

    document.getElementById('view-color').style.backgroundColor = hsl;
    document.getElementById('colora1').value = hsl;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3color.js"></script>

Answer 1

You need to get hex and rgb color values inside changeColor function and to assign them to corresponding inputs like you do with hsl (document.getElementById('colora1').value = hsl;). Also you need to change

$('#rgba1').html(rgba1);
$('#hexa1').html(hexa1);

to

$('#rgba1').val(rgba1);
$('#hexa1').val(hexa1);

inside keyup callback function.

// below color converter
    // Make sure to include https://www.w3schools.com/lib/w3color.js
        var colora1, rgba1, hexa1;
    

        $('#colora1').on('keyup', function () {
          colora1 = w3color($(this).val());
          
          if(colora1.valid) {
            hexa1  = colora1.toHexString();
         
            $('#hexa1').html(hexa1);
            
            if(colora1.opacity == 1) {
              rgba1  = colora1.toRgbString();
              
              $('#rgbNamea1').text('Rgb');
              $('#hslNamea1').text('Hex');
            } 
            else {
              rgba1  = colora1.toRgbaString();
              hexa1  = colora1.toHslaString();
              
              $('#rgbNamea1').text('Rgba');
              $('#hslNamea1').text('Hsla');
            }
 
            $('#rgba1').val(rgba1);
            $('#hexa1').val(hexa1);
          }
          
        });

body{
  text-align: center;
}
#view-color{
  width: 200px;
  height: 200px;
  border: solid #000 1px;
  margin: 10px auto;
}
.colors{
  width: 200px;
  margin: 20px auto;
}
#colora1, textarea{
  width: 100%;
  height: 20px;
}

<div id="view-color" style="background-color: hsl(100, 100%, 50%)"></div><br>
hue<br>
<input oninput="changeColor()" type="range" id="hue" max="360" min="0" value="100"><br>
sat<br>
<input oninput="changeColor()" type="range" id="sat" max="100" min="0" value="100"><br>
light<br>
<input oninput="changeColor()" type="range" id="light" max="100" min="0" value="50">
    
<div class="colors">
  input<br>
    <input id="colora1" value="red" type="text">
  output rgb<br>
          <textarea id="rgba1" readonly>rgb(255, 0, 0)</textarea>
  output hex<br>
          <textarea id="hexa1" readonly>#ff0000</textarea>
 </div>
<script>
  function changeColor(){
    hue   = document.getElementById('hue').value;
    sat   = document.getElementById('sat').value;
    light = document.getElementById('light').value;
    hsl   = 'hsl('+hue+', '+sat+'%, '+light+'%)';
    
    
    color = w3color(hsl);

    document.getElementById('view-color').style.backgroundColor = hsl;
    document.getElementById('colora1').value = hsl;
    document.getElementById('hexa1').value = color.toHexString();
    document.getElementById('rgba1').value = color.toRgbString();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3color.js"></script>