Color Codes

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

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

Orange

Use to communicate error, warning, urgency or attention needed.

HEX

#D47500

RGB

rgb(212, 117, 0)

Sass

$sprk-orange

Next: Color Accessibility