Color wheel

by timothyausten

HTML

<script src="https://rawgit.com/timothyausten/TinyColor/master/tinycolor.js"></script>
<div id="outOfRange"></div>
<div id="normalized"></div>

JavaScript

/* Color circle:
 * Tinycolor.js does not accept
 * out-of-range hues.
 * Adding a random amount to the hue value
 * can cause it to go outside of its 0-360 range
 * To avoid this, and maintain a color circle,
 * values outside the scale should be reassigned.
 * In this example,
 * the out-of-range hue can be any numerical
 * value, even if it is negative.
 * The same functionality can be added to the
 * .spin() method.
 */

// Test cdn
// https://rawgit.com/bgrins/TinyColor/master/tinycolor.js
// Production cdn
// https://cdn.jsdelivr.net/tinycolor/1.2.1/tinycolor-min.js

var outOfRangeHue = -700;

// Core function to add to tinycolor.js
function normalizeOutOfRangeHue(n) {
    return n < 0 ? n % 360 + 360 : n % 360;
}

function write2doc() {
    // Show output in document
    var normalizedHue;
    outOfRangeHue += 1;
    normalizedHue = normalizeOutOfRangeHue(outOfRangeHue);

    function htmlOutput(hue, hueDesc, rangeId) {
        var hslString = 'hsl ' + hue + ' 100% 50%';
        hueHtml = hueDesc +
            hue + '<br>' +
            tinycolor(hslString).toHslString();
        document.getElementById(rangeId)
            .style
            .backgroundColor = tinycolor(hslString).toRgbString();
        document.getElementById(rangeId)
            .innerHTML = hueHtml;
    }
    htmlOutput(outOfRangeHue, 'Out-of-range hue: ', 'outOfRange');
    htmlOutput(normalizedHue, 'Normalized hue: ', 'normalized');
}
setInterval(write2doc, 10);