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.