Color

Color distinguishes our brand and helps us create consistent experiences across products.


We are currently working on the new color palette. Please use the current color platte. Thank you!

 

Current palette

 

NAME

UC Dark Blue

HEX

#0045A5

RGB

0, 9, 165

CMYK

C100 M83 Y0 K0

NAME

UC Blue

HEX

#0096FF

RGB

204, 218, 237

CMYK

C100 M41 Y0 K0

 

 

NAME

UC Light Blue

HEX

#B8CEE1

RGB

0, 9, 165

CMYK

C26 M11 Y3 K0

NAME

UC Dark

HEX

#021836

RGB

2, 24, 54

CMYK

C96 M56 Y0 K79

 

 

NAME

UC Orange

HEX

#F25800

RGB

0, 9, 165

CMYK

C0 M80 Y100 K0

 

 

 


We are currently working on the new color palette. Please use the current color platte. Thank you!

Primary palette (Not Ready!)

IN PROGRESS

Our primary palette is comprised of neutrals, white, and blue to bring boldness to our brand and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits. We pepper warmer, secondary palette colors throughout to soften the experience and to impart confidence and optimism.

We use blue (B400) for primary actions, buttons, text links, for indicating progress and representing authentication. Neutral (N800) is used primarily for body text and headings, and white (N0) is used for page backgrounds.

 

NAME

DB400 • Pacific

HEX

#085FD9

RGB

0, 9, 165

NAME

DB500 • Clouds

HEX

#CCDAED

RGB

204, 218, 237

NAME

DB200 • Heaven

HEX

#F2F6FD

RGB

242, 246, 253

 

 

NAME

DB900 • Night Blue

HEX

#021836

RGB

2, 24, 54

NAME

N400 • Cement Gray

HEX

#DFE1E6

RGB

223, 225, 230

NAME

N200 • Neutral

HEX

#F4F5F7

RGB

244, 245, 247

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

O100 • Paper Orange

HEX

#FDF1EC

RGB

253, 241, 236

 

Extended palette NOT READY

The extended palette consists of all the useable tints and shades of each color in the palette. They are all numbered for easy reference. Usage of these colors varies depending on the touch point, but they come in handy for illustrations and components in product.

Dark Blue

Dark Blue’s is used to help us reinforce our presence and unify our touchpoints from marketing to product. It's sharp and clear, making it bold and optimistic, while at the same time it's soft and inviting, paying homage to the practical, human origins of Usercentrics. It is at the heart of every communication and should be used intentionally but sparingly. As with all colors in the palette, you should be mindful of the color values provided in these guidelines. When used appropriately and accurately, the colors have an incredible impact.

IN PROGRESS

 

NAME

DB900 • Night Blue

HEX

#021836

RGB

2, 24, 54

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

 

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

 

NAME

DB400 • Pacific

HEX

#085FD9

RGB

0, 9, 165

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

 

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

 

Light Blue

Light Blue's have varying degrees of saturation that allow for the appropriate level of warmth across marketing and product. Typically they are used for text and subtle backgrounds when we don't want to draw too much attention to a particular touchpoint or convey information such as "to do" or "disabled".

IN PROGRESS

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

DB500 • Clouds

HEX

#CCDAED

RGB

204, 218, 237

NAME

DB400 • Pacific

HEX

#085FD9

RGB

0, 9, 165

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

DB200 • Heaven

HEX

#F2F6FD

RGB

242, 246, 253

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

 

Neutrals

Neutrals have varying degrees of saturation that allow for the appropriate level of warmth across marketing and product. Typically they are used for text and subtle backgrounds when we don't want to draw too much attention to a particular touchpoint or convey information such as "to do" or "disabled".

IN PROGRESS

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

N400 • Cement Gray

HEX

#DFE1E6

RGB

223, 225, 230

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

N200 • Neutral

HEX

#F4F5F7

RGB

244, 245, 247

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

N0 • Snow

HEX

#FFFFFF

RGB

255, 255, 255

 

Orange

Orange is used to help us reinforce our presence and unify our touchpoints from marketing to product. It's sharp and clear, making it bold and optimistic, while at the same time it's soft and inviting, paying homage to the practical, human origins of Usercentrics. It is at the heart of every communication and should be used intentionally but sparingly. As with all colors in the palette, you should be mindful of the color values provided in these guidelines. When used appropriately and accurately, the colors have an incredible impact.

IN PROGRESS

 

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

O500 • Rusty Orange

HEX

#EB6435

RGB

235, 100, 53

NAME

O400 • Skin Orange

HEX

#F6B7A2

RGB

246, 183, 162

NAME

O100 • Paper Orange

HEX

#FDF1EC

RGB

253, 241, 236

 

Semantic color

The following guidelines outline when to use colors in product. Semantic color helps users find people, identify status, see actions, locate help, and understand next steps. The consistent use of color keeps cognitive load low and makes for a unified and engaging user experience.