I like to use formulaic color schemes in my web development sometimes, but generating them with tools like kuler is not very maintainable. So I decided to write some LESS color formulas to generate some of the most common color schemes, and share it with you.
Create the following color schemes
Each color scheme takes two parameters, @baseColor and @difference, @distance, or @angle. Except for the complimentary scheme, which only takes @baseColor.
@baseColor: #2865CC;
// Shades
@difference: 10%; // Difference (in perecent) between each shade
@shade1: lighten(@baseColor, (@difference * 2));
@shade2: lighten(@baseColor, @difference);
@shade3: @baseColor;
@shade4: darken(@baseColor, @difference);
@shade5: darken(@baseColor, (@difference * 2));
// Analgous
@distance1: 10; // Degrees between each analgous color
@analgous1: spin(@baseColor, (@distance1 * 2));
@analgous2: spin(@baseColor, @distance1);
@analgous3: @baseColor;
@analgous4: spin(@baseColor, (@distance1 * -1));
@analgous5: spin(@baseColor, (@distance1 * -2));
// Complementary
@complementary1: @baseColor;
@complementary2: spin(@baseColor, 180);
// Split Complementary
@distance2: 80; // Degrees between the two complementary colors
@splitComp1: spin(@baseColor, ((360 - @distance2) / 2));
@splitComp2: @baseColor;
@splitComp3: spin(@baseColor, (((360 - @distance2) / 2) * -1));
// Clash
@angle: 45; // Angle formed at base of isosceles triangle
@clash1: spin(@baseColor, (@angle * -2));
@clash2: @baseColor;
@clash3: spin(@baseColor, (@angle * 2));
// Triadic
@distance3: 120; // Degrees between the two new colors
@triad1: @baseColor;
@triad2: spin(@baseColor, (180 - (@distance3 * 0.5)));
@triad3: spin(@baseColor, (180 + (@distance3 * 0.5)));
// Tetradic
@distance4: 90; // Degrees between two closest colors
@tetrad1: @baseColor;
@tetrad2: spin(@baseColor, @distance4);
@tetrad3: spin(@baseColor, 180);
@tetrad4: spin(@baseColor, (180 + @distance4));
// Five tone
@distance5: 30; // Degrees between the 4 analgous colors
@5tone1: @baseColor;
@5tone2: spin(@baseColor, (180 - (@distance5 * 1.5)));
@5tone3: spin(@baseColor, (180 - (@distance5 * 0.5)));
@5tone4: spin(@baseColor, (180 + (@distance5 * 0.5)));
@5tone5: spin(@baseColor, (180 + (@distance5 * 1.5)));
// Six tone
@distance6: 20; // Distance between the colors of each analgous pair
// Pair 1
@6tone1: @baseColor;
@6tone2: spin(@baseColor, @distance6);
// Pair 2
@6tone3: spin(@baseColor, (120 - (@distance6 * 0.5)));
@6tone4: spin(@baseColor, (120 + (@distance6 * 0.5)));
// Pair 3
@6tone5: spin(@baseColor, (-120 + (@distance6 * 0.5)));
@6tone6: spin(@baseColor, (-120 - (@distance6 * 0.5)));
The only dependancy is LESS.