JSFiddle - React, Tailwind, and code Playground

by cliff

HTML

<script src="http://www.useragentman.com/shared/js/jcoglan.com/sylvester.js"></script>
<body>
    <table cellspacing="0" id="results">
		<thead>
			<th style="width: 15em;">id/name</th>
			<th colspan="2">color</th>
			<th colspan="2">rgb</th>
		</thead>
		<tr style="text-align: center;">
			<td style="width: 5em;" title="name"></td>
			<td style="width: 5em;" title="color"></td>
			<td style="width: 5em;" title="rgb"></td>
		</tr>
    </table>


</body>

JavaScript

function compositeColorShiftRgb (base_rgb, material) {    
    var brightness = material.brightness / 128;
    var contrast = material.contrast;
    var hue = (material.hue * 3.14159265358979323846) / 180; // (convert to radians)
    var saturation = material.saturation;
    var lightness = material.lightness;
    
    // 4x4 identity matrix
    var matrix = Matrix.I(4)
    
    if (brightness != 0 || contrast != 1) {
        // process brightness and contrast
        var t = 128 * (2 * brightness + 1 - contrast);
        var mult = $M([
            [contrast, 0, 0, t],
            [0, contrast, 0, t],
            [0, 0, contrast, t],
            [0, 0, 0, 1]
        ]);
        matrix = mult.x(matrix);
    }
    
    if (hue != 0 || saturation != 1 || lightness != 1) {
        // transform to HSL
        var multRgbToHsl = $M([
            [ 0.707107, 0.0,      -0.707107, 0],
            [-0.408248, 0.816497, -0.408248, 0],
            [ 0.577350, 0.577350,  0.577350, 0],
            [ 0,        0,         0,        1]
        ]);
        matrix = multRgbToHsl.x(matrix);
            
        // process adjustments
        var cosHue = Math.cos(hue);
        var sinHue = Math.sin(hue);
        var mult = $M([
            [cosHue * saturation,  sinHue * saturation, 0,         0],
            [-sinHue * saturation, cosHue * saturation, 0,         0],
            [0,                    0,                   lightness, 0],
            [0,                    0,                   0,         1]
        ]);
        matrix = mult.x(matrix);
        
        // transform back to RGB
        var multHslToRgb = $M([
            [ 0.707107, -0.408248, 0.577350, 0],
            [        0,  0.816497, 0.577350, 0],
            [-0.707107, -0.408248, 0.577350, 0],
            [ 0,        0,         0,        1]
        ]);
        matrix = multHslToRgb.x(matrix);
    }
    
    // apply the color transformation
    var bgrVector = $V([base_rgb[2], base_rgb[1], base_rgb[0], 1]);
 ...