HP color palette
TechHP's color identity centers on a distinctive blue, complemented by a clean neutral palette and subtle accent colors for digital and print consistency. The brand uses its blue for recognition and pairs it with modern grays and white for clarity and professionalism.
hp.comHP colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- HP BluePrimary0, 150, 214
- HP CharcoalSecondary33, 33, 33
- HP TealAccent0, 179, 136
Surfaces
Page, cards and dividers.- HP WhiteBackground255, 255, 255
- HP Light GraySurface245, 245, 245
- HP Divider GrayBorder224, 224, 224
Text
Three tiers of copy.- HP CharcoalText33, 33, 33
- HP Medium GraySecondary text117, 117, 117
- HP Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- HP Success GreenSuccess67, 176, 42
- HP Warning YellowWarning255, 182, 0
- HP Error RedError230, 0, 40
- HP BlueInfo0, 150, 214
Use HP's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hp-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0096D6;
--error: #E60028;
--accent: #00B388;
--border: #E0E0E0;
--primary: #0096D6;
--success: #43B02A;
--surface: #F5F5F5;
--warning: #FFB600;
--secondary: #212121;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #212121;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
HP gray and neutral colors
The quiet part of the HP palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- HP WhiteBackground
- HEX
- RGB
- HSL
- HP Light GraySurface
- HEX
- RGB
- HSL
- HP Divider GrayBorder
- HEX
- RGB
- HSL
- HP CharcoalText
- HEX
- RGB
- HSL
- HP Medium GraySecondary text
- HEX
- RGB
- HSL
- HP Muted GrayMuted text
- HEX
- RGB
- HSL
About HP's colors
HP's palette is anchored by a vibrant blue, conveying trust and innovation, and is balanced with neutral grays and white for clarity. Accent colors are used sparingly to highlight actions and statuses.
Primary blue contrasts with white and dark gray for legibility.
Accent teal and green provide visual interest and status cues.
Neutral grays support backgrounds, borders, and text.
Psychology
HP Blue evokes reliability, professionalism, and technological innovation. The neutral tones reinforce a sense of clarity and approachability.
Evolution
The HP palette has remained stable, with blue as its core identity since the early 2000s. Minor adjustments to gray tones and accent colors have modernized the UI while keeping the brand recognizable.
Where HP uses each color
- Primary
HP Blue is used for logos, primary buttons, and key navigation elements.
- Secondary
HP Charcoal appears in headers, footers, and primary text.
- Accent
HP Teal is used for highlights, links, and call-to-action elements.
- Backgrounds
HP White and HP Light Gray are used for page backgrounds and card surfaces.
- Text
HP Charcoal and HP Medium Gray are used for primary and secondary text, with HP Muted Gray for disabled or less prominent text.
- Semantic
HP Success Green, Warning Yellow, and Error Red are used for status indicators and notifications.
HP color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official HP primary color is HP Blue, hex code #0096D6. This color is central to HP's brand identity.
HP Blue (#0096D6) in RGB is (0, 150, 214) and in CMYK is (100, 30, 0, 16). Use these values for digital and print consistency.
HP uses HP Charcoal (#212121), HP Medium Gray (#757575), HP Muted Gray (#BDBDBD), HP Light Gray (#F5F5F5), and HP Divider Gray (#E0E0E0) for UI backgrounds, text, and borders. These ensure clarity and accessibility across digital interfaces.
Use HP Blue (#0096D6) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for highlights, links, and status indicators to maintain brand consistency.
The secondary color is HP Charcoal, #212121, and the accent is HP Teal, #00B388. Together with the primary they make up the three brand colors at the top of this page.
3 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies HP's colors consistently when it generates UI.
Make something in the spirit of HP
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.