HPE
Design System
Foundation
Components
Templates
Extend
Foundation

Color

You will notice that the HPE Design System Color guidance is different from Brand Central. Prioritize the below HPE Design System color palette over Brand Central when identifying colors for your app or web based experience.

The HPE Design System team is working with HPE Brand to ensure that the Brand Central color palettes (like 'secondary colors') are updated to meet ADA accessibility and color contrast levels in a large variety of user contexts.

Open in Figma

Color Palettes

Color is a key way we express our brand. Using color on interface elements, how typography is presented, displaying data visualizations, and adjusting context of the experience to light and dark are just some of the ways we illustrate inclusive design for our app and web based experiences.

Brand Color

HPE green symbolizes growth and vitality, commands attention and inspires action. Our green is an essential part of our brand identity and should be evident in every communication wherever possible. Always use the custom color specifications seen here to maintain consistency across channels and media.

green#01A982

Core Palette

HPE Core colors provide a set of swatches that compliment HPE Green and help establish the vibrant experience HPE embraces. We use "emphasis" as a way to show the importance and use the most vibrant hue on light or dark contexts. To maintain accessibility requirements, it's important to be mindful of how the aspects of the color library are used in conjunction with the Core colors.

purple!#7630EA
teal!#00E8CF
blue!#00739D
red!#C54E4B
orange!#FF8300
yellow!#FEC901

Light Palette

The light color palette provides a set of swatches which compliment HPE Core colors for use in combination with dark text to maintain color accessibility in your experience. Use these colors only when implementing a light theme.

green#17EBA0
purple#F740FF
teal#82FFF2
blue#00C8FF
red#FC6161
orange#FFBC44
yellow#FFEB59

Dark Palette

The dark color palette provides a set of swatches which compliment HPE Core colors for use in combination with light text to maintain color accessibility in your experience. Use these colors only when implementing a dark theme.

green#008567
purple#6633BC
teal#117B82
blue#00567A
red#A2423D
orange#9B6310
yellow#8D741C

Green Color Accessibility

The HPE Design System green ensures compliance with WCAG 2.1 standards for distinguishable text and color (see success criterion 1.4.1 and 1.4.3). With accessibility as one of its core principles, the HPE Design System focused on keeping accessibilty research and guidelines at the center of its color selection process.

See details below on how to remain compliant in both light and dark theme modes.

Light Mode

AAA compliance is met for text on a light mode green background when using `text-strong` color. This is ensured for text of size 18px and above.

If a font size is below 18px, AAA compliance will fail with default font weight on an HPE green background. In this case, apply weight="bold" to meet AAA compliance.

This text is default size, default weight, and color text-strong.
Contrast Ratio
13.42:1
WCAG AA
Pass
WCAG AAA
Pass
This text is size small, bold weight, and color text-strong.
Contrast Ratio
13.42:1
WCAG AA
Pass
WCAG AAA
Pass

Dark Mode

AA compliance is met for text on a dark mode green background when using `text-strong` color. To meet AAA compliance, use text size="large" and weight="bold".

This text is default size, default weight, and color text-strong.
Contrast Ratio
4.61:1
WCAG AA
Pass
WCAG AAA
Fail
This text is size large, bold weight, and color text-strong.
Contrast Ratio
4.61:1
WCAG AA
Pass
WCAG AAA
Pass

Background Colors

Our color palette is only impactful when used in the correct context. Accommodating both light and dark modes of a user experience with the appropriate color palette creates a successful customer experience.

For more direction on how to use background colors within your layout, see Background Colors Guidance.

Background Palette

In light and dark modes, building depth with interface elements, and the background is key in making readability or text and key interactions key to driving users' success. The swatches below illustrate how to use color for your experiences.

Light Background
background#FFFFFF
background-back#EFEFEF
background-front#FFFFFF
Dark Background
background#263040
background-back#263040
background-front#404B5C

Contrast

For times when you have more than two layers of content (e.g. a background and a styled UI element on top of it), you can use contrast to help add more layers of depth to your design, illustrate a visual separation, or show how stacked interface elements will look. By default, contrast will bump your background to a lighter or darker tint based on the theme and background.

Light Background
background-contrast#0000000A
Dark Background
background-contrast#FFFFFF14

Border Colors

Using border colors properly ensures that the user is able to identify the state of various components. Borders help differentiate elements and input fields from surrounding content.

Border Palette

In light and dark modes, border is key in making separating input fields or layout elements from surrounding content. Depending on the context, a varying amount of strength is needed for the border to be effective, and in many cases there may be no border necessary.

Light Border
border#999999
border-strong#666666
border-weak#BBBBBB
Dark Border
border#7887A1
border-strong#AFBCD2
border-weak#606B7D

Input Colors

Inputs that exist within FormFields have varying colors to suggest their state: enabled vs disabled, required, etc. The proper use of these colors ensures that the user can easily understand the state of the input.

Input Palette

In light and dark modes, input colors are key in providing the user with guidance on how they can interact with an input.

Light Input
enabled inputs have a border of "border"#999999
disabled inputs have a border of "border-weak"#BBBBBB
inputs containing a value have a border of "border-strong"#666666
validation-critical#FC61613D
validation-ok#17EBA03D
validation-warning#FFBC443D
Dark Input
enabled inputs have a border of "border"#7887A1
disabled inputs have a border of "border-weak"#606B7D
inputs containing a value have a border of "border-strong"#AFBCD2
validation-critical#C54E4B5C
validation-ok#00856759
validation-warning#9B63105C

Text Colors

Text needs to be legible in all contexts. Ensuring high contrast is met for accessibility and readability is important to delivering users a consistent reading experience throughout HPE.

Text Color Palette

Text colors have two states when working on different background contexts; depending on background the text can invert to accomodate a dark mode. To ensure text maintains readability, we avoid color use with the exception of call to actions such as hyperlinks and anchors.

Light Background
Aa
text#444444
Aa
text-strong#000000
Aa
text-weak#BBBBBB
Dark Background
Aa
text#C0CADC
Aa
text-strong#FFFFFF
Aa
text-weak#606B7D

Status Colors

Light Background
status-critical#FC5A5A
status-warning#FFBC44
status-ok#17EBA0
status-unknown#CCCCCC
Dark Background
status-critical#D04F4E
status-warning#9B6310
status-ok#008567
status-unknown#4F5F76

Focus Color

Focus is critical to accessibility. When a user is navigating with keyboard, focus indicates which element on the page is active. Do not remove focus outline in your application, as this will compromise the accessibility of the application.

focus#00E8CF

Elevation

Elevation creates depth between a foreground and background element. Depending on the desired contrast, varying strengths of elevation can be used. Elevation is implemented by default on certain elements such as Menu and Select.

Light Background
elevation0px 6px 12px #0000001F;
elevation-strong0px 12px 24px #0000003D;
elevation-weak0px 2px 4px #0000001F;
Dark Background
elevation0px 6px 12px #0000005C;
elevation-strong0px 12px 24px #0000007A;
elevation-weak0px 2px 4px #0000003D;

Overlay Color

When a Layer is open, this overlay extends over the rest of the application content. It creates a visual distinction between the active foreground Layer and the inactive background content. This is controlled by `layer.overlay.background` in the theme.

layer-overlay#00000080