Color
Our objective is to achieve human-centered design in everything we do.
Having a consistent color palette is one of the foundations of a unified user experience.
We take accessibility seriously and comply with WCAG 2.1 contrast guidelines, and we do our best to account for the needs of all people.
Color Palette
Red
Red
Color value for red.
Hex Value
#C8102E
RGB Value
rgb(200, 16, 46)
Sass Variable
$sprk-red
Mid Red
Color value for mid red.
Hex Value
#9D2235
RGB Value
rgb(157,34,53)
Sass Variable
$sprk-mid-red
Deep Red
Color value for deep red.
Hex Value
#76232F
RGB Value
rgb(118,35,47)
Sass Variable
$sprk-deep-red
Red Tint 75
Color value for red 75%.
Hex Value
#D64C62
RGB Value
rgb(214, 76, 98)
Sass Variable
$sprk-red-tint-75
Red Tint 50
Color value for red at 50%.
Hex Value
#E38796
RGB Value
rgb(227, 135, 150)
Sass Variable
$sprk-red-tint-50
Red Tint 25
Color value for red at 25%.
Hex Value
#F1C3CB
RGB Value
rgb(241, 195, 203)
Sass Variable
$sprk-red-tint-25
Blue
Blue
Color value for blue.
Hex Value
#007DBA
RGB Value
rgb(0, 125, 186)
Sass Variable
$sprk-blue
Blue Tint 75
Color value for blue at 75%.
Hex Value
#4990C3
RGB Value
rgb(73, 144, 195)
Sass Variable
$sprk-blue-tint-75
Blue Tint 50
Color value for blue at 50%.
Hex Value
#76ACD2
RGB Value
rgb(118, 172, 210)
Sass Variable
$sprk-blue-tint-50
Blue Tint 25
Color value for blue at 25%.
Hex Value
#A7C7E1
RGB Value
rgb(164, 199, 225)
Sass Variable
$sprk-blue-tint-25
Green
Green
Color value for green.
Hex Value
#008473
RGB Value
rgb(0, 132, 115)
Sass Variable
$sprk-green
Green Dark
Color value for dark green.
Hex Value
#007667
RGB Value
rgb(0, 118, 103)
Sass Variable
$sprk-green-dark
Green Tint 75
Color value for green at 75%.
Hex Value
#40C6B2
RGB Value
rgb(64, 198, 178)
Sass Variable
$sprk-green-tint-75
Green Tint 50
Color value for green at 50%.
Hex Value
#80D9CB
RGB Value
rgb(128, 217, 203)
Sass Variable
$sprk-green-tint-50
Green Tint 25
Color value for green at 25%.
Hex Value
#BFECE5
RGB Value
rgb(191, 236, 229)
Sass Variable
$sprk-green-tint-25
Yellow
Yellow
Color value for yellow.
Hex Value
#F5BE40
RGB Value
rgb(245, 190, 64)
Sass Variable
$sprk-yellow
Yellow Tint 75
Color value for yellow at 75%.
Hex Value
#EDA302
RGB Value
rgb(237, 163, 2)
Sass Variable
$sprk-yellow-tint-75
Yellow Tint 50
Color value for yellow at 50%.
Hex Value
#F4C766
RGB Value
rgb(244, 199, 102)
Sass Variable
$sprk-yellow-tint-50
Yellow Tint 25
Color value for yellow at 25%.
Hex Value
#F7DA9A
RGB Value
rgb(247, 218, 154)
Sass Variable
$sprk-yellow-tint-25
Black
Black
Color value for black.
Hex Value
#333333
RGB Value
rgb(51, 51, 51)
Sass Variable
$sprk-black
Black Tint 75
Color value for black at 75%.
Hex Value
#404040
RGB Value
rgb(64, 64, 64)
Sass Variable
$sprk-black-tint-75
Black Tint 50
Color value for black at 50%.
Hex Value
#808080
RGB Value
rgb(128, 128, 128)
Sass Variable
$sprk-black-tint-50
Black Tint 25
Color value for black at 25%.
Hex Value
#BEBEBE
RGB Value
rgb(190, 190, 190)
Sass Variable
$sprk-black-tint-25
White
White
Color value for white.
Hex Value
#FFFFFF
RGB Value
rgb(255, 255, 255)
Sass Variable
$sprk-white
Color Restrictions
Follow these rules for our color palette to look best.
Do Not Mix Colors
Do Not Overuse Red
Do Not Use Accent Colors In Large Amounts
Do Not Use Dark Backgrounds For Text
Do Not Use Gradients
Do Not Make Text Illegible
