Color variables example

_header.scss

.site-header {
	background-color: $color-header-background;
	a {
		color: $color-header-link;
		&:hover {
			color: $color-header-link-hover;
		}
	}
}

_variables.scss

// Assigning color hex values to variables
// Avoid using those variables in partials
$blue: #366e81;
$orange: #de8e35;
$dark-orange: #91320d;
$cyan: #00a0b0;
$green: #37a68e;
$red: #ff1744;
$white: #ffffff;
$black: #000000;

$dark-gray: #666666;
$medium-gray: #999999;
$light-gray: #cccccc;
$lighter-gray: #dddddd;
$lightest-gray: #f2f2f2;
$almost-white: #f9f9f9;

// Assigning colors to variables to use in partials
$color-default-text: $black;
$color-subtle-text: $dark-gray;
$color-disabled-text: $medium-gray;
$color-error-text: $red;

$color-default-border: $lighter-gray;
$color-active-border: $blue;

$color-header-background: $orange;
$color-header-link: $white;
$color-header-link-hover: $dark-orange;