Colors

Solid Colors

White

Light Grey

Dark Grey

Black

Light Green

Green

Yellow

Red

Light Blue

Royal Blue

Grey Blue

Space Blue

Dark Blue

Violet

Purple

Dark Purple

Orange

Light Pink

// Colors

$white: #ffffff;
$lightGrey: #f5f5f5;
$grey: #e2e2e2;
$darkGrey: #4d5154;
$black: #252525;
$lightGreen: #50e3c2;
$green: #32ca4f;
$yellow: #f7a01c;
$red: #e63349;
$lightBlue: #3dc1cd;
$royalBlue: #008bff;
$greyBlue: #283455;
$spaceBlue: #212b47;
$darkBlue: #161d31;
$violet: #ac32e4;
$purple: #7918f2;
$darkPurple: #4801ff;
$orange: #f77062;
$lightPink: #fe5196;

//Examples
@extend .background-purple ;
@extend .color-purple ;

<div class="yourDiv background-purple">
    <p class="color-white">Your Content</p>
</div>

Gradient Colors

Sharp Blues

Azure Green

Space Blues

Night Purple

Wine Magenta

Sunset Orange

Royal Pink

// Gradient Colors

@extend .background-sharpBlues ;
// background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);

@extend .background-azureGreen ;
// background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);

@extend .background-spaceBlues ;
// background-image: radial-gradient(circle at 0 0, #222c49, #161d31);

@extend .background-nightPurple ;
// background-image: linear-gradient(-255deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);

@extend .background-wineMagenta ;
// background-image: linear-gradient(-255deg, #FF057C 0%, #8D0B93 50%, #321575 100%);

@extend .background-sunsetOrange ;
// background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);

@extend .background-royalPink ;
// background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);

<div class="yourDiv background-nightPurple">
    <p class="color-white">Your Content</p>
</div>