Being Smart with Colours in CSS/SCSS/LESS

I saw a question on reddit the other day about how professionals use colors in CSS. Having built a website or two for some of the top global brands I decided to detail what i believe as a good standard for professional color systems in CSS.

Use SCSS… No really.

The days of using CSS are gone. SCSS and LESS offer so much more. The techniques I use will all relate to SCSS but these can easily be adopted with any CSS pre processor.

RGBa, HSLa or HEX?

Regardless of what color system you use in SCSS or LESS all solid color’s get converted to hexadecimal colors. Also all color systems that have an alpha/transparency will convert to RGBa.

I personally like HSLa because of it’s no nonsense approach to naming and properties: Hue, Saturation, Lightness, Alpha. If you need to lighten a color all you need to do is increase or lower the percentage. I highly recommend visiting http://mothereffinghsl.com/ 

If using HSLa or RGBa when you define a non transparent color like: rgba(50, 50, 50, 1.0) sass will convert this to a HEX value. Sweet.

If you need to support Internet Explorer or below sadly you can’t use RGBa or HSLa. But on the upside because SASS and LESS converts HSL to HEX you can in fact use HSL with IE6. Bonus!

One last thing. In a professional environment when working with global brands, you will almost always be handed a style guide which you will have to adhere to. In this case you pretty much use what ever color system they suggest.

Variables, VARIABLES!

One of the great things that CSS pre processors introduced was variables in CSS. Finally. With colors I like to define only the main colors outlined in the style guide.

A style guide would normally give you 5 to 10 different colors. Naming should be memorable so developers can code without stoppage. Here is an example of the main variables for a fictitious brand. These would sit in the varibles.scss file in your project.

$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);

colours

Note: Sass has a base set of pre-defined color variables. These can be seen here.

Now you have your base colors you will want variations of these transparent and solid. The best way is to use new variables that call the base color variables and apply one of the many SCSS functions:

red($color)
This returns the Red component of a colour as a number. there is also a green() and blue()
example: red(#efffef); returns 239.

mix($color1, $color2, [$weight])
If you want to mix two colours together this is the function to use.
example: mix(red, yellow, 50%) returns #FF7F00

lighten($color, $amount)
This will darken a color by a percentage.
example: darken(white, 50%) will return gray

darken($color, $amount)
Like lighten() this does the opposite and lightens the colour.
example: lighten(black, 10%) returns #1a1a1a

complement($color)
This will return the complement color. It’s actual function is: adjust-hue(color, 180deg)
example: complement(green) returns purple

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
This will adjust a colour by property.
example: adjust-color(blue, $blue: -100, $alpha: -0.5) will return rgba(0, 0, 155, 0.5)

ie-hex-str($color)
This converts colors that can be understood by IE filters
example: ie-hex-str(green) will return #FF008000

There are many other functions that I have left out. They can be found here: http://sass-lang.com/documentation/Sass/Script/Functions.html

Example Brand Color Set

Below is what a color brand set would look like. With this setup if the company or yourself decide to change the main colors you only need to change the base colors and the rest will inherit from these variables. This really is a godsend for CSS.

// base colors
$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);

// darker base colors
$mustard-dark: darken($mustard, 15%);
$navy-dark: darken($navy, 15%);
$mustard-darker: darken($mustard, 20%);
$navy-darker: darken($navy, 20%);

// lighter base colors
$mustard-light: lighten($mustard, 25%);
$navy-light: darken($navy, 25%);
$mustard-lighter: lighten($mustard, 50%);
$navy-lighter: darken($navy, 50%);

// complementary colors
$navy-complementary: complement($navy);
$teal-complementary: complement($teal);
$saltWater-complementary: complement($saltWater);
$mustard-complementary: complement($mustard);
$tangerine-complementary: complement($tangerine);

Alternate colours are created with sass functions like Lighten or Darken to create shades and complementary colors sets.

When styling the site you can just use these color variables knowing that a color change is no hassle at all.

My suggestion be creative with your colours and embrace the functions that sass provides to change and manipulate the colors.

A basic CSS Grid layout with a few lines of SASS.

I’ve found rolling my own ‘Grids’ layout a much better option than using a framework. I’ve refined it down to this small bit of SCSS.


.row{
  @for $i from 1 through 12 {
    .grid-#{$i} {
      width: 100% / 12 * $i;
      float: left;
    }
  }
  clear: both
}

Then in your markup just define how many of the 12 grids you want the column to take up.

<div class="row">
    <div class="grid-6">Column A</div>
    <div class="grid-6">Column B</div>
</div>
<div class="row">
    <div class="grid-4">Column A</div>
    <div class="grid-4">Column B</div>
    <div class="grid-4">Column C</div>
</div>
<div class="row">
    <div class="grid-8">Column B</div>
    <div class="grid-4">Column C</div>
</div>

An example can be found here: http://jsfiddle.net/awKQ7/

Chrome 38 Introduces a Responsive Design View

Chrome 38 has introduced a responsive design view in Chrome Developer tools. It allows you to view the available breakpoints for the loaded site. Clicking each of the bars resizes the window to the specified breakpoint or selecting the device will resize the window to that devices resolution.

As well as User Agent spoofing It also introduces network throttling to produce near real device simulations for development.

Chrome version 38 is available in Chrome Canary build.

Capture