• library_books today Jan 12, 2015
    • Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

Creating Color Palette with SASS

Color Palette

Maintaining multiple color themes with a project is tedious task for a developer. SASS is popular CSS pre-processor. It works with simple motto - "reducing efforts with improved CSS".

While writing this post, I am targeting people who are familiar with CSS and have little knowledge about any CSS pre-processors like SASS, LESS or Stylus.

About SASS

Syntactically Awesome Style Sheets also called SASS in short. SASS is popular CSS pre-processor, helps to drive CSS magically with improved code. You can write in modular pattern. It allows to define variables (as in JS), reduce redundant classes with @extend, declaring a JS like functions with @mixin and many more.

SASS Example

#nav{
  background: #fff;
  padding: 10px;
  li{
    float: left; 
    margin-right: 10px;
    &:last-child{
      margin-right: 0;
    }
    a{
      padding: 5px;
      &:hover, 
      &.active{
        background: #666;
    }
  }
}

CSS Output

#nav{ 
  background: #fff; 
}
#nav li{ 
  float: left;
  margin-right: 10px;
}
#nav li:last-child{
  margin-right: 0;
}
#nav li a{ 
  padding: 5px; 
}
#nav li a:hover, 
#nav li a.active{ 
  background: #666; 
}

Today we will focus on "Creating Color Palette with SASS".

Mindset

Let's assume a requirement where client wants 5 different color scheme options to the end-user.

Let me clear on 5 different color schemes as a theme - that means theme-atheme-b, theme-c and so on. Each theme would be having 4-5 different colors as a branding options. Let's say - neutral, primary, secondary, territory and quaternary.

Color Palette

Below I tried to explain HTML, CSS and SASS code for a single color scheme and it is having about 30 lines of CSS. So if requirement demands for 5 different color schemes then it would take 150 lines of CSS code approximately.

Below code is having "theme-a" as a theme name. On basis of theme name, the CSS has been coded for the structure with sub-classes (i.e.:  neutral-b, primary-bg, etc.). .box  is a helper class only to give physical visibility to DIVs.

HTML

<div class="theme-a">
    <div class="box neutral-bg">Neutral</div>
    <div class="box primary-bg">Primary</div>
    <div class="box secondary-bg">Secondary</div>
    <div class="box territory-bg">Territory</div>
    <div class="box quaternary-bg">Quaternary</div>
</div>

CSS

.theme-a .nuetral-bg {
  background: rgba(0, 255, 153, 0.5);
}
.theme-a .nuetral-bg:hover {
  background: rgba(0, 255, 153, 0.75);
}
.theme-a .primary-bg {
  background: rgba(255, 140, 0, 0.5);
}
.theme-a .primary-bg:hover {
  background: rgba(255, 140, 0, 0.75);
}
.theme-a .secondary-bg {
  background: rgba(255, 0, 38, 0.5);
}
.theme-a .secondary-bg:hover {
  background: rgba(255, 0, 38, 0.75);
}
.theme-a .teritory-bg {
  background: rgba(128, 255, 0, 0.5);
}
.theme-a .teritory-bg:hover {
  background: rgba(128, 255, 0, 0.75);
}
.theme-a .quaternary-bg {
  background: rgba(183, 0, 255, 0.75);
}
.theme-a .quaternary-bg:hover {
  background: #b700ff;
}

SASS

/* declaring variables */
$neutralColor: rgba(0, 255, 153, 0.5);
$neutralColorHover: rgba(0, 255, 153, 0.75);

$primaryColor: rgba(255, 140, 0, 0.5);
$primaryColorHover: rgba(255, 140, 0, 0.75);

$secondaryColor: rgba(255, 0, 38, 0.5);
$secondaryColorHover: rgba(255, 0, 38, 0.75);

$teritoryColor: rgba(128, 255, 0, 0.5);
$teritoryColorHover: rgba(128, 255, 0, 0.75);

$quaternaryColor: rgba(183, 0, 255, 0.75);
$quaternaryColorHover: rgba(183, 0, 255, 1);


.theme-a{
  .neutral-bg {
    background: $neutralColor;
    &:hover{
      background: $neutralColorHover;
    }
  }
  .primary-bg {
    background: $primaryColor;
    &:hover {
      background: $primaryColorHover;
    }
  }
  .secondary-bg {
    background: $secondaryColor;
    &:hover {
      background: $secondaryColorHover;
    }
  }
  .teritory-bg {
    background: $teritoryColor;
    &:hover {
      background: $teritoryColorHover;
    }
  }
  .quaternary-bg {
    background: $quaternaryColor;
    &:hover {
      background: $quaternaryColorHover;
    }
  }
}

After all processes one question is obvious to ask our self - Is there any way we can make it simpler for developer?

Well! I am not sure about specific color codes but yes I tried with logical way and that works for me at some level*.

Declaring MIXIN

For non-technical people reading this article - @mixin is one of the feature of SASS allows to declare logical code which is almost similar to a function in JavaScript.

I am declaring @mixin with two arguments:

  1. $name : Taking theme name
  2. $color : Taking color code as an input

Currently I am declaring @mixin for a background color but if you need, you can do it for foreground color (font-color) as well.

@mixin theme($name, $color) {}

We can call @mixin using @include method of SASS. It may be coded more dynamically with help of core developer.

Calling with INCLUDE

@include is another feature of SASS allows to call @mixin. Below I am calling @mixin theme in SASS file where theme-a & #FF8C00 are theme name and color code accordingly.

@include theme(theme-a, #FF8C00);

As you can see in above code there are only one color passed and there is no specification for sub classes too. So next thing we need a logic to generate 5 different color variations with appropriate class names.

Manipulating with MIXIN Arguements

We have been already declared color variables with $ symbol. Now we have to play with colors and that is possible using color manipulation option in SASS.

@mixin theme($name, $color) {
  $neutralColor: rgba(adjust-hue($color, 123), .5);
  $neutralColorHover: rgba(adjust-hue($color, 123), .75);

  $primaryColor: rgba(adjust-hue($color, 0), .5);
  $primaryColorHover: rgba(adjust-hue($color, 0), .75);

  $secondaryColor: rgba(adjust-hue($color, 678), .5);
  $secondaryColorHover: rgba(adjust-hue($color, 678), .75);

  $teritoryColor: rgba(adjust-hue($color, 777), .5);
  $teritoryColorHover: rgba(adjust-hue($color, 777), .75);

  $quaternaryColor: rgba(adjust-hue($color, 250), .75);
  $quaternaryColorHover: rgba(adjust-hue($color, 250), 1);
}

Above code will take $color  as a $primaryColor  and then with color manipulators like rgba and adjust-hue help to generate other variations. But this way we can generate only random colors and cannot get awesome color combination as on Adobe Kuler. Experts can comment much better logic and help the community.

Creating Sub Classes

.#{$name} {

    /* nuetral BG */
    .neutral-bg {
      background: $neutralColor;
      &:hover{
        background: $neutralColorHover;
      }
    }

    /* BASE COLOR - primary BG */
    .primary-bg {
      background: $primaryColor;
      &:hover{
        background: $primaryColorHover;
      }
    }

    /* secondary BG */
    .secondary-bg {
      background: $secondaryColor;
      &:hover{
        background: $secondaryColorHover;
      }
    }

    /* teritory BG */
    .teritory-bg {
      background: $teritoryColor;
      &:hover{
        background: $teritoryColorHover;
      }
    }

    /* quaternary BG */
    .quaternary-bg {
      background: $quaternaryColor;
      &:hover{
        background: $quaternaryColorHover;
      }
    }

SASS Complete Code

@mixin theme($name, $color) {
  
  /* declaring color variables */
  
  $neutralColor: rgba(adjust-hue($color, 123), .5);
  $neutralColorHover: rgba(adjust-hue($color, 123), .75);
  
  $primaryColor: rgba(adjust-hue($color, 0), .5);
  $primaryColorHover: rgba(adjust-hue($color, 0), .75);

  $secondaryColor: rgba(adjust-hue($color, 678), .5);
  $secondaryColorHover: rgba(adjust-hue($color, 678), .75);

  $teritoryColor: rgba(adjust-hue($color, 777), .5);
  $teritoryColorHover: rgba(adjust-hue($color, 777), .75);

  $quaternaryColor: rgba(adjust-hue($color, 250), .75);
  $quaternaryColorHover: rgba(adjust-hue($color, 250), 1);
  
  
  /*  sub-classes 
      $name = theme name with @include
  */
  .#{$name} {

    /* BASE COLOR - nuetral BG */
    .neutral-bg {
      background: $neutralColor;
      &:hover{
        background: $neutralColorHover;
      }
    }

    /* primary BG */
    .primary-bg {
      background: $primaryColor;
      &:hover{
        background: $primaryColorHover;
      }
    }

    /* secondary BG */
    .secondary-bg {
      background: $secondaryColor;
      &:hover{
        background: $secondaryColorHover;
      }
    }

    /* teritory BG */
    .teritory-bg {
      background: $teritoryColor;
      &:hover{
        background: $teritoryColorHover;
      }
    }

    /* quaternary BG */
    .quaternary-bg {
      background: $quaternaryColor;
      &:hover{
        background: $quaternaryColorHover;
      }
    }
  }
}

/*  calling @mixin using @include 
    where "theme-a" = theme name
    and   "#FF8C00" = color code
*/
@include theme(theme-a, #FF8C00);

/* helper class */
.box{ 
  width: 200px; 
  height: 200px; 
  margin: 10px; 
  float: left; 
}

Demo

Conclusion

This article will give you hint to create something awesome. Though this doesn't help to generate specific colors but at some level it will boost up your view to write more code with less efforts.

I am eagerly looking for your reaction in below comment section.