Color

Color reference to support or emphasize content or to help conveying a message.

Brand Palette

Brand colors are the main colors of an interface and are a reflection of the brand, althought having a secondary color is optional. Divided by primary and secondary colors, they are mainly used for UI actions (Buttons, links) or to highlight active states.

Color Values

Primary

Color Values

Secondary

Extended Palette

Used to assist particular content areas and data visualization.

Color Values

Red

Color Values

Orange

Color Values

Yellow

Color Values

Lime

Color Values

Green

Color Values

Teal

Color Values

Cyan

Color Values

Blue

Color Values

Indigo

Color Values

Violet

Color Values

Grape

Color Values

Pink

Neutral Palette

Used for text, borders, backgrounds and shadows.

Color Values

Semantic Palette

Used to convey a meaning or a value state, such as Info, Success, Warning, and Error. It applies to Alerts and Feedback Messages.

Color Values

Info

Color Values

Succcess

Color Values

Warning

Color Values

Error

Color values, variables and classes

Brand Palette

Primary

Color

Hex

Background Class

Text Class

CSS Variable

Primary Base

#146ef5

.background-primary

.text-primary

--color-primary

Secondary

Color

Hex

Background Class

Text Class

CSS Variable

Secondary Base

#303d60

.background-secondary

.text-secondary

--color-secondary

Extended Palette

Red

Color

Hex

Background Class

Text Class

CSS Variable

Red Lightest

#faeaea

.background-red-lightest

.text-red-lightest

--color-red-lightest

Red Lighter

#e9aaaa

.background-red-lighter

.text-red-lighter

--color-red-lighter

Red Light

#d96a6a

.background-red-light

.text-red-light

--color-red-light

Red

#c92a2a

.background-red

.text-red

--color-red

Red Dark

#ab2424

.background-red-dark

.text-red-dark

--color-red-dark

Red Darker

#8d1d1d

.background-red-darker

.text-red-darker

--color-red-darker

Red Darkest

#6f1717

.background-red-darkest

.text-red-darkest

--color-red-darkest

Orange

Color

Hex

Background Class

Text Class

CSS Variable

Orange Lightest

#fef0e6

.background-orange-lightest

.text-orange-lightest

--color-orange-lightest

Orange Lighter

#fcc29c

.background-orange-lighter

.text-orange-lighter

--color-orange-lighter

Orange Light

#f99551

.background-orange-light

.text-orange-light

--color-orange-light

Orange

#f76707

.background-orange

.text-orange

--color-orange

Orange Dark

#d25806

.background-orange-dark

.text-orange-dark

--color-orange-dark

Orange Darker

#ad4805

.background-orange-darker

.text-orange-darker

--color-orange-darker

Orange Darkest

#883904

.background-orange-darkest

.text-orange-darkest

--color-orange-darkest

Yellow

Color

Hex

Background Class

Text Class

CSS Variable

Yellow Lightest

#fef5e5

.background-yellow-lightest

.text-yellow-lightest

--color-yellow-lightest

Yellow Lighter

#fbd999

.background-yellow-lighter

.text-yellow-lighter

--color-yellow-lighter

Yellow Light

#f8bc4c

.background-yellow-light

.text-yellow-light

--color-yellow-light

Yellow

#f59f00

.background-yellow

.text-yellow

--color-yellow

Yellow Dark

#d08700

.background-yellow-dark

.text-yellow-dark

--color-yellow-dark

Yellow Darker

#ac6f00

.background-yellow-darker

.text-yellow-darker

--color-yellow-darker

Yellow Darkest

#875700

.background-yellow-darkest

.text-yellow-darkest

--color-yellow-darkest

Lime

Color

Hex

Background Class

Text Class

CSS Variable

Lime Lightest

#f1f8e8

.background-lime-lightest

.text-lime-lightest

--color-lime-lightest

Lime Lighter

#c7e3a2

.background-lime-lighter

.text-lime-lighter

--color-lime-lighter

Lime Light

#9ecd5c

.background-lime-light

.text-lime-light

--color-lime-light

Lime

#74b816

.background-lime

.text-lime

--color-lime

Lime Dark

#639c13

.background-lime-dark

.text-lime-dark

--color-lime-dark

Lime Darker

#51810f

.background-lime-darker

.text-lime-darker

--color-lime-darker

Lime Darkest

#40650c

.background-lime-darkest

.text-lime-darkest

--color-lime-darkest

Green

Color

Hex

Background Class

Text Class

CSS Variable

Green Lightest

#ebf7ed

.background-green-lightest

.text-green-lightest

--color-green-lightest

Green Lighter

#afe0b8

.background-green-lighter

.text-green-lighter

--color-green-lighter

Green Light

#73c982

.background-green-light

.text-green-light

--color-green-light

Green

#37b24d

.background-green

.text-green

--color-green

Green Dark

#2f9741

.background-green-dark

.text-green-dark

--color-green-dark

Green Darker

#267d36

.background-green-darker

.text-green-darker

--color-green-darker

Green Darkest

#1e622a

.background-green-darkest

.text-green-darkest

--color-green-darkest

Teal

Color

Hex

Background Class

Text Class

CSS Variable

Teal Lightest

#e6f2ef

.background-teal-lightest

.text-teal-lightest

--color-teal-lightest

Teal Lighter

#9cccbd

.background-teal-lighter

.text-teal-lighter

--color-teal-lighter

Teal Light

#52a58c

.background-teal-light

.text-teal-light

--color-teal-light

Teal

#087f5b

.background-teal

.text-teal

--color-teal

Teal Dark

#076c4d

.background-teal-dark

.text-teal-dark

--color-teal-dark

Teal Darker

#065940

.background-teal-darker

.text-teal-darker

--color-teal-darker

Teal Darkest

#044632

.background-teal-darkest

.text-teal-darkest

--color-teal-darkest

Cyan

Color

Hex

Background Class

Text Class

CSS Variable

Cyan Lightest

#e7f2f4

.background-cyan-lightest

.text-cyan-lightest

--color-cyan-lightest

Cyan Lighter

#9eccd3

.background-cyan-lighter

.text-cyan-lighter

--color-cyan-lighter

Cyan Light

#56a6b2

.background-cyan-light

.text-cyan-light

--color-cyan-light

Cyan

#0d8091

.background-cyan

.text-cyan

--color-cyan

Cyan Dark

#0b6d7b

.background-cyan-dark

.text-cyan-dark

--color-cyan-dark

Cyan Darker

#095a66

.background-cyan-darker

.text-cyan-darker

--color-cyan-darker

Cyan Darkest

#074650

.background-cyan-darkest

.text-cyan-darkest

--color-cyan-darkest

Blue

Color

Hex

Background Class

Text Class

CSS Variable

Blue Lightest

#e8f2fa

.background-blue-lightest

.text-blue-lightest

--color-blue-lightest

Blue Lighter

#a3c9ea

.background-blue-lighter

.text-blue-lighter

--color-blue-lighter

Blue Light

#5fa1db

.background-blue-light

.text-blue-light

--color-blue-light

Blue

#1a79cb

.background-blue

.text-blue

--color-blue

Blue Dark

#1667ad

.background-blue-dark

.text-blue-dark

--color-blue-dark

Blue Darker

#12558e

.background-blue-darker

.text-blue-darker

--color-blue-darker

Blue Darkest

#0e4370

.background-blue-darkest

.text-blue-darkest

--color-blue-darkest

Indigo

Color

Hex

Background Class

Text Class

CSS Variable

Indigo Lightest

#eceffd

.background-indigo-lightest

.text-indigo-lightest

--color-indigo-lightest

Indigo Lighter

#b3c1f7

.background-indigo-lighter

.text-indigo-lighter

--color-indigo-lighter

Indigo Light

#7b92f1

.background-indigo-light

.text-indigo-light

--color-indigo-light

Indigo

#4263eb

.background-indigo

.text-indigo

--color-indigo

Indigo Dark

#3854c8

.background-indigo-dark

.text-indigo-dark

--color-indigo-dark

Indigo Darker

#2e45a5

.background-indigo-darker

.text-indigo-darker

--color-indigo-darker

Indigo Darkest

#243681

.background-indigo-darkest

.text-indigo-darkest

--color-indigo-darkest

Violet

Color

Hex

Background Class

Text Class

CSS Variable

Violet Lightest

#f1edfd

.background-violet-lightest

.text-violet-lightest

--color-violet-lightest

Violet Lighter

#c6b6f6

.background-violet-lighter

.text-violet-lighter

--color-violet-lighter

Violet Light

#9b7fef

.background-violet-light

.text-violet-light

--color-violet-light

Violet

#7048e8

.background-violet

.text-violet

--color-violet

Violet Dark

#5f3dc5

.background-violet-dark

.text-violet-dark

--color-violet-dark

Violet Darker

#4e32a2

.background-violet-darker

.text-violet-darker

--color-violet-darker

Violet Darkest

#3e2880

.background-violet-darkest

.text-violet-darkest

--color-violet-darkest

Grape

Color

Hex

Background Class

Text Class

CSS Variable

Grape Lightest

#f7ecfa

.background-grape-lightest

.text-grape-lightest

--color-grape-lightest

Grape Lighter

#dfb2e9

.background-grape-lighter

.text-grape-lighter

--color-grape-lighter

Grape Light

#c678d9

.background-grape-light

.text-grape-light

--color-grape-light

Grape

#ae3ec9

.background-grape

.text-grape

--color-grape

Grape Dark

#9435ab

.background-grape-dark

.text-grape-dark

--color-grape-dark

Grape Darker

#7a2b8d

.background-grape-darker

.text-grape-darker

--color-grape-darker

Grape Darkest

#60226f

.background-grape-darkest

.text-grape-darkest

--color-grape-darkest

Pink

Color

Hex

Background Class

Text Class

CSS Variable

Pink Lightest

#fbebf0

.background-pink-lightest

.text-pink-lightest

--color-pink-lightest

Pink Lighter

#efadc4

.background-pink-lighter

.text-pink-lighter

--color-pink-lighter

Pink Light

#e27098

.background-pink-light

.text-pink-light

--color-pink-light

Pink

#d6336c

.background-pink

.text-pink

--color-pink

Pink Dark

#b62b5c

.background-pink-dark

.text-pink-dark

--color-pink-dark

Pink Darker

#96244c

.background-pink-darker

.text-pink-darker

--color-pink-darker

Pink Darkest

#761c3b

.background-pink-darkest

.text-pink-darkest

--color-pink-darkest

Neutral Palette

Color

Hex

Background Class

Text Class

CSS Variable

Neutral 0

#ffffff

.background-neutral-0

.text-neutral-0

--color-neutral-0

Neutral 1

#f8f9fa

.background-neutral-1

.text-neutral-1

--color-neutral-1

Neutral 2

#f1f3f5

.background-neutral-2

.text-neutral-2

--color-neutral-2

Neutral 3

#e9ecef

.background-neutral-3

.text-neutral-3

--color-neutral-3

Neutral 4

#dee2e6

.background-neutral-4

.text-neutral-4

--color-neutral-4

Neutral 5

#ced4da

.background-neutral-5

.text-neutral-5

--color-neutral-5

Neutral 6

#adb5bd

.background-neutral-6

.text-neutral-6

--color-neutral-6

Neutral 7

#868e96

.background-neutral-7

.text-neutral-7

--color-neutral-7

Neutral 8

#5c656d

.background-neutral-8

.text-neutral-8

--color-neutral-8

Neutral 9

#343a40

.background-neutral-9

.text-neutral-9

--color-neutral-9

Neutral 10

#15181a

.background-neutral-10

.text-neutral-10

--color-neutral-10

Semantic Palette

Info

Color

Hex

Background Class

Text Class

CSS Variable

Info Light

#e5f5fc

.background-info-light

.text-info-light

--color-info-light

Info Base

#009dde

.background-info

.text-info

--color-info

Success

Color

Hex

Background Class

Text Class

CSS Variable

Success Light

#eaf3eb

.background-success-light

.text-success-light

--color-success-light

Success Base

#2a843c

.background-success

.text-success

--color-success

Warning

Color

Hex

Background Class

Text Class

CSS Variable

Warning Light

#fdf6e5

.background-warning-light

.text-warning-light

--color-warning-light

Warning Base

#e9a100

.background-warning

.text-warning

--color-warning

Error

Color

Hex

Background Class

Text Class

CSS Variable

Error Light

#fceaea

.background-error-light

.text-error-light

--color-error-light

Error Base

#e03131

.background-error

.text-error

--color-error