JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.stephenmorley.org/javascript/colour-handling-and-processing/Colour.js"></script>
<body>
	<section id="colors">
		<div id="c1"></div>
		<div id="c2"></div>
	</section>
	<br style="clear:both">
	<section id="inputs">
		H:<input id="h" type="number" min=0 max=360 step=1 value=0>
		S:<input id="s" type="number" min=0 max=100 step=1 value=100>%
		L:<input id="l" type="number" min=0 max=100 step=1 value=50>%
	</section>
	<div>Lum: <span id="rl"></span></div>

CSS

#colors div {
			width:600px;
			height:50px;
			margin:5px 5px;
			border: 1px solid black;
			color:white
		}
		
		#inputs input {
			width:60px
		}

JavaScript

function luminance(color)
	{
		var sRGB2Linear = function(x) {
			return (x <= 0.03928) ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
		};

		var luma = function(r,g,b) {
			return 0.2126 * r + 0.7152 * g + 0.0722 * b;
		};

		var rgb = color.getRGB();

	    var RsRGB = rgb.r/255;
	    var GsRGB = rgb.g/255;
	    var BsRGB = rgb.b/255;
	 
	    var rLinear = sRGB2Linear(RsRGB);
	    var gLinear = sRGB2Linear(GsRGB);
	    var bLinear = sRGB2Linear(BsRGB);
	 
	    var l = luma(rLinear, gLinear, bLinear);  
		
		return l;
	}
	
	function grayscale(color)
	{
		var sRGB2Linear = function(x) {
			return (x <= 0.04045) ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
		};
		
		var linear2sRGB = function(x) {
			return (x <= 0.0031308) ? x * 12.92 : Math.pow(x, 1/2.4) * 1.055 - 0.055;
		};
			
		var luma = function(r,g,b) {
			return 0.2126 * r + 0.7152 * g + 0.0722 * b;
		};		
		
		var rgb = color.getRGB();

	    var RsRGB = rgb.r/255;
	    var GsRGB = rgb.g/255;
	    var BsRGB = rgb.b/255;

	    var rLinear = sRGB2Linear(RsRGB);
	    var gLinear = sRGB2Linear(GsRGB);
	    var bLinear = sRGB2Linear(BsRGB);
			 
		var grayLinear = luma(RsRGB, GsRGB, BsRGB);
		
		var gray = (grayLinear) * 255;
		
		return new RGBColour(gray, gray, gray);
	}
	
	
	$(function(){
		$("#inputs input").on("keyup change", function(){
			var h = parseInt($("#h").val());
			var s = parseInt($("#s").val());
			var l = parseInt($("#l").val());
			
			var c1 = new HSLColour(h, s, l);
			
			var c2 = grayscale(c1);
			
			$('#c1').css("background-color", c1.getCSSHSL()).text(c1.getCSSHSL() + ' ' + luminance(c1));
			$('#c2').css("background-color", c2.getCSSHSL()).text(c2.getCSSHSL() + ' ' + luminance(c2));
		})
		
		$("#h").change();
		
	})