Color variables in SCSS - Code example

Official color palette for Worksafebc applications and websites




/* WORKSAFEBC - COLORS */


/* BRAND COLORS - PRIMARY */
$white: white;
$black : black;
$grey : #776E64;
$orange: #ED8B00;
$bodycopy: #453F39;

/* BRAND COLORS - SECONDARY */
$mountainblue: #6399AE;
$huckleberryred: #A4343A;
$sunsetorange: #DC4405;
$sunriseyellow: #F1BE48;
$mossgreen: #888D30;
$fire {background: #f1a223;

/* WARM GREYS */
$ashgrey: #F1F0EF;;
$silvergrey: #E4E2E0;
$steelgrey: #C9C5C1;
$smokegrey: #ADA8A2;
$irongrey: #47423C;

/* SPECIAL COLORS */
$palemossgreen: #e7e8d6;
$palemountainblue: #e0ebef;
$palesunriseyellow: #f9e0a0;

/*GENERIC GREY SCALE */
$grey1: #CCCCCC;
$grey2: #999999;
$grey3: #666666;
$grey4: #333333;
$grey5: #000000;

Color variables in CSS - Code example



/* WORKSAFEBC - COLORS CSS VARIABLES*/


:root {

/* BRAND COLORS - PRIMARY */
white: white;
black: black;
grey: #776E64;
orange: #ED8B00;
bodycopy: #453F39;

/* BRAND COLORS - SECONDARY */
mountainblue: #6399AE;
huckleberryred: #A4343A;
sunsetorange: #DC4405;
sunriseyellow: #F1BE48;
mossgreen: #888D30;

/* WARM GREYS SEMANTIC */
ashgrey: #F1F0EF;;
silvergrey: #E4E2E0;
steelgrey: #C9C5C1;
smokegrey: #ADA8A2;
irongrey: #47423C;

/* SPECIAL COLORS */
palemossgreen: #e7e8d6;
palemountainblue: #e0ebef;
palesunriseyellow: #f9e0a0;

/*GENERIC GREY SCALE */
grey1: #CCCCCC;
grey2: #999999;
grey3: #666666;
grey4: #333333;
grey5: #000000;

}


/*EXAMPLE USAGE*/

#div1 {
background-color: var(mountainblue);
}