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