JSFiddle - React, Tailwind, and code Playground

by Daniel Cheung

HTML

<pre id="o"></pre>

JavaScript

let o = document.getElementById("o");

printGradient(0b111110000000000, 0b000001111100000);

function printGradient (from, to) {
	let width = 128;
  let height = 160;
  let redmask = 0b111110000000000;
  let greenmask = 0b000001111100000;
  let bluemask = 0b000000000011111;
  let from_r = (from & redmask) >> 10;
  let from_g = (from & greenmask) >> 5;
  let from_b = (from & bluemask);
  let to_r = (to & redmask) >> 10;
  let to_g = (to & greenmask) >> 5;
  let to_b = (to & bluemask);
  
  for (let i = 0; i < height + 1; i++) {
        let percent = i / height;
        //RGB16Color rgb16Color;
        let r = Math.floor(to_r * percent + from_r * (1-percent));
        let g = Math.floor(to_g * percent + from_g * (1-percent));
        let b = Math.floor(to_b * percent + from_b * (1-percent));

        let rgb = (r << 10 ^ g << 5 ^ b);

				o.innerHTML += `r=${r} g=${g} b=${b}\n`;
        o.innerHTML += rgb.toString(2) + "\n";
    }
}