Color Palette & Darkening States

Based on the web brand color palette provided, here you will find two darker option to each color in case these are needed for element states. Every main color has its own class name but not the darker options, only the HEX code is being provided as a guide. The goal of this palette is to keep consistency all over the website.

If you need lighter version of the colors remeber always reference them with their rgb code to handle opcaity: color: rgba(67, 147, 189, 0.2); This syntax sample represents a 20% opacity/transparency of our "CuriousBlue" color.

Brand Primary Colors

PrussianBlue Class(es): .brand-*-prussian

Style Name: PrussianBlue

HEX: 00274C

RGB: 0 39 76

Brand Name: Navy Blue

BRAND Primary Color

.brand-*-prussian

00274C

001a39

000e27

AstralBlue Class(es): .brand-*-astral

Style Name: AstralBlue

HEX: 3B6F8F

RGB: 59 110 143

Brand Name: Medium Blue

BRAND Primary Color

.brand-*-astral

3B6F8F

2a5d83

1a4870

HorizonBlue Class(es): .brand-*-horizon

Style Name: HorizonBlue

HEX: 5D87A1

RGB: 93 135 161

Brand Name: Gray Blue

BRAND Primary Color

.brand-*-horizon

5D87A1

4a7998

36658b

NeptuneBlue Class(es): .brand-*-neptune

Style Name: NeptuneBlue

HEX: 80A1B6

RGB: 128 161 182

Brand Name: Light Blue

BRAND Primary Color

.brand-*-neptune

80A1B6

7198b0

5c8ba9

Variant Colors

CuriousBlue Bootstrap Class(es): .*-primary
B

Style Name: CuriousBlue

HEX: 4393BD

RGB: 67 147 189

WEB Primary Colors/Branding Variant

.*-primary

4393bd

3188b7

2076b3

TurquoiseBlue Bootstrap Class(es): .*-info
B

Style Name: TurquoiseBlue

HEX: 5BB9DA

RGB: 91 185 218

WEB Primary Colors/Branding Variant

.*-info

5bb9da

48b3d6

34add7

Complementary & Triadic Colors

PersiOrange Class(es): .brand-*-persi

Style Name: PersiOrange

HEX: DC4405

RGB: 220 68 5

WEB Complementary & Triadic Color

.brand-*-persi

dc4405

d83203

da2001

MantisGreen Bootstrap Class(es): .*-success
B

Style Name: MantisGreen

HEX: 83BD41

RGB: 131 189 65

WEB Complementary & Triadic Color

.*-success

83bd41

74b72f

60b31e

MulberryPink Class(es): .brand-*-mulberry

Style Name: MulberryPink

HEX: BD4393

RGB: 189 67 147

WEB Complementary & Triadic Color

.brand-*-mulberry

bd4393

b73188

b32076

SpeechRed Bootstrap Class(es): .*-danger
B

Style Name: SpeechRed

HEX: AF1401

RGB: 175 20 1

Variants - WEB Complementary & Triadic Color

.*-danger

af1401

a80c01

9f0600

TangerineOrange Bootstrap Class(es): .*-warning
B

Style Name: TangerineOrange

HEX: FE9910

RGB: 254 153 16

Variants - WEB Complementary & Triadic Color

.*-warning

fe9910

fe8f0a

fe7f04

LimeadeGreen Class(es): .brand-*-limeade

Style Name: LimeadeGreen

HEX: 6CA036

RGB: 108 160 54

Variants - WEB Complementary & Triadic Color

.brand-*-limeade

6ca036

5a9726

458917

FountainGreen Class(es): .brand-*-fountain

Style Name: FountainGreen

HEX: 65BAB4

RGB: 101 186 180

Variants - WEB Complementary & Triadic Color

.brand-*-fountain

65bab4

52b4ae

3eaea6

Grayscale Scheme Class(es): background color only
.brand-bg-darker-gray

222222

.brand-bg-dark-gray

333333

.brand-bg-gray

555555

.brand-bg-light-gray

777777

.brand-bg-lighter-gray

eeeeee