Color Palettes

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.

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.

HTML design systems help teams ship better digital experiences, faster.

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:

1. Lightest
2. Lighter
3. Light
4. Dark
5. Darker
6. 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:

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:

• Light
• Dark

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.

Page authors do not need to and should not customize colors of consumer elements, but instead should set custom values for theme tokens. Color palette containers can be nested, such that child elements will always adopt the color theme corresponding to the nearest container's palette.

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.

Color palettes lets authors write more HTML, simpler CSS, and less JavaScript

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.

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 the getting started page.

---

1. As the web platform improves, the RHDS authors expect that eventually no JavaScript will be required for this feature. ↩︎