HSB Gradient

by Noreh AD

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<canvas id="primary" width="256" height="256"></canvas>
<input type="range" min="0" max="360" step="1" value="0" id="secondary" />

CSS

#primary {
  display: block;
  border: 1px solid gray;
}

#secondary {
  width: 256px;
  height: 15px;
  margin-top: 15px;
  outline: 0;
  display: block;
  border: 1px solid gray;
  box-sizing: border-box;
  -webkit-appearance: none;
  background-image: linear-gradient(to right, red 0%, yellow 16.66%, lime 33.33%, cyan 50%, blue 66.66%, violet 83.33%, red 100%);
}

#secondary::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 25px;
  width: 10px;
  border-radius: 10px;
  background-color: rgb(230, 230, 230);
  border: 1px solid gray;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1);
}

JavaScript

function drawPixel(x, y, fillArray) {
  fill = "rgb(" + fillArray.join() + ")" || "black";
  context.beginPath();
  context.rect(x, y, 1, 1);
  context.fillStyle = fill;
  context.fill();
}

var canvas = document.getElementById("primary");
var context = canvas.getContext("2d");

var grad1 = [ [255, 255, 255], [0, 0, 0] ]; // brightness

fillPrimary([255, 0, 0]); // initial hue = 0 (red)

$("#secondary").on("input", function() {
  var hue = parseInt(this.value, 10);
  var clr = hsl2rgb(hue, 100, 50);
  fillPrimary(clr);
});

function fillPrimary(rgb) {
  var grad2 = [ [255, 255, 255], rgb ]; // saturation
  for (var x = 0; x < canvas.width; x++) {
    for (var y = 0; y < canvas.height; y++) {

      var grad1Change = [
        grad1[0][0] - grad1[1][0],
        grad1[0][1] - grad1[1][1],
        grad1[0][2] - grad1[1][2],
      ];
      var currentGrad1Color = [
        grad1[0][0] - (grad1Change[0] * y / 255),
        grad1[0][1] - (grad1Change[1] * y / 255),
        grad1[0][2] - (grad1Change[2] * y / 255)
      ];

      var grad2Change = [
        grad2[0][0] - grad2[1][0],
        grad2[0][1] - grad2[1][1],
        grad2[0][2] - grad2[1][2],
      ];
      var currentGrad2Color = [
        grad2[0][0] - (grad2Change[0] * x / 255),
        grad2[0][1] - (grad2Change[1] * x / 255),
        grad2[0][2] - (grad2Change[2] * x / 255)
      ];

      var multiplied = [
        Math.floor(currentGrad1Color[0] * currentGrad2Color[0] / 255),
        Math.floor(currentGrad1Color[1] * currentGrad2Color[1] / 255),
        Math.floor(currentGrad1Color[2] * currentGrad2Color[2] / 255),
      ];

      drawPixel(x, y, multiplied);
    }
  }
}

function hsl2rgb(h, s, l) {
  h /= 360;
  s /= 100;
  l /= 100;
  var r, g, b;
  if (s == 0) {
    r = g = b = l;
  } else {
    var hue2rgb = function hue2rgb(p, q, t) {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) return q;
      if (t < 2 / 3) return p + (q -...