Header
Color

Color choice matters.

It’s a way to evoke emotion, attract attention, or make a statement.

HP Color Swatch

Color System

We put our colors to the print test. Inspired by our iconic ink and the creators who use it, the curated Color System visually tells our backstory and distinctly feels HP.

Choose one color from our 21 diverse base hues for your design. We recommend leaning towards bright colors over the dark options as much as possible.

Use 100% saturation for the main color–with or without the stair-stepped tints. (See Tints section on this page) 

Tints

Make monochromatic more dynamic. Tints blend the harmony of a single hue with a crescendo of shades.

Commit to just one hue within the Color System. Repeat the single color in gradient tints.

Always start at 100% saturation for transitioning tints. Use the layout scale and your design discretion to assign tint increments.

The example shows 10% increments.

Color Stacking

Color stacking takes a measure of creativity. Done right, it effectively adds depth.  

Start at 100% saturation for your color of choice (from the base hues of course).

Stack in stepped tints to create different sections within a layout.

Do a little math to scale it out. Figure out percentages by dividing 100 by the number of sections. Ex: A 4-color layout factors out to 100%, 75%, 50%, and 25% tints, since 100/4 = 25.

Use discretion for divider lines. These lines separate content and create sections within a given color. However, there’s no need for them if tints indicate the separate sections. (See Lines guidelines.)

Take a look at the four different color stack builds for reference. 

  • Divider lines separate the content to create different sections on 100% saturation.

  • Divider lines separate the top content at 100% saturation. 50% tint separates the specs section.

  • Only one divider line is necessary, since tints separate the rest of the layout. The top features 100% saturation. The tints step down to 75% and then 50%

  • Tints separate all the sections, starting at 100% and stepping down to 75%, 50%, and 25% tints. No divider lines needed.

Neutral Colors

Neutral tones allow juxtaposed information and imagery to pop. The HP Standard Cream and HP Standard Gray give bright colors, type, and product imagery a backdrop to stand out.

Use HP Standard Cream for type backgrounds.

Use HP Standard Gray for product photography or for type (when not combined with product photography).

Find imagery that contrasts well with each color.

In specific situations, a white background may work better than cream or gray (e.g. multi-page documents or long slide decks). Use only as necessary. 

Do’s and Don’ts

Select colors with intention for your design execution. 

The system does not assign specific colors to specific products and is meant to be interchanged over time.

Take into account which colors you need and want to achieve your design goals. Use only neutral colors to set the tone for a quieter voice. 

When creating Intel assets, follow Intel’s Confusingly Similar guidelines for approved Intel versus Universal colors. Speak to your representative for further details.

Mixing Colors

Do

Dont

Use one color throughout at 100% saturation or alone with tints.

Don’t mix colors in a single layout.

Sections

Do

Dont

Use base colors and tints in the correct order.

Don't break the correct order when applying tints to separate content.

Type Color

Do

Dont

Black should be the only color used for type (except for white type over photos).

Different-colored type distracts and lacks consistency.

Type Background

Do

Dont

When applying neutral color for type, use HP Standard Cream or HP Standard Gray.

Don’t use a darker or lighter color than our HP Standard Cream or HP Standard Gray.

Photo Background

Do

Dont

Use HP Standard Gray for product photography backgrounds.

Don’t use color backgrounds, gradients, or a color darker or lighter than our HP Standard Gray.

  • Mixing Colors

  • Sections

  • Type Color

  • Type Background

  • Photo Background

Footer