/
Color
  • Outdated
  • 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.