Creating a color scheme

by | Jun 14, 2015 | Technical, Walkthroughs

Creating a color scheme is both an art and a science.  There are places online that suggest color schemes like Adobe Kuler.  But what if you wanted to create your own color scheme?  Well, using LESS – it’s straightforward.

Complementary

@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);

Monochrome

@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

 

In the above cases, you choose a color for your base and run from there.  Reference: Design Shack.