Generate colour schemes from single colour with LESS

less-colours.less

// LESS COLOUR SCHEMES

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

// Implementation 
// .one   {color: @base;}
// .two   {color: @complement1;}
// .three {color: @complement2;}
// .four  {color: @lighten1;}
// .five  {color: @lighten2;}

// Subtle Color Scheme
@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%);
 
// Implementation
// .one   {color: @base;}
// .two   {color: @lighter1;}
// .three {color: @lighter2;}
// .four  {color: @darker1;}
// .five  {color: @darker2;}

// Another Idea
// Generating an entire color scheme from 1 color using LESS CSS

@c: rgb(58, 155, 255);

@c-dark-1: darken(@c, 10%);
@c-dark-2: darken(@c, 20%);
@c-light-1: lighten(@c, 10%);
@c-light-2: lighten(@c, 20%);

@c-split-1: spin(@c, 150);
@c-split-1-l: lighten(@c-split-1, 10%);
@c-split-1-d: darken(@c-split-1, 10%);

@c-split-2: spin(@c, 200);
@c-split-2-l: lighten(@c-split-2, 10%);
@c-split-2-d: darken(@c-split-2, 10%);pach