HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Color palettes
Brand color
Core palette
Light palette
Dark palette
Green color accessibility
Light mode
Dark mode
Background colors
Background palette
Contrast
Border colors
Border palette
Input colors
Input palette
Text Colors
Text color palette
Status colors
Focus color
Elevation
Overlay color
Graph colors
Foundation

Color

Bringing out the depth and dimension of our identity, the HPE Design System use of color evokes energy and inspiration.

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.

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.

brand#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#F7F7F7
background-front#FFFFFF

Dark Background
background#1C1C1C
background-back#1C1C1C
background-front#222222

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#FFFFFF0F

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#0000005C
border-strong#000000B8
border-weak#0000001F

Dark Border
border#FFFFFF5C
border-strong#FFFFFFB8
border-weak#FFFFFF1F

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"#0000005C
disabled inputs have a border of "border-weak"#0000001F
inputs containing a value have a border of "border-strong"#000000B8
validation-critical#FC61613D
validation-ok#17EBA03D
validation-warning#FFBC443D

Dark Input
enabled inputs have a border of "border"#FFFFFF5C
disabled inputs have a border of "border-weak"#FFFFFF1F
inputs containing a value have a border of "border-strong"#FFFFFFB8
validation-critical#CC1F1A4D
validation-ok#17D0A64D
validation-warning#D891284D

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#757575
Aa
text-xweak#BBBBBB

Dark Background
Aa
text#FFFFFFE6
Aa
text-strong#FFFFFFF5
Aa
text-weak#FFFFFF80
Aa
text-xweak#FFFFFF33

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#555555

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
medium0px 6px 12px #0000001F;
large0px 12px 24px #0000003D;
small0px 2px 4px #0000001F;

Dark Background
medium0px 6px 12px #0000005C;
large0px 12px 24px #0000007A;
small0px 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

Graph colors

Graph colors should be applied in order, starting with graph-0 . This color order was selected to provide clear distinction between adjacent data. When using Grommet DataChart, graph colors will be applied in order by default.

graph-0#FF8300
graph-1#00739D
graph-2#7630EA
graph-3#FEC901
graph-4#00E8CF

Related

Related content you may find useful when using Color.

HPE Background Colors Preview
Background Colors Guidance
Leverage HPE background colors to seamlessly style your layout.
HPE Typography Preview
Typography
The MetricHPE font is an integral part of our personality and design. When we’re making a statement, our visual language is clear, recognized and understood.
Hpe Icon Preview
Icons
Icons are an integral part of our visual storytelling style to represent objects, actions, programs and other communicative symbols. This clean, dynamic style remains flexible while retaining the voice of our brand.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page