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.
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 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 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 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.
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.