steveosoule
10/25/2016 - 9:51 PM

Color Scheme Generator

Color Scheme Generator

// Endpoint
var tonicExpress = require("notebook")("tonic/express-endpoint/1.0.0")
var app = tonicExpress(module.exports);

// Colors
var color = require("color");
var colorjs = require("color-js");
var _ = require("lodash");

// Functions
var tint_tone_shade_from_color = function(color){
	var White = colorjs({hue: 0, saturation: 0, lightness: 1});
	var Grey = colorjs({hue: 0, saturation: 0, lightness: 0.5});
	var Black = colorjs({hue: 0, saturation: 0, lightness: 0});

	return {
		color: color.toCSS(),
		tints: [
			color.blend( White, 1).toCSS(),
			color.blend( White, 0.9).toCSS(),
			color.blend( White, 0.8).toCSS(),
			color.blend( White, 0.7).toCSS(),
			color.blend( White, 0.6).toCSS(),
			color.blend( White, 0.5).toCSS(),
			color.blend( White, 0.4).toCSS(),
			color.blend( White, 0.3).toCSS(),
			color.blend( White, 0.2).toCSS(),
			color.blend( White, 0.1).toCSS(),
		],
		shades: [
			color.blend( Black, 1).toCSS(),
			color.blend( Black, 0.9).toCSS(),
			color.blend( Black, 0.8).toCSS(),
			color.blend( Black, 0.7).toCSS(),
			color.blend( Black, 0.6).toCSS(),
			color.blend( Black, 0.5).toCSS(),
			color.blend( Black, 0.4).toCSS(),
			color.blend( Black, 0.3).toCSS(),
			color.blend( Black, 0.2).toCSS(),
			color.blend( Black, 0.1).toCSS()
		],
		tones: [
			color.blend( Grey, 1).toCSS(),
			color.blend( Grey, 0.9).toCSS(),
			color.blend( Grey, 0.8).toCSS(),
			color.blend( Grey, 0.7).toCSS(),
			color.blend( Grey, 0.6).toCSS(),
			color.blend( Grey, 0.5).toCSS(),
			color.blend( Grey, 0.4).toCSS(),
			color.blend( Grey, 0.3).toCSS(),
			color.blend( Grey, 0.2).toCSS(),
			color.blend( Grey, 0.1).toCSS(),
		]
	};
};

var generate_theme = function(hexColor){

	// Base Theme Object
	var theme = {};

	theme.primary = hexColor;
	theme.dark = colorjs({hue: 0, saturation: 0, lightness: 0.1}).toCSS();
	theme.light = colorjs({hue: 0, saturation: 0, lightness: 0.9}).toCSS();
	theme.schemes = {};

	// Color JS Variables
	var colorjs_scheme_methods = ['complementaryScheme', 'splitComplementaryScheme', 'splitComplementaryCWScheme', 'splitComplementaryCCWScheme', 'triadicScheme', 'clashScheme', 'tetradicScheme', 'fourToneCWScheme', 'fourToneCCWScheme', 'fiveToneAScheme', 'fiveToneBScheme', 'fiveToneCScheme', 'fiveToneDScheme', 'fiveToneEScheme', 'sixToneCWScheme', 'sixToneCCWScheme', 'neutralScheme', 'analogousScheme'];
	var colorjs_scheme_method_sample = ['complementaryScheme', 'splitComplementaryScheme', 'analogousScheme'];

	// Generate It
	theme.schemes.monochromatic = [tint_tone_shade_from_color(colorjs(theme.primary))];

	_.forEach(colorjs_scheme_methods, function(method){
		theme.schemes[method] = colorjs(theme.primary)[method]();
		theme.schemes[method] = _.map(theme.schemes[method], tint_tone_shade_from_color);
	});

	return theme;
};


var generate_theme_html = function(hexColor){

	var html = '<h1>Color Schemes for: ' + hexColor + '</h1>';
	var theme = generate_theme(hexColor);

	_.forEach(theme.schemes, function(swatches, name){
		html += '<br><br><br><hr><br><h2>' + name + '</h2>';
		_.forEach(swatches, function(swatch){
			html += '<br><!-- <h3>' + swatch.color + '</h3> -->';
			html +=  '<input type="color"  value="' + swatch.color + '" />';

			html += '<br><!-- <h4>Tints</h4> -->';
			_.forEach(swatch.tints, function(tint){
				html +=  '<input type="color"  value="' + tint + '" />';
			});


			html += '<br><!-- <h4>Tones</h4> -->';
			_.forEach(swatch.tones, function(tone){
				html +=  '<input type="color"  value="' + tone + '" />';
			});

			html += '<br><!-- <h4>Shades</h4> -->';
			_.forEach(swatch.shades, function(shade){
				html +=  '<input type="color"  value="' + shade + '" />';
			});
		});
	});

	return html;
};

// API Routing
app.get("/html/:hexColor", function(req, res){
	res.send( generate_theme_html('#' + req.params.hexColor) );
});

app.get("/json/:hexColor", function(req, res){
	var theme = generate_theme('# ' + req.params.hexColor);

	res.set('Content-Type', 'text/json');
	res.send( JSON.stringify(theme) );
});

app.get("/", function(req, res){
	res.send( '<a href="html/ef5924">HTML</a> | <a href="json/ef5924">JSON</a>' );
});

Color Scheme Generator API

JSON

HTML