Colors

We have listed below the information regarding the color groups and color tones we used.

If you want to use our color variables, just import the relevant scss file.

@import 'gralig/scss/abstracts/_variables.scss';

Gray

Abbey

HSL: hsl(206, 7%, 40%)

SCSS: $abbey

Raven

HSL: hsl(205, 7%, 48%)

SCSS: $raven

Oslo

HSL: hsl(204, 7%, 58%)

SCSS: $oslo

Mischka

HSL: hsl(207, 7%, 68%)

SCSS: $mischka

Ghost

HSL: hsl(202, 7%, 78%)

SCSS: $ghost

Iron

HSL: hsl(204, 7%, 86%)

SCSS: $iron

Porcelain

HSL: hsl(210, 8%, 95%)

SCSS: $porcelain

Dark

Blackpearl

HSL: hsl(206, 20%, 7%)

SCSS: $blackpearl

Woodsmoke

HSL: hsl(200, 7%, 8%)

SCSS: $woodsmoke

Shark

HSL: hsl(207, 13%, 14%)

SCSS: $shark

Blue

Summer Darker

HSL: hsl(201, 66%, 38%)

SCSS: $summer-darker

Summer Dark

HSL: hsl(201, 66%, 46%)

SCSS: $summer-dark

Summer

HSL: hsl(201, 66%, 54%)

SCSS: $summer

Summer Light

HSL: hsl(201, 66%, 62%)

SCSS: $summer-light

Summer Lighter

HSL: hsl(201, 66%, 70%)

SCSS: $summer-lighter

Green

Shamrock Darker

HSL: hsl(166, 66%, 38%)

SCSS: $shamrock-darker

Shamrock Dark

HSL: hsl(166, 66%, 46%)

SCSS: $shamrock-dark

Shamrock

HSL: hsl(166, 66%, 54%)

SCSS: $shamrock

Shamrock Light

HSL: hsl(166, 66%, 62%)

SCSS: $shamrock-light

Shamrock Lighter

HSL: hsl(166, 66%, 70%)

SCSS: $shamrock-lighter

Yellow

Tulip Darker

HSL: hsl(47, 82%, 38%)

SCSS: $tulip-darker

Tulip Dark

HSL: hsl(47, 82%, 46%)

SCSS: $tulip-dark

Tulip

HSL: hsl(47, 82%, 54%)

SCSS: $tulip

Tulip Light

HSL: hsl(47, 82%, 62%)

SCSS: $tulip-light

Tulip Lighter

HSL: hsl(47, 82%, 70%)

SCSS: $tulip-lighter

Red

Flame Darker

HSL: hsl(0, 66%, 38%)

SCSS: $flame-darker

Flame Dark

HSL: hsl(0, 66%, 46%)

SCSS: $flame-dark

Flame

HSL: hsl(0, 66%, 54%)

SCSS: $flame

Flame Light

HSL: hsl(0, 66%, 62%)

SCSS: $flame-light

Flame Lighter

HSL: hsl(0, 66%, 70%)

SCSS: $flame-lighter

© 2019, Built with  🎧☕️❤️& Gralig.