Colour Palettes The Scss Way
open-source class generator
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.
<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>
$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".