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

CSS Val

.background-primary

.text-primary

--color-primary

Secondary

Color

Hex

Background Class

Text Class

CSS Variable

Secondary Base

CSS Val

.background-secondary

.text-secondary

--color-secondary

Extended Palette

Red

Color

Hex

Background Class

Text Class

CSS Variable

Red Darkest

CSS Val

.background-red-darkest

.text-red-darkest

--color-red-darkest

Red Darker

CSS Val

.background-red-darker

.text-red-darker

--color-red-darker

Red Dark

CSS Val

.background-red-dark

.text-red-dark

--color-red-dark

Red

CSS Val

.background-red

.text-red

--color-red

Red Light

CSS Val

.background-red-light

.text-red-light

--color-red-light

Red Lighter

CSS Val

.background-red-lighter

.text-red-lighter

--color-red-lighter

Red Lightest

CSS Val

.background-red-lightest

.text-red-lightest

--color-red-lightest

Orange

Color

Hex

Background Class

Text Class

CSS Variable

Orange Darkest

CSS Val

.background-orange-darkest

.text-orange-darkest

--color-orange-darkest

Orange Darker

CSS Val

.background-orange-darker

.text-orange-darker

--color-orange-darker

Orange Dark

CSS Val

.background-orange-dark

.text-orange-dark

--color-orange-dark

Orange

CSS Val

.background-orange

.text-orange

--color-orange

Orange Light

CSS Val

.background-orange-light

.text-orange-light

--color-orange-light

Orange Lighter

CSS Val

.background-orange-lighter

.text-orange-lighter

--color-orange-lighter

Orange Lightest

CSS Val

.background-orange-lightest

.text-orange-lightest

--color-orange-lightest

Yellow

Color

Hex

Background Class

Text Class

CSS Variable

Yellow Darkest

CSS Val

.background-yellow-darkest

.text-yellow-darkest

--color-yellow-darkest

Yellow Darker

CSS Val

.background-yellow-darker

.text-yellow-darker

--color-yellow-darker

Yellow Dark

CSS Val

.background-yellow-dark

.text-yellow-dark

--color-yellow-dark

Yellow

CSS Val

.background-yellow

.text-yellow

--color-yellow

Yellow Light

CSS Val

.background-yellow-light

.text-yellow-light

--color-yellow-light

Yellow Lighter

CSS Val

.background-yellow-lighter

.text-yellow-lighter

--color-yellow-lighter

Yellow Lightest

CSS Val

.background-yellow-lightest

.text-yellow-lightest

--color-yellow-lightest

Lime

Color

Hex

Background Class

Text Class

CSS Variable

Lime Darkest

CSS Val

.background-lime-darkest

.text-lime-darkest

--color-lime-darkest

Lime Darker

CSS Val

.background-lime-darker

.text-lime-darker

--color-lime-darker

Lime Dark

CSS Val

.background-lime-dark

.text-lime-dark

--color-lime-dark

Lime

CSS Val

.background-lime

.text-lime

--color-lime

Lime Light

CSS Val

.background-lime-light

.text-lime-light

--color-lime-light

Lime Lighter

CSS Val

.background-lime-lighter

.text-lime-lighter

--color-lime-lighter

Lime Lightest

CSS Val

.background-lime-lightest

.text-lime-lightest

--color-lime-lightest

Green

Color

Hex

Background Class

Text Class

CSS Variable

Green Darkest

CSS Val

.background-green-darkest

.text-green-darkest

--color-green-darkest

Green Darker

CSS Val

.background-green-darker

.text-green-darker

--color-green-darker

Green Dark

CSS Val

.background-green-dark

.text-green-dark

--color-green-dark

Green

CSS Val

.background-green

.text-green

--color-green

Green Light

CSS Val

.background-green-light

.text-green-light

--color-green-light

Green Lighter

CSS Val

.background-green-lighter

.text-green-lighter

--color-green-lighter

Green Lightest

CSS Val

.background-green-lightest

.text-green-lightest

--color-green-lightest

Teal

Color

Hex

Background Class

Text Class

CSS Variable

Teal Darkest

CSS Val

.background-teal-darkest

.text-teal-darkest

--color-teal-darkest

Teal Darker

CSS Val

.background-teal-darker

.text-teal-darker

--color-teal-darker

Teal Dark

CSS Val

.background-teal-dark

.text-teal-dark

--color-teal-dark

Teal

CSS Val

.background-teal

.text-teal

--color-teal

Teal Light

CSS Val

.background-teal-light

.text-teal-light

--color-teal-light

Teal Lighter

CSS Val

.background-teal-lighter

.text-teal-lighter

--color-teal-lighter

Teal Lightest

CSS Val

.background-teal-lightest

.text-teal-lightest

--color-teal-lightest

Cyan

Color

Hex

Background Class

Text Class

CSS Variable

Cyan Darkest

CSS Val

.background-cyan-darkest

.text-cyan-darkest

--color-cyan-darkest

Cyan Darker

CSS Val

.background-cyan-darker

.text-cyan-darker

--color-cyan-darker

Cyan Dark

CSS Val

.background-cyan-dark

.text-cyan-dark

--color-cyan-dark

Cyan

CSS Val

.background-cyan

.text-cyan

--color-cyan

Cyan Light

CSS Val

.background-cyan-light

.text-cyan-light

--color-cyan-light

Cyan Lighter

CSS Val

.background-cyan-lighter

.text-cyan-lighter

--color-cyan-lighter

Cyan Lightest

CSS Val

.background-cyan-lightest

.text-cyan-lightest

--color-cyan-lightest

Blue

Color

Hex

Background Class

Text Class

CSS Variable

Blue Darkest

CSS Val

.background-blue-darkest

.text-blue-darkest

--color-blue-darkest

Blue Darker

CSS Val

.background-blue-darker

.text-blue-darker

--color-blue-darker

Blue Dark

CSS Val

.background-blue-dark

.text-blue-dark

--color-blue-dark

Blue

CSS Val

.background-blue

.text-blue

--color-blue

Blue Light

CSS Val

.background-blue-light

.text-blue-light

--color-blue-light

Blue Lighter

CSS Val

.background-blue-lighter

.text-blue-lighter

--color-blue-lighter

Blue Lightest

CSS Val

.background-blue-lightest

.text-blue-lightest

--color-blue-lightest

Indigo

Color

Hex

Background Class

Text Class

CSS Variable

Indigo Darkest

CSS Val

.background-indigo-darkest

.text-indigo-darkest

--color-indigo-darkest

Indigo Darker

CSS Val

.background-indigo-darker

.text-indigo-darker

--color-indigo-darker

Indigo Dark

CSS Val

.background-indigo-dark

.text-indigo-dark

--color-indigo-dark

Indigo

CSS Val

.background-indigo

.text-indigo

--color-indigo

Indigo Light

CSS Val

.background-indigo-light

.text-indigo-light

--color-indigo-light

Indigo Lighter

CSS Val

.background-indigo-lighter

.text-indigo-lighter

--color-indigo-lighter

Indigo Lightest

CSS Val

.background-indigo-lightest

.text-indigo-lightest

--color-indigo-lightest

Violet

Color

Hex

Background Class

Text Class

CSS Variable

Violet Darkest

CSS Val

.background-violet-darkest

.text-violet-darkest

--color-violet-darkest

Violet Darker

CSS Val

.background-violet-darker

.text-violet-darker

--color-violet-darker

Violet Dark

CSS Val

.background-violet-dark

.text-violet-dark

--color-violet-dark

Violet

CSS Val

.background-violet

.text-violet

--color-violet

Violet Light

CSS Val

.background-violet-light

.text-violet-light

--color-violet-light

Violet Lighter

CSS Val

.background-violet-lighter

.text-violet-lighter

--color-violet-lighter

Violet Lightest

CSS Val

.background-violet-lightest

.text-violet-lightest

--color-violet-lightest

Grape

Color

Hex

Background Class

Text Class

CSS Variable

Grape Darkest

CSS Val

.background-grape-darkest

.text-grape-darkest

--color-grape-darkest

Grape Darker

CSS Val

.background-grape-darker

.text-grape-darker

--color-grape-darker

Grape Dark

CSS Val

.background-grape-dark

.text-grape-dark

--color-grape-dark

Grape

CSS Val

.background-grape

.text-grape

--color-grape

Grape Light

CSS Val

.background-grape-light

.text-grape-light

--color-grape-light

Grape Lighter

CSS Val

.background-grape-lighter

.text-grape-lighter

--color-grape-lighter

Grape Lightest

CSS Val

.background-grape-lightest

.text-grape-lightest

--color-grape-lightest

Pink

Color

Hex

Background Class

Text Class

CSS Variable

Pink Darkest

CSS Val

.background-pink-darkest

.text-pink-darkest

--color-pink-darkest

Pink Darker

CSS Val

.background-pink-darker

.text-pink-darker

--color-pink-darker

Pink Dark

CSS Val

.background-pink-dark

.text-pink-dark

--color-grape-dark

Pink

CSS Val

.background-pink

.text-pink

--color-pink

Pink Light

CSS Val

.background-pink-light

.text-pink-light

--color-pink-light

Pink Lighter

CSS Val

.background-pink-lighter

.text-pink-lighter

--color-pink-lighter

Pink Lightest

CSS Val

.background-pink-lightest

.text-pink-lightest

--color-pink-lightest

Neutral Palette

Color

Hex

Background Class

Text Class

CSS Variable

Neutral 10

CSS Val

.background-neutral-10

.text-neutral-10

--color-neutral-10

Neutral 9

CSS Val

.background-neutral-9

.text-neutral-9

--color-neutral-9

Neutral 8

CSS Val

.background-neutral-8

.text-neutral-8

--color-neutral-8

Neutral 7

CSS Val

.background-neutral-7

.text-neutral-7

--color-neutral-7

Neutral 6

CSS Val

.background-neutral-6

.text-neutral-6

--color-neutral-6

Neutral 5

CSS Val

.background-neutral-5

.text-neutral-5

--color-neutral-5

Neutral 4

CSS Val

.background-neutral-4

.text-neutral-4

--color-neutral-4

Neutral 3

CSS Val

.background-neutral-3

.text-neutral-3

--color-neutral-3

Neutral 2

CSS Val

.background-neutral-2

.text-neutral-2

--color-neutral-2

Neutral 1

CSS Val

.background-neutral-1

.text-neutral-1

--color-neutral-1

Neutral 0

CSS Val

.background-neutral-0

.text-neutral-0

--color-neutral-0

Semantic Palette

Info

Color

Hex

Background Class

Text Class

CSS Variable

Info Base

CSS Val

.background-info

.text-info

--color-info

Info Light

CSS Val

.background-info-light

.text-info-light

--color-info-light

Success

Color

Hex

Background Class

Text Class

CSS Variable

Success Base

CSS Val

.background-success

.text-success

--color-success

Success Light

CSS Val

.background-success-light

.text-success-light

--color-success-light

Warning

Color

Hex

Background Class

Text Class

CSS Variable

Warning Base

CSS Val

.background-warning

.text-warning

--color-warning

Warning Light

CSS Val

.background-warning-light

.text-warning-light

--color-warning-light

Error

Color

Hex

Background Class

Text Class

CSS Variable

Error Base

CSS Val

.background-error

.text-error

--color-error

Error Light

CSS Val

.background-error-light

.text-error-light

--color-error-light