Color Codes

Rocket Red

Rocket Red

Red for key branded moments throughout the product as our primary brand color.

HEX
#C8102E
RGB
rgb(200, 16, 46)
Sass
$sprk-red

Deep Red

Darkest red for key branded moments throughout the product.

HEX
#76232F
RGB
rgb(118, 35, 47)
Sass
$sprk-deep-red

Mid Red

Mid red for key branded moments throughout the product.

HEX
#9D2235
RGB
rgb(157, 34, 53)
Sass
$sprk-mid-red

Orbit Purple

Orbit Purple

Main purple for secondary actions and brand elements.

HEX
#603AA1
RGB
rgb(96, 58, 161)
Sass
$sprk-purple

Purple Dark

Dark purple for interactive elements. Can also be used for limited floods of color.

HEX
#3C3174
RGB
rgb(60, 49, 116)
Sass
$sprk-purple-dark

Purple Deep

Deep purple for interactive elements. Can also be used for limited floods of color.

HEX
#2E1166
RGB
rgb(46, 17, 102)
Sass
$sprk-purple-deep

Purple Light

Light purple for interactive elements.

HEX
#9265D3
RGB
rgb(146, 101, 211)
Sass
$sprk-purple-light

Purple Lightest

Lightest purple for interactive elements. Can also be used for limited floods of color.

HEX
#E7E2F2
RGB
rgb(231, 226, 242)
Sass
$sprk-purple-lightest

Neutral Colors

White

White for floods of color and accents, like backgrounds and cards.

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
Sass
$sprk-white

Black

Black for main text color, specifically in headline and body copy.

HEX
#1C1B1A
RGB
rgb(28, 27, 26)
Sass
$sprk-black

Black Tint 80

Black at 80%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#494948
RGB
rgb(73, 73, 72)
Sass
$sprk-black-tint-80

Black Tint 70

Black at 70%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#605F5E
RGB
rgb(96, 95, 94)
Sass
$sprk-black-tint-70

Black Tint 60

Black at 60%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#777676
RGB
rgb(119, 118, 118)
Sass
$sprk-black-tint-60

Black Tint 50

Black at 50%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#8D8D8C
RGB
rgb(141, 141, 140)
Sass
$sprk-black-tint-50

Black Tint 40

Black at 40%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#A4A4A3
RGB
rgb(164, 164, 163)
Sass
$sprk-black-tint-40

Black Tint 30

Black at 30%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#BABABA
RGB
rgb(186, 186, 186)
Sass
$sprk-black-tint-30

Black Tint 20

Black at 20%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#D2D1D1
RGB
rgb(210, 209, 209)
Sass
$sprk-black-tint-20

Black Tint 10

Black at 10%. Use this gray in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#E8E8E8
RGB
rgb(232, 232, 232)
Sass
$sprk-black-tint-10

Gray

Lightest gray. Use in combination with content hierarchy, font-weight and background color to create AA accessible text.

HEX
#F7F7F7
RGB
rgb(247, 247, 247)
Sass
$sprk-gray

Semantic Colors

Green

Use to communicate a positive status or message.

HEX
#298540
RGB
rgb(41, 133, 64)
Sass
$sprk-green

Blue

Use to communicate an informative status or message.

HEX
#1C6EF2
RGB
rgb(28, 110, 242)
Sass
$sprk-blue

Pink

Use to communicate an error status or message.

HEX
#E50158
RGB
rgb(229, 1, 88)
Sass
$sprk-pink

Yellow

Use to communicate an urgent status or message. Be sure to follow accessibility guidelines when using this color.

HEX
#EDA302
RGB
rgb(237, 163, 2)
Sass
$sprk-yellow

Next: Color Accessibility