Designs launchingafterJuly 14, 2021, please referencethe latest release of Spark.

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.

The brand colors on a light background.
The brand colors on a dark background.

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

Placeholder alt text for this image.

Do Not Overuse Red

Placeholder alt text for this image.

Do Not Use Accent Colors In Large Amounts

Placeholder alt text for this image.

Do Not Use Dark Backgrounds For Text

Placeholder alt text for this image.

Do Not Use Gradients

Placeholder alt text for this image.

Do Not Make Text Illegible

Placeholder alt text for this image.