Creates a color palette based on various input parameters.
Last active
November 3, 2016 16:50
-
-
Save wheresjames/169594d0a341dcfad7a1ea7ae2e1fe1a to your computer and use it in GitHub Desktop.
Color palette creator.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment