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: #f5f5f5Unwelcome 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;
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;
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);
}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
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.