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>' );
});