After my JS Color Layer Flattener and research for Web Design for the Non-Designer, I decided to implement the color scheme selection process outlined in WebdesignerDepot’s article How to Get a Professional Look With Color: choose up to five colors; increase to fifteen by adding the result of overlaying each color with translucent black or white; unify the fifteen by overlaying all with a common translucent color. Instead of manual input like the layer flattener, I went with Brian Grinstead’s color picker Spectrum, except for the black and white layers. The colors populate on load via David Merfield’s Random Color script, something I pinned a while ago but never used. I do use the blending part of my color layer flattener to compute hex values for the fifteen resulting colors.

Try it out!

To use it yourself there are two pieces you need: jscsp-form.html and either jscsp-complete.js or jscsp-no-jquery.js. The form includes Spectrum’s CSS and both the scripts include both Spectrum and Random Color; jscsp-complete.js includes jQuery, as you might guess, so use jscsp-no-jquery.js if your site already loads jQuery. At the moment the GitHub repo for this is slightly behind CSS-wise but not functionality-wise.

To use: place a div with id="csp-container" in your page. If the file jscsp-form.html is not at the root of your webpage, assign the container div a data-path attribute with the URL between the domain and jscsp-form.html. For example, for example.com/gadgets/color/jscsp-form.html you would use data-path="gadgets/color". Including or excluding slashes on each end is okay. Call jscsp-complete.js or jscsp-no-jquery.js sometime after the container div.

My intention is to come back to this and add a means to select, say, five of the fifteen resultant colors and have them appear by themselves underneath the current contents, perhaps against both black and white backgrounds.