Managing Colour Variables

@jordanlewiz

button{
  background-color: #FF0000;
}

a {
  color: #FF0000;
}

$red: #FF0000;

button{
  background-color: $red;
}

a {
  color: $red;
}

// config.scss
$red: #FF0000;


    
    
    
// config.scss
$red: #FF0000;
$red-dark: #A00202;
$blue: #0000FF;
$blue-a-tad-darker: #0000CE;
$royalBlue: lighten($blue, 5%);
$link-color: #00FFCC;

Expectation

Reality

Pitfalls

Inconsistent use of
colours and variables


a{  color: #ff0000; }
b{  color: red; }
i{  color: $red-dark; }
li{ color: darken($red, 20%); }

Restrictive & inconsistent
naming conventions


$red6: #BB0000;
$red-border: #BB0000;
$red-a-bit-dark: #BB0000;
$dropdown-hover: #BB0000;

Too many similar colours


$grey-somewhat-light: #9e9e9e
$grey-lightish: #aaa
$grey-light: #bbb
$grey-barely-lighter: #cbcbcb
$grey-slightly-lighter: #c5c5c5
$grey-a-bit-lighter: #d2d1d0
$grey-lighter: #d4d4d4
$grey-lots-lighter: #ddd
$grey-very-light: #e0e0e0
$grey-very-veryish-light: #e3e3e3
$grey-very-very-light: #e5e5e5
$grey-super-light: #eee
$grey-mega-light: #f4f4f4
$grey-ultra-light: #f5f5f5

Unwelcome colours


// Bad
color: darken($red, 20%);

// Good
color: $red-dark;

Types of variables


// Descriptive
$blue: #0000FF;

// Functional
$link-colour: $blue;

Descriptive Variables


are your colour constants which make up the colour palette.

They should describe a colour and be named in a way that is easy to remember and visualise.

Descriptive Variables:


// Good
$red: #FF0000;

// Bad
$fruit-salad: #54A056;

Descriptive Variables:


// Brand colours
$envato-green: #82b541;

// Functions
$blue-light: lighten($blue, 10%);

// HSL or RGB
$blue-dark: hsl(209,100%,32%);

// RGBA?
$white-transparent-rgba: rgba(255,255,255,0.7)

Descriptive Variables:


Colour Names


// Good
$grey-charcoal: #444;

// Not so good
$deep-cerulean: #0077b3;

// The worst
$macaroni-and-cheese: #FFB97B;
// Greys
$mine-shaft: #222;
$emperor:    #555;
$boulder:    #777;
$dusty-gray: #999;
$silver:     #BBB;
$alto:       #DDD;
$gallery:    #EEE;

http://chir.ag/projects/name-that-color

Descriptive Variables:


Colour Description

$grey-extra-dark:  #222;
$grey-dark:        #555;
$grey-mid-dark:    #777;
$grey:             #999;
$grey-mid-light:   #bbb;
$grey-light:       #ddd;
$grey-extra-light: #eee;

http://colorhexa.com

Descriptive Variables:


Scale


$red1: #FF0000;
$red2: #EE0000;
$red3: #CD0000;
$red4: #8B0000;

http://savage.net.au/ImageMagick/im-hax-40-52/im-hax-color-2-config-2.txt

Descriptive Variables:


Sass Maps


color: palette(purple, light);

// config.sass
$palettes: (
    purple: (
        base:   rgb(42,40,80),
        light:  rgb(51,46,140),
        dark:   rgb(40,38,65)
    )
);
 
@function palette($palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}
http://codepen.io/erskine/pen/wLclB

Functional Variables


are colour agnostic and accordingly they should be named to describe a colour’s function rather than the colour itself.

Functional Variables:


$link-color: $blue-light;
$brand-color: $envato-green;
$pagination-active-color: $red;

Functional Variables:


Limited Use


  • Limit to a select set of global descriptive variables
  • Reduces another layer of abstraction


http://bensmithett.com/stop-using-so-many-sass-variables

Functional Variables:


Colour Command Center


// bootstrap/_variables.scss
$pagination-color:             $link-color !default;
$pagination-bg:                #fff !default;
$pagination-border:            #ddd !default;

$pagination-hover-color:       $link-hover-color !default;
$pagination-hover-bg:          $gray-lighter !default;
$pagination-hover-border:      #ddd !default;

$pagination-active-color:      #fff !default;
$pagination-active-bg:         $brand-primary !default;
$pagination-active-border:     $brand-primary !default;

Functional Variables:


Per Module


// _rating.scss
$rating-background: $white;
$rating-color:      $dark-grey;
$rating-star-color: $yellow;

.rating{
 background: $rating-background;
 color: $rating-color;
}

.rating__star{
  color: $rating-star-color;
  // etc
}

Successfully managing colour variables requires
a well defined colour pallet and enforcing a strict set of rules on how colours, variables and functions are used.

Thanks!



Questions?

Managing Colour Variables

By Jordan Lewis

Managing Colour Variables

Sass colour variables and functions can be very powerful tools in your CSS arsenal, but if they are not managed correctly they can easily lose their charm.

  • 2,246
Loading comments...

More from Jordan Lewis