A Pen by Zaus.

Flat-UI-Color-Swatch-Generator.markdown

Flat-UI Color Swatch Generator

I liked the colors, but didn't like the Flash plugin on http://flatuicolors.com/.

And 100% JS, for no reason other than it's fun.

A Pen by Zaus on CodePen.

License.

index.html

<p>Lame Color swatch "generator", based on <a href="http://flatuicolors.com/#">Flat-Ui Colors</a>, because I didn't like the fact that it needed a flash plugin.</p>
<p>Click each swatch to select the color for copying.</p>

script.js

var Swatches = (function(d) {

var cell = function(name, color) {
	var o = d.createElement('div');
	o.style['background-color'] = color;
	o.innerHTML = '<b>' + name + '</b><br/><input type="text" value="' + color + '" />';
	o.onclick = function(e) { e.target.lastChild.select(); };
	return o;
};

var append = function(root, child) {
	root.appendChild(child);
};

return function(root, colors) {
	var style = d.createElement('style');
	style.type = "text/css";
  style.innerHTML = '#flatui-colors { height: 100%; } #flatui-colors b { text-transform:uppercase; color:#fff; } #flatui-colors div { width: 18%; height:24%; display:inline-block; text-align:center; padding-top:12%; } #flatui-colors input { background:transparent; border:none; font-family:monospace; text-align:center; }';
	append(root, style);

	var box = d.createElement('div');
	box.id = 'flatui-colors';
	for(var c in colors) {
		// console.log(c, colors[c]);
		append(box, cell(c, colors[c]));
	}
	append(root, box);
};

})(document);

Swatches(document.body, {
	'turquoise': '#1abc9c',
	'emerland': '#2ecc71',
	'peter-river': '#3498db',
	'amethyst': '#9b59b6',
	'wet-asphalt': '#34495e',
	'green-sea': '#16a085',
	'nephritis': '#27ae60',
	'belize-hole': '#2980b9',
	'wisteria': '#8e44ad',
	'midnight-blue': '#2c3e50',
	'sun-flower': '#f1c40f',
	'carrot': '#e67e22',
	'alizarin': '#e74c3c',
	'clouds': '#ecf0f1',
	'concrete': '#95a5a6',
	'orange': '#f39c12',
	'pumpkin': '#d35400',
	'pomegranate': '#c0392b',
	'silver': '#bdc3c7',
	'asbestos': '#7f8c8d'
});

style.css

div { font-family: Verdana, Geneva, sans-serif; }
p { text-align:center; margin-bottom:1em; }