HP.com Design System HP.com Design System HP.com Design System

Color

Color

The HP color system takes it's inspiration from printer test sheets, and the visual effect they produce when the gradation of colors are repeated. We've taken this idea and made it part of our identity, creating warmth and dynamism when living together as a whole.

Color System

There are 22 base colors at 100% saturation. All additional colors are made from incremental tints of the original. These steps provide monochromatic simplicity.

Hex Color Codes

#0096d6

#4759f5

#549ef7

#40defa

#00d072

#4ef5ab

#83f955

#d3fb66

#b655f5

#a89efa

#ff63bb

#ff84ff

#ff948a

#ff8900

#ffbd3b

#ffe137

#fcf54b

#856630

#4b0f22

#212248

#0c4508

#231f20

#f2ebdc

HP standard cream (text background color)

#e6e6e6

HP Standard gray (photo background color)

#ff3900

Warning red (used for annotating)

#000000

Black (used for text, lines, graphics)

Color rules
 

  1. Use a single color in a layout
  2. Break sections up in stair-step gradations of color percentages
  3. Don't use lines in addition to color breaks, only in a solid color
  4. Check accessibility of type on colors
  5. Visually pick colors based on the colors in your photography for cohesiveness

Don't mix colors

Don't break stair-step sequence

Don't use color in type

Don't put a dark color behind black type

(Accesibilty check)

Don't use a color other than HP Standard Gray behind photography

Don't use gradients

Color stacking build examples
 

  1. Layouts start at 100% of any given color
  2. Colors stack in stepped tints to create different sections within a layout (e.g. 100%>70%>40%>20%)
  3. Lines are used to seperate content and create sections within a given color
  4. No need to use a line to seperate a section if the section is next to another color

 

Here are four different color-stack build examples

We are not assigning specific colors to products

The current color system is not meant to assign specific colors to specific products. Instead, the colors are meant to be used interchangeably over time. Any product can be any color, as long as the context allows for it.

 

Example: If you assign 'HP Elite Dragonfly' the color blue once, it doesn't have to be blue forever.

 

In instances where using mulitple colors is confusing or creates a problem, a neutral color layout may be the solution.

Neutral vs color layout

Both layout color approaches are OK! The use just depends on the look you desire.

Color layout

Approach color executionally, and assign colors you want for that execution.

Neutral layout

Use a neutral layout with no color when color feels overwhelming. Attempt to create a felling of sameness.

Resources

Reference

For Zeplin access contact the UX Design Manager

Figma

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.

Contrast Checker