Color palette

Our palette adds a colorful and bold presence to the brand, with high contrast and vibrance. When using color in any document, primary colors should have priority and be used most prominently. Secondary colors should be used to complement the main content.

Color palette

Primary colors

Navy blue

Navy blue

RGB: 20, 17, 85 HEX: #141155 CMYK: 100/70/0/60 Pantone 2766

Lagoon blue

Lagoon blue

RGB: 0, 165, 174 HEX: #00A5AE CMYK: 66/0/19/9 Pantone 7466

white

White

RGB: 255, 255, 255 HEX: #FFFFFF

Secondary colors

Deep ocean blue

Deep ocean blue

RGB: 0, 0, 38 HEX: #000026

Ocean foam

Ocean foam

RGB: 24, 125, 171 HEX: #187DAB CMYK: 46/8/0/22 Pantone 2390

Marine blue

Marine blue

RGB: 33, 32, 127 HEX: #21207F CMYK: 100/68/0/14 Pantone 2369

Ocean blue

Ocean blue

RGB: 0, 77,165 HEX: #004DA5 CMYK: 100/52/0/0 Pantone 2144

Coral red

Coral red

RGB: 229,116, 89 HEX: #E57459 CMYK: 0/72/59/0 Pantone 2434

Accent colors

Ocean foam light

Ocean foam light

RGB: 154, 202, 227 HEX: #9ACAE3 CMYK: 28/5/0/13 Pantone 290

Ocean foam dark

Ocean foam dark

RGB: 17, 94,129 HEX: #115E81 CMYK: 75/13/0/35 Pantone 7700

Lagoon blue light

Lagoon blue light

RGB: 50, 201, 197 HEX: #32C9C5 CMYK: 42/0/12/5 Pantone 3252

Lagoon blue dark

Lagoon blue dark

RGB: 12, 114, 112 HEX: #0C7270 CMYK: 100/0/29/36 Pantone 7718

Coral red light

Coral red light

RGB: 255,147,120 HEX: #FF9378 CMYK: 0/39/32/4 Pantone 2022

Coral red dark

Coral dark

RGB: 206, 82, 50 HEX: #CE5232 CMYK: 00/97/80/10 Pantone 7580

Grey

Deep ocean blue

Deep ocean blue

RGB: 0, 0, 38 HEX: #000026

Soft grey

Soft grey

RGB: 232, 233, 236 HEX: #E8E9EC

Dark grey

Dark grey

RGB: 42, 56, 76 HEX: #2A384C

Light grey

Light grey

RGB: 244, 245, 246 HEX: #F4F5F6

Accessible grey

Accessible grey

RGB: 148, 149, 149 HEX: #949595

white

White

RGB: 255, 255, 255 HEX: #FFFFFF

Gradients

Gradient navy blue to deep ocean blue

Navy blue → black

Gradient coral light to coral dark

Coral light → Coral dark

Gradient marine blue to navy blue

Marine blue → Navy blue

Gradient lagoon blue to ocean wave

Lagoon blue → Ocean wave

Gradient lagoon blue to lagoon dark

Lagoon blue → Lagoon dark

Color Ratio

Primary and secondary colors

Although we have different colors in out palette we are primarily blue. Never let the secondary colors take over from Navy Blue or White. They should only be used as highlights or hints to focus attention. When choosing secondary colors remember to let Lagoon Blue be the predominant one comparing to Coral Red.

Accent colors

The accent colors represent darker and lighter shades of our primary and secondary colors, but these colors should never be present as a colors alone. These are primarily used for a second color in a gradient, as a hover state or an accent in an illustration.

Whitespace

Always make sure to let your pages breathe with whitespace, whether you're creating dark or light layouts the elements needs to breathe. What’s absent can focus attention on the content that’s there. Rather than viewing white space as a blank area, think of it as a pause. Don’t fill negative space just because it's there.

Color ratio

Additional color rules

Headers

In main headers we highlight the key word (up to max 2 words per header) in lagoon blue.

Bullet points

Always coral red

CTA buttons

They should be in lagoon blue color with navy blue copy. Hover effect: Lagoon blue light with navy blue copy

Keeping text accessible

Color contrast is a very important component of creating accessible text for all users. To make your text easy to read, the contrast between the text and the background should be high.

Use this color contrast checker to determine whether or not your color combinations are accessible or not.

Siteimprove color contrast checker

Accessibility

Background: Black

Allowed text colors: White, Coral, Lagoon blue

Background: Navy blue

Allowed text colors: White, Coral, Lagoon blue

Background: Ocean blue

Allowed text colors: White

Background: Ocean foam

Allowed text colors: White

Background: Ocean foam light

Allowed text colors: None

Background: Lagoon blue

Allowed text colors: Black, Navy blue

Background: Coral

Allowed text colors: Marine Blue, Navy blue

Background: White

Allowed text colors: Black, Navy blue, Marine blue, Ocean blue

How to install the color palette on your laptop

These colors are now available also in Word/Excel as a standard palette.

The new color palette has been pushed out centrally by IT in Word and Excel, but you will get it automatically only if you are working in a Siteimprove office.

To make sure you can update the colors even when working from home, please download this file and save it on your laptop. You should now be able to see the new color palette as default colors. In case you do not see them by default please follow these instructions: Word: go to Design > Colors > select the Siteimprove palette Excel: go to Page Layout > Colors > select the Siteimprove palette