JSFiddle - React, Tailwind, and code Playground

HTML

<div id="out"></div>

JavaScript

function redScale(colorInput) {return parseInt(colorInput.substring(1,3),16)/255 * 2 - 1;}
function grnScale(colorInput) {return parseInt(colorInput.substring(3,5),16)/255 * 2 - 1;}
function bluScale(colorInput) {return parseInt(colorInput.substring(5,7),16)/255 * 2 - 1;}

var colorInput = "#efe54b";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
$('#out').append("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "#82bad4";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
$('#out').append("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "#cc9e3c";
rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);

$('#out').append("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS);