Color Palettes
On this page
Red Hat Design System comes with a contextual color-theming feature called "Color palettes", designed to make page developers' and content authors' jobs easier and to improve customers' digital experiences. Authors and developers who adopt the color palette system will produce accessible, branded experiences with less effort and greater cross-property consistency.
What are color palettes
RHDS defines six color palettes They range from lightest to darkest, and those are the two palettes you will use the most for the majority of your projects.
Example
Create, manage, and dynamically scale automation across your entire enterprise.
More cloud choice. Less cloud management.
HTML
CSS
How color palettes work
RHDS' color palette system is an HTML and CSS system with some supporting JavaScript[1]. The color palette system has two main parts: providers and consumers. Providers actively define a color palette, while consumers passively accept their background color from the nearest provider ancestor.
Color palettes allow for the creation of different experiences using the same design system. When a color palette is changed, elements change including color, space, text, and more. Layouts, content, and imagery usually stay the same.
Choosing a color palette
How you choose a color palette is based on content, user experience, and accessibility needs.
Lightest color palette
The lightest color palette is the default and has lots of use cases.
Darkest color palette
The darkest color palette can be used for highlighting content with dark colors or if a brighter interface would otherwise disrupt the user experience. Most light elements and patterns have dark counterparts.
Brand red and accessibility
Do not apply the Red Hat red color to text in dark environments unless it meets WCAG 2.1 AA requirements.
Illustrations and imagery
Illustrations and imagery should align to the color palette. The light color palette should feature imagery with light colors and vice versa. Imagery with high contrast is only acceptable if it has a transparent background. If you cannot find color-palette-specific imagery, contact the Brand team. Developers have a number of art-direction techniques at their disposal for creating themeable, responsive graphics.
Backgrounds and theme tokens
Color palettes
Providers define the color palette for themselves and their child elements. There are six color palettes in RHDS:
Lightest Lighter Light Dark Darker Darkest
Context providers typically use the lightest
color palette as the default.
Authors may define the color palette of a container using the color-palette
HTML attribute. So for example, to create a card with the darkest color palette,
use this HTML:
Example
This card uses the default color palette.
This card uses the author-set "darkest" color palette.
HTML
A color palette provider is a surface on which a particular color palette is active, as well as a container for themeable consumer elements.
Backgrounds
Consumers are elements which automatically adapt to their background surface. Color Consumers adopt a background color based on the palette of the surface they are on. In other words, the background of a consumer corresponds to the color palette of it's containing surface. There are two backgrounds in RHDS:
These backgrounds don't represent a specific colour, but rather they indicate whether the background is light or dark. This is so things like icons, text, and border colours can be chosen which will contrast enough with the background to remain legible. In other words, the background is the color context in which a consumer finds itself.
Extending our card example from above, if our page author then adds an
<rh-cta>
to the card, it will automatically adopt the dark color theme. The
page author need not and should not customize the CTA.
Example
The card and CTA respond to the theme of their container. On a light container, the CTA uses the light theme, and dark on dark.
The card uses the "darkest" palette. The CTA is always themed with the "dark" theme, because the card sets its own palette, rather than responding to it's container's.
HTML
To summarize: color providers can adopt one six palettes, three dark and
three light, and they provide a dark
or light
background to their children.
Combination elements
Some elements are both providers and consumers. Card, for example is both a provider and a consumer. It can accept the color theme of its parent context and it can also set its own color palette.
Example
Consumer
This card acts as a consumer.
It will always receive its parent's ColorTheme
.
Provider
This card acts as a provider.
Try changing this card's
color-palette
and see how it affects this card's children.
HTML
Inline color palettes
Beta
Inlining a color palette is when a section switches palette and looks different
than the rest of the page or interface. Some use cases include highlighting an
important section on a page or adding a sidebar to an interface. Use inline
palettes only for major shifts in color. For minor shifts, use a related color
palette, e.g. from lightest
to light
.
Update from the team
The design system team is working on creating inline color palette best practices in the near future. Contact us if you would like to contribute.
More information
High contrast is using bright elements, patterns, or images in dark environments and vice versa. This is useful to focus attention or create visual tension.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.