Brand Colors

Pelican uses Brand colors to help define your own brand.

On this page:

Brand Colors

Brand colors are the colors featured in an agency’s logo and other aspects of its visual identity. Pelican provides three default brand colors. These colors are based upon Louisiana’s official colors.

Primary

Hex Code: #00284d

SCSS Var: $primary

Secondary

Hex Code: #fe9903

SCSS Var: $secondary

Accent

Hex Code: #008282

SCSS Var: $accent

Using Brand Colors

Brand Colors are presented in these lists. These colors have been automatically assigned for you. If your digital product requires changing these colors, see Agency Themes for more information.

Primary

The Primary color is the color most recognized and associated with a brand. In Pelican, the Primary brand color, $primary, is often used for the items below:

Accent

The Accent color is the smallest supporting color associated with your brand. It’s used as supporting color when either the Primary or Secondary brand need to stand apart from each other but still need a supporting color to them. The Accent brand color, $accent, is often used in Pelican as:

Brand Color Variations

Dark and light variants are available for all three Brand colors. Use them to ensure accessibility by providing better contrast in User Interface (UI) elements or as text and background colors.

Primary Brand Colors

Primary

Hex Code: #00284d

SCSS Var: $primary

Primary, Lighter

Hex Code: #c0cedb

SCSS Var: $primary-10

Primary, Darker

Hex Code: #00203e

SCSS Var: $primary-90

Secondary Brand Colors

secondary

Hex Code: #fe9903

SCSS Var: $secondary

secondary, Lighter

Hex Code: #fff1d6

SCSS Var: $secondary-10

secondary, Darker

Hex Code: #4c2e01

SCSS Var: $secondary-90

Accent Brand Colors

accent

Hex Code: #008282

SCSS Var: $accent

accent, Lighter

Hex Code: #ccdcff

SCSS Var: $accent-10

accent, Darker

Hex Code: #005459

SCSS Var: $accent-90

Brand Color Class List

You’ll change background and text colors by using the following classes. Consult Agency Themes for more information.

Brand Color Background Color Background Color Class Text Color Text Color Class
Primary bg-primary bg-primary text-primary text-primary
Primary-10 bg-primary-10 bg-primary-10 text-primary-10 text-primary-10
Primary-90 bg-primary-90 bg-primary-90 text-primary-90 text-primary-90
Secondary bg-secondary bg-secondary text-secondary text-secondary
Secondary-10 bg-secondary-10 bg-secondary-10 text-secondary-10 text-secondary-10
Secondary-90 bg-secondary-90 bg-secondary-90 text-secondary-90 text-secondary-90
Accent bg-accent bg-accent text-accent text-accent
Accent-10 bg-accent-10 bg-accent-10 text-accent-10 text-accent-10
Accent-90 bg-accent-90 bg-accent-90 text-accent-90 text-accent-90

Resources

Next page