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?