wheresjames/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Color palette creator.

Creates a color palette based on various input parameters.
DEMO

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">

<style>

.tile
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.toolbar
{
    position: absolute;
    padding: 0;
    margin: 1em;
    left: 0;
    top: 0;
    right: 0;
}

.outerbox
{
    position: absolute;
    border: 2px dashed #ccc;
    padding: 1em;
    margin: 1em;
    left: 0;
    top: 100px;
    right: 0;
    bottom: 0;
}

.ctrl-place
{
    float: left;
    margin: 0 1em;
    width: 300px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}


.slider
{
    width: 200px;
    margin: 0 1em;
}

input[type=checkbox]
{
    margin: 0 .5em;
}

</style>


<body>

    <div class="toolbar">
        <span class="ctrl-place">
            Red <div id="red_slider" class="slider"></div>
        </span>
        <span class="ctrl-place">
            Green <div id="green_slider" class="slider"></div>
        </span>
        <span class="ctrl-place">
            Blue <div id="blue_slider" class="slider"></div>
        </span>
        <span class="ctrl-place">
            Shades <div id="shades" class="slider"></div>
        </span>
        <span class="ctrl-place">
            Step <div id="step" class="slider"></div>
        </span>
        <span class="ctrl-place">
            <input id="full" type="checkbox">Complimentary Colors
        </span>
    </div>

	<div class="outerbox">
	</div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>

    function calcCol(i, r, g, b, m)
    {
        var vr = Math.min(Math.max(parseInt(i * (r + m)), 0), 255);
        var vg = Math.min(Math.max(parseInt(i * (g + m)), 0), 255);
        var vb = Math.min(Math.max(parseInt(i * (b + m)), 0), 255);

        var c = "#" + ("00"+(vr).toString(16)).substr(-2)
                   + ("00"+(vg).toString(16)).substr(-2)
                   + ("00"+(vb).toString(16)).substr(-2);

        return c;
    }

    function calcShades(pal, i, r, g, b, shades, dist)
    {
        for(var s = 0; s < shades; s++)
            pal.push(calcCol(i, r, g, b, s * dist));
    }

    function calcPal(full, min, max, step, r, g, b, shades, dist)
    {
        var pal = [];
        for(var i = min; i <= max; i += step)
        {
            calcShades(pal, i, r, g, b, shades, dist);
            if (full)
            {
                calcShades(pal, i, r, b, g, shades, dist);
                calcShades(pal, i, g, b, r, shades, dist);
                calcShades(pal, i, g, r, b, shades, dist);
                calcShades(pal, i, b, r, g, shades, dist);
                calcShades(pal, i, b, g, r, shades, dist);
            }
        }
        return pal;
    }

    function showPalette()
    {
        var r = $('#red_slider').slider("option", "value");
        var g = $('#green_slider').slider("option", "value");
        var b = $('#blue_slider').slider("option", "value");
        var shades = 1 + $('#shades').slider("option", "value") * 10;
        var step = ($('#step').slider("option", "value") + .1) / 10;
        var full = $('#full').is(":checked");

        // Create the palette
        var pal = calcPal(full, 150, 250, 25, r, g, b, shades, -step);

        // Choose a grid size large enough to hold all the colors
        var s = Math.sqrt(pal.length);
        if (s > parseInt(s))
            s = parseInt(s) + 1;

        // Size of the container
        var box = $('.outerbox').empty();
        var w = box.innerWidth();
        var h = box.innerHeight();

        var x = 0, y = 0, bw = 100 / s, bh = 100 / s;
        $.each(pal, function(k, v)
        {
            var bx = parseInt(x * bw);
            var by = parseInt(y * bh);

            var tile = $('<div class="tile">' + v + '</div>');

            tile.css('left', bx + '%');
            tile.css('top', by + '%');
            tile.css('width', bw + '%');
            tile.css('height', bh + '%');
            tile.css('background', v);

            box.append(tile);

            if (++x >= s)
                x = 0, y++;
        });
    }

    $( function()
    {
        $(".slider").slider({ min: 0, max: 1, step: 0.1, change: function() { showPalette(); } });
        $('#red_slider').slider("option", "value", .5);
        $('#green_slider').slider("option", "value", .75);
        $('#blue_slider').slider("option", "value", 1);
        $('#shades').slider("option", "value", .7 );
        $('#step').slider("option", "value", .1);
        $('#full').on("click", function() { showPalette(); });

        showPalette();
    });

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">

	<style>

	.tile
	{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	}

	.toolbar
	{
	position: absolute;
	padding: 0;
	margin: 1em;
	left: 0;
	top: 0;
	right: 0;
	}

	.outerbox
	{
	position: absolute;
	border: 2px dashed #ccc;
	padding: 1em;
	margin: 1em;
	left: 0;
	top: 100px;
	right: 0;
	bottom: 0;
	}

	.ctrl-place
	{
	float: left;
	margin: 0 1em;
	width: 300px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	}


	.slider
	{
	width: 200px;
	margin: 0 1em;
	}

	input[type=checkbox]
	{
	margin: 0 .5em;
	}

	</style>


	<body>

	<div class="toolbar">
	<span class="ctrl-place">
	Red <div id="red_slider" class="slider"></div>
	</span>
	<span class="ctrl-place">
	Green <div id="green_slider" class="slider"></div>
	</span>
	<span class="ctrl-place">
	Blue <div id="blue_slider" class="slider"></div>
	</span>
	<span class="ctrl-place">
	Shades <div id="shades" class="slider"></div>
	</span>
	<span class="ctrl-place">
	Step <div id="step" class="slider"></div>
	</span>
	<span class="ctrl-place">
	<input id="full" type="checkbox">Complimentary Colors
	</span>
	</div>

	<div class="outerbox">
	</div>

	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

	<script>

	function calcCol(i, r, g, b, m)
	{
	var vr = Math.min(Math.max(parseInt(i * (r + m)), 0), 255);
	var vg = Math.min(Math.max(parseInt(i * (g + m)), 0), 255);
	var vb = Math.min(Math.max(parseInt(i * (b + m)), 0), 255);

	var c = "#" + ("00"+(vr).toString(16)).substr(-2)
	+ ("00"+(vg).toString(16)).substr(-2)
	+ ("00"+(vb).toString(16)).substr(-2);

	return c;
	}

	function calcShades(pal, i, r, g, b, shades, dist)
	{
	for(var s = 0; s < shades; s++)
	pal.push(calcCol(i, r, g, b, s * dist));
	}

	function calcPal(full, min, max, step, r, g, b, shades, dist)
	{
	var pal = [];
	for(var i = min; i <= max; i += step)
	{
	calcShades(pal, i, r, g, b, shades, dist);
	if (full)
	{
	calcShades(pal, i, r, b, g, shades, dist);
	calcShades(pal, i, g, b, r, shades, dist);
	calcShades(pal, i, g, r, b, shades, dist);
	calcShades(pal, i, b, r, g, shades, dist);
	calcShades(pal, i, b, g, r, shades, dist);
	}
	}
	return pal;
	}

	function showPalette()
	{
	var r = $('#red_slider').slider("option", "value");
	var g = $('#green_slider').slider("option", "value");
	var b = $('#blue_slider').slider("option", "value");
	var shades = 1 + $('#shades').slider("option", "value") * 10;
	var step = ($('#step').slider("option", "value") + .1) / 10;
	var full = $('#full').is(":checked");

	// Create the palette
	var pal = calcPal(full, 150, 250, 25, r, g, b, shades, -step);

	// Choose a grid size large enough to hold all the colors
	var s = Math.sqrt(pal.length);
	if (s > parseInt(s))
	s = parseInt(s) + 1;

	// Size of the container
	var box = $('.outerbox').empty();
	var w = box.innerWidth();
	var h = box.innerHeight();

	var x = 0, y = 0, bw = 100 / s, bh = 100 / s;
	$.each(pal, function(k, v)
	{
	var bx = parseInt(x * bw);
	var by = parseInt(y * bh);

	var tile = $('<div class="tile">' + v + '</div>');

	tile.css('left', bx + '%');
	tile.css('top', by + '%');
	tile.css('width', bw + '%');
	tile.css('height', bh + '%');
	tile.css('background', v);

	box.append(tile);

	if (++x >= s)
	x = 0, y++;
	});
	}

	$( function()
	{
	$(".slider").slider({ min: 0, max: 1, step: 0.1, change: function() { showPalette(); } });
	$('#red_slider').slider("option", "value", .5);
	$('#green_slider').slider("option", "value", .75);
	$('#blue_slider').slider("option", "value", 1);
	$('#shades').slider("option", "value", .7 );
	$('#step').slider("option", "value", .1);
	$('#full').on("click", function() { showPalette(); });

	showPalette();
	});

	</script>