<div class="wrapper">
  <div class="element srgb">
    <div class="box primary">Primary Color (sRGB Luma)</div>
    <div class="box secondary">Secondary Color (sRGB Luma)</div>
  </div>

  <div class="element w3c">
    <div class="box primary">Primary Color (W3C Luma)</div>
    <div class="box secondary">Secondary Color (W3C Luma)</div>
  </div>
</div>

<div class="form">
  <div class="control">
    <label for="r">R:</label>
    <input type="range" min="0" max="255" name="color" step="1" id="r" value="255" />
  </div>
  <div class="control">
    <label for="g">G:</label>
    <input type="range" min="0" max="255" name="color" step="1" id="g" value="0" />
  </div>
  <div class="control">
    <label for="b">B:</label>
    <input type="range" min="0" max="255" name="color" step="1" id="b" value="0" />
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.element {
  display: flex;
  justify-content: center;
  background-image: radial-gradient(circle at center, rgb(var(--r) var(--g)  var(--b)), #291642),
    linear-gradient(to bottom, #291642, #291642);
  background-repeat: no-repeat;
  background-position: center;
  background-clip: padding-box;
  border-radius: 8px;
  background-blend-mode: multiply, screen;
  margin: 0 2vmin 4vmin;
  padding: 4vmin;
}

.box {
  border-radius: 2vmin;
  padding: 5vmin;
  white-space: nowrap;
  margin: 2vmin;
}

.form {
  display: flex;
  align-items: center;
  color: #fff;
}

.control {
  margin: 4vmin;
  display: flex;
  align-items: center;
  font-size: 3rem;
}

:root {
  --r: 200;
  --g: 60;
  --b: 255;
  --threshold: 0.5;
  --border-threshold: 0.8;
}

.box {
  --Rsrgb: var(--r);
  --Gsrgb: var(--g);
  --Bsrgb: var(--b);
  background-color: rgb(var(--Rsrgb), var(--Gsrgb), var(--Bsrgb));
  
  /* sRGB Luma*/
  --Lumasrgb: calc(((var(--Rrsgb) * 0.2126 + var(--Gsrgb) * 0.7152 + var(--Bsrgb) * 0.0722)) / 255);
  color: hsl(0, 0%, calc((var(--Lumasrgb) - var(--threshold)) * -10000000%));
    
  --border-alpha: calc((var(--Lumasrgb) - var(--border-threshold)) * 100);
  border: .5rem solid rgba(calc(var(--Rsrgb) - 50), calc(var(--Gsrgb) - 50), calc(var(--Bsrgb) - 50), var(--border-alpha));
}

.w3c .box{
  --Rw3c: var(--r);
  --Gw3c: var(--g);
  --Bw3c: var(--b);
  background-color: rgb(var(--Rw3c), var(--Gw3c), var(--Bw3c));
  /*W3C Luma*/
  --Lumaw3c: calc(((var(--Rw3c) * 0.299 + var(--Gw3c) * 0.587 + var(--Bw3c) * 0.114)) / 255);
  --border-alpha: calc((var(--Lumaw3c) - var(--border-threshold)) * 100);
  border: .2rem solid rgba(calc(var(--Rw3c) - 50), calc(var(--Gw3c) - 50), calc(var(--Bw3c) - 50), var(--border-alpha));
}

.secondary{
  filter:hue-rotate(60deg);
}

const inputs = document.querySelectorAll("input");

const color = [...inputs].map((input, index) => {
  input.addEventListener("change", function (e) {
    handleUpdate(e, index);
  });
  return input.value;
});

function handleUpdate(e, index) {
  color[index] = e.target.value;

  document.documentElement.style.setProperty(
    `--${e.target.id}`,
    `${e.target.value}`
  );
}