RGB

index.pug

.container
  .expression 
    span RGB 
    input(name="red" type="number" class="form-control" placeholder="red" value="255" max="255")
    span , 
    input(name="green" type="number" class="form-control" placeholder="green" value="255" max="255")
    span , 
    input(name="blue" type="number" class="form-control" placeholder="blue" value="255" max="255")
    span  
  #rgb
    #red
    #green
    #blue

rgb.markdown

RGB

A Pen by HARUN PEHLİVAN on CodePen.

License.

script.babel

$(document).ready(() => {
  
  $("input").change((event) => {
    if(event.target.value > 255) {
      event.target.value = 255;
    }
  });
  $("input[name='red']").change((event) => {
    //$("input[name='red']").css("color", "rgb("+event.target.value+",0,0)");
    $("#red").css("background-color", "rgb("+event.target.value+",0,0)");
  });
  $("input[name='green']").change((event) => {
    //$("input[name='green']").css("color", "rgb(0,"+event.target.value+",0)");
    $("#green").css("background-color", "rgb(0,"+event.target.value+",0)");
  });
  $("input[name='blue']").change((event) => {
    //$("input[name='blue']").css("color", "rgb(0,0,"+event.target.value+")");
    $("#blue").css("background-color", "rgb(0,0,"+event.target.value+")");
  });
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=PT+Mono');

html {
  background-color: black;
}
.container {
  position: absolute;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.expression {
  font-family: 'PT Mono', monospace;
  font-size: 0;
  color: #ccc;
}
.expression span {
  font-size: 20px;
}
.form-control {
  display: inline;
  width: 75px;
  background-color: #222;
  border-bottom: 1px solid white;
  border-radius: 0px;
  padding-bottom: 5px;
  color: white;
  font-size: 20px;
}
#rgb {
  // without isolation, the background color will be taken into account
  isolation: isolate;
  
  position: relative;
  width: 250px;
  height: 200px;
  top: -900px;
  left: 100px;
}

#red, #green, #blue {
  position: absolute;
  width: 100px;
  height: 2000px;
  mix-blend-mode: screen;
  transform-origin: center center;
}
#red {
  background-color: red;
  transform: rotate(-60deg);
}
#green {
  background-color: lime;
}
#blue {
  background-color: blue;
  transform: rotate(60deg);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />