<div class="container">
  <div class="target">
  </div>
</div>

<form>
  <input type="text" placeholder="R" id="r">
  <input type="text" placeholder="G" id="g">
  <input type="text" placeholder="B" id="b">
  <input type="submit">
</form>
div.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(123, 104, 238);
}

div.target {
  border-radius: 25%;
  height: 200px;
  width: 200px;
  box-shadow: -5px -5px 10px rgb(148, 129, 263), 5px 5px 10px rgb(98, 79, 213);
  transition: 0.5s;
}

div:hover {
  box-shadow: none;
  transition: 0.5s;
}

//test 123,104,238 - mediumslateblue or 0,128,255 - lightblue
var container = document.querySelector(".container");
var target = document.querySelector(".target");
var form = document.getElementsByTagName("form")[0];

form.onsubmit = function (event) {
  event.preventDefault();
  var r = document.getElementById("r").value;
  var g = document.getElementById("g").value;
  var b = document.getElementById("b").value;
  var bg = `rgb(${r},${g},${b})`;
  container.style.background = bg;
  target.style.background = bg;

  var rnum = parseInt(r);
  var gnum = parseInt(g);
  var bnum = parseInt(b);
  //r,g,b must be num to perform math
  var rpale = rnum + 25;
  var gpale = gnum + 25;
  var bpale = bnum + 25;
  //========
  var rdark = rnum - 25;
  var gdark = gnum - 25;
  var bdark = bnum - 25;

  var pale = `rgb(${rpale},${gpale},${bpale})`;
  var dark = `rgb(${rdark},${gdark},${bdark})`;
  console.log(pale);
  console.log(dark);

  target.style.boxShadow = `-5px -5px 10px ${pale}, 5px 5px 10px ${dark}`;
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.