<div class="rgb-picker">
  <form>
    <label for="r">
      Red:

      <input type="range" value="122.5" min="0" max="255" step="0.1" name="r" id="r">
    </label>
    
    <label for="s">
      Green:

      <input type="range" value="122.5" min="0" max="255" step="0.1" name="g" id="g">
    </label>
    
    <label for="l">
      Blue:

      <input type="range" value="122.5" min="0" max="255" step="0.1" name="b" id="b">
    </label>
    
    <label for="a">
      Alpha:

      <input type="range" value="1" min="0" max="1" step="0.01" name="a" id="a">
    </label>
  </form>
  <div class="output">
    <code class="output-text">
      rgba(122.5, 122.5, 122.5, 1)
    </code>
  </div>
</div>

.rgb-picker {
  --r: 122.5;
  --g: 122.5;
  --b: 122.5;
  --a: 1;
  
  --border-color: rgba(var(--r), var(--g), var(--b), var(--a));
}

html, body {
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif; 
  background: #eee;
}

* {
  font-family: inherit;
}

.rgb-picker {
  display: flex;
  padding: 1em;
  gap: 1em;
}

form {
  flex-grow: 1;
  padding: 1em;
}

.output {
  flex-basis: min(20em, 40%);
  display: flex;
  align-items: flex-end;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23000000' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.output::before {
  content: '';
  top: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(var(--r), var(--g), var(--b), var(--a));
}

.output-text {
  font-family: monospace;
  margin: 0.5em;
  padding: 0.5em;
  background: hsla(0, 0%, 95%, 95%);
  position: relative;
  flex-grow: 1;
  text-align: center;
}

label {
  display: flex;
  flex-direction: column;
  width: 100%;
}

label + label {
  margin-top: 1em;
}

input[type="range"] {
  margin-top: 1em;
  width: 100%;
  -webkit-appearance: none;
  height: 1em;
  box-shadow: 0 0 0 0.12em #fff;
  border-radius: 1em;
}

input[type="range"]:focus {
  outline: none;
  box-shadow: 
    0 0 0 0.2em #fff,
    0 0 0 0.4em rgb(var(--r), var(--g), var(--b));
}

#r {
  background: linear-gradient(
    to right, 
    rgb(0, var(--g), var(--b)) 0%,     
    rgb(255, var(--g), var(--b)) 100% 
  );
}

#g {
  background: linear-gradient(
    to right, 
    rgb(var(--r), 0, var(--b)) 0%,     
    rgb(var(--r), 255, var(--b)) 100% 
  );
}

#b {
   background: linear-gradient(
     to right, 
     rgb(var(--r), var(--g), 0) 0%,     
     rgb(var(--r), var(--g), 255) 100% 
   ); 
}

#a {
   background: linear-gradient(to right, rgba(var(--r), var(--g), var(--b), 0%) 00%, rgba(var(--r), var(--g), var(--b), 100%) 100%); 
}

[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  background-color: rgb(var(--r), var(--g), var(--b));
  box-shadow: 
    0 0 0 0.2em #fff,
    0 0 0 0.4em rgb(var(--r), var(--g), var(--b));
  border-radius: 50%;
  border: none;
  height: 1.5em;
  width: 1.5em;
}

[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: rgb(var(--r), var(--g), var(--b));
  box-shadow: 
    0 0 0 0.2em #fff,
    0 0 0 0.4em rgb(var(--r), var(--g), var(--b));
  border-radius: 50%;
  border: none;
  height: 1.5em;
  width: 1.5em;
}

[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  background-color: rgb(var(--r), var(--g), var(--b));
  box-shadow: 
    0 0 0 0.2em #fff,
    0 0 0 0.4em rgb(var(--r), var(--g), var(--b));
  border-radius: 50%;
  border: none;
  height: 1.5em;
  width: 1.5em;
}

initPicker(document.querySelector('.rgb-picker'));

function initPicker(picker) {
  const outputText = picker.querySelector('.output-text');
  
  picker.querySelectorAll('[type="range"]').forEach(input => {
    input.addEventListener('input', ({target}) => {
      let {name, value} = target;

      picker.style.setProperty(`--${name}`, value);
      
      const styles = window.getComputedStyle(picker);
      
      outputText.innerText = `
        rgba(${
          styles.getPropertyValue('--r')
        }, ${
          styles.getPropertyValue('--g')
        }, ${
          styles.getPropertyValue('--b')
        }, ${
          styles.getPropertyValue('--a')
        })
      `.trim();
    });
  });
}