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.
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.
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.
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.
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 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.
Contrast Ratio | 13.42:1 |
---|---|
WCAG AA | Pass |
WCAG AAA | Pass |
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"
.
Contrast Ratio | 4.61:1 |
---|---|
WCAG AA | Pass |
WCAG AAA | Fail |
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.
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.
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.
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.
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.
Status colors
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.
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.
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.
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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.