-
hsl(352, 92%, 38%)
$c-red
-
hsl(195, 83%, 84%)
$c-blue
-
hsl(33, 93%, 54%)
$c-orange
-
hsla(33, 93%, 54%, .85)
$c-orange-transparent
-
white
$c-white
-
hsl(0, 0%, 95%)
$c-gray--lightest
-
hsla(0, 0%, 95%, .1)
$c-gray--lightest--transparent
-
hsl(0, 0%, 80%)
$c-gray--lighter
-
hsla(0, 0%, 80%, .2)
$c-gray--lighter--transparent
-
hsl(0, 0%, 60%)
$c-gray--light
-
hsl(0, 0%, 48%)
$c-gray
-
hsl(0, 0%, 40%)
$c-gray--dark
-
hsl(0, 0%, 25%)
$c-gray--darker
-
hsla(0, 0%, 20%, .75)
$c-gray--darker--transparent
-
hsl(0, 0%, 16.1%)
$c-gray--darkest
-
hsla(0, 0%, 16.1%, .85)
$c-gray--darkest--transparent
-
black
$c-black
To add to these items, use Sass variables that start with $c-
in source/_patterns/00-base/01-colors/_color-vars.scss