JSFiddle - React, Tailwind, and code Playground

by SerGen

CSS

html {
  height: 200px;
  background: linear-gradient(to right, #f00, #0f0);
}

JavaScript

var c1 = [255,0,0];
var c2 = [0,255,0];

var bg = 'linear-gradient(to right';
var c1Lab = rgb2lab(c1);
var c2Lab = rgb2lab(c2);

var length = 100;

for (var i = 0; i < length; i++) {
	var newColor = [];
  
  newColor[0] = c1Lab[0] + ((c2Lab[0] - c1Lab[0]) * (i / (length - 1)));
  newColor[1] = c1Lab[1] + ((c2Lab[1] - c1Lab[1]) * (i / (length - 1)));
  newColor[2] = c1Lab[2] + ((c2Lab[2] - c1Lab[2]) * (i / (length - 1)));
  
  newColor = lab2rgb(newColor);

	bg += ',rgb('+ Math.round(newColor[0]) +','+ Math.round(newColor[1]) +','+ Math.round(newColor[2]) +')';
};

bg += ')';

console.log(bg);

document.documentElement.style.backgroundImage = bg;

function lab2rgb(lab){
	var y = (lab[0] + 16) / 116,
	  x = lab[1] / 500 + y,
	  z = y - lab[2] / 200,
	  r, g, b;

	x = 0.95047 * ((x * x * x > 0.008856) ? x * x * x : (x - 16/116) / 7.787);
	y = 1.00000 * ((y * y * y > 0.008856) ? y * y * y : (y - 16/116) / 7.787);
	z = 1.08883 * ((z * z * z > 0.008856) ? z * z * z : (z - 16/116) / 7.787);

	r = x *  3.2406 + y * -1.5372 + z * -0.4986;
	g = x * -0.9689 + y *  1.8758 + z *  0.0415;
	b = x *  0.0557 + y * -0.2040 + z *  1.0570;

	r = (r > 0.0031308) ? (1.055 * Math.pow(r, 1/2.4) - 0.055) : 12.92 * r;
	g = (g > 0.0031308) ? (1.055 * Math.pow(g, 1/2.4) - 0.055) : 12.92 * g;
	b = (b > 0.0031308) ? (1.055 * Math.pow(b, 1/2.4) - 0.055) : 12.92 * b;

	return [Math.max(0, Math.min(1, r)) * 255, 
	      Math.max(0, Math.min(1, g)) * 255, 
	      Math.max(0, Math.min(1, b)) * 255]
}


function rgb2lab(rgb){
	var r = rgb[0] / 255,
	  g = rgb[1] / 255,
	  b = rgb[2] / 255,
	  x, y, z;

	r = (r > 0.04045) ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
	g = (g > 0.04045) ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
	b = (b > 0.04045) ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;

	x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
	y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
	z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;

	x = (x > 0.008856) ?...