JSFiddle - React, Tailwind, and code Playground

by bcronin

HTML

<div id="test" style="width: 100px; height: 25px; border: solid 1px black"></div>

<pre id="value"></pre>

JavaScript

initLibrary();  // <-- kludge to avoid the external dependency

var c = surfacecurve.color("#FF0000").hue(40).hex6();
$("#test").css("background-color", c);
$("#value").text(c);








// To avoid hosting / versioning issue, below is an inline copy of surfacecurve.color (formerly pusher.color):
//
// https://raw.githubusercontent.com/surfacecurve/sc-color/master/lib/surfacecurve-color.js
//
function initLibrary() {

/* ---------------------------------------------------------------------------- 
    surfacecurve-color.js
    A color parsing and manipulation library
   ----------------------------------------------------------------------------
*/
(function() {

    //-----------------------------------------------------------------------//
    // Local Misc. Utility Functions
    //-----------------------------------------------------------------------//
    
    function normalize360(v)
    {
        v = v % 360;
        return (v < 0) ? 360 + v : v;
    }
    
    function unsigned(i)
    {
        // the >>> operator will force unsigned
        return i >>> 0;
    }
    
    function trimLc(s)
    {
        return s.replace(/^\s+/,'').replace(/\s+$/,'').toLowerCase();
    }
        
    function slice(obj, index)
    {
        return Array.prototype.slice.call(obj, index);
    }
    
    function append(arr, value)
    {
        arr.push(value); 
        return arr;
    }
    
    function clamp(x,a,b)
    {
        return !(x > a) ? a : !(x < b) ? b : x;
    }
    
    function mix(x,y,a) 
    { 
        return (1 - a) * x + a * y; 
    }
    
    // Float to byte
    function f2b(f)
    {
        f = Math.round(255 * f);
        if (!(f > 0)) return 0;
        else if (!(f < 255)) return 255;
        else return f & 0xFF;
    }
    
    // Byte to float
    function b2f(b)
    {
        return b / 255.0;
    }

    //-----------------------------------------------------------------------//
    // Color conversion functions
   ...