Colour Palettes The Scss Way
open-source class generator
Colour schemes
Create quick and easy colour schemes that allow you to view auto generated colour values.
Each colour swatch is generated from one colour and the SCSS source files give you finite control to adjust as desired.
Red 50
Red 100
Red 200
Red 300
Red 500
Red 400
Red 600
Red 800
Red 900
Red 700
Green 50
Green 100
Green 200
Green 300
Green 500
Green 400
Green 600
Green 800
Green 900
Green 700
Grey 50
Grey 100
Grey 200
Grey 300
Grey 500
Grey 400
Grey 600
Grey 800
Grey 900
Grey 700
Dark blue 50
Dark blue 100
Dark blue 200
Dark blue 300
Dark blue 500
Dark blue 400
Dark blue 600
Dark blue 800
Dark blue 900
Dark blue 700
Light blue 50
Light blue 100
Light blue 200
Light blue 300
Light blue 500
Light blue 400
Light blue 600
Light blue 800
Light blue 900
Light blue 700
Purple 50
Purple 100
Purple 200
Purple 300
Purple 500
Purple 400
Purple 600
Purple 800
Purple 900
Purple 700
Orange 50
Orange 100
Orange 200
Orange 300
Orange 500
Orange 400
Orange 600
Orange 800
Orange 900
Orange 700
Yellow 50
Yellow 100
Yellow 200
Yellow 300
Yellow 500
Yellow 400
Yellow 600
Yellow 800
Yellow 900
Yellow 700
Source code
HTML
<div class="color-1">
<div class="card-image pf-red-0-bg">
</div>
<div>
<p class="color-name">Red 50</p>
<p class="hex-color"></p>
<p class="rgb-color"></p>
</div>
</div>
The wrapping container takes a class ".color-*" that is used to map to a javascript array which constructs the colour values displayed below each swatch. The ".image-card" container takes the colour class generated by the SCSS function class constructor which defines the colour to be used/shown.
SCSS
$pf-color-brand-red-500: #F44336;
$pf-color-brand-red-50: tint($pf-color-brand-red-500, 90%);
$pf-color-brand-red-100: tint($pf-color-brand-red-500, 70%);
$pf-color-brand-red-200: tint($pf-color-brand-red-500, 50%);
$pf-color-brand-red-300: tint($pf-color-brand-red-500, 30%);
$pf-color-brand-red-400: tint($pf-color-brand-red-500, 10%);
$pf-color-brand-red-500: $pf-color-brand-red-500;
$pf-color-brand-red-600: shade($pf-color-brand-red-500, 10%);
$pf-color-brand-red-700: shade($pf-color-brand-red-500, 20%);
$pf-color-brand-red-800: shade($pf-color-brand-red-500, 30%);
$pf-color-brand-red-900: shade($pf-color-brand-red-500, 40%);
The "colours.scss" file containes the variables that allow you to define your base colours which will be used to contruct the palettes. Each palette uses a tint and shade mixin that allows you to adjust how much white or black is applied to the swatch.
How to use it
Navigate to the "SCSS" folder and open up the "colours.scss" file. In here you will find eight colour variables that contain HEX values, change these to suit your own branding and recompile your SCSS framework. If you wish to add or completely change a colour you will need to either add or name change all instances featured in, "index.html", "colourPalettesTheScssWay.js", "colours.scss" and "functions.scss".