Color Palettes

Red Hat Design System comes with a contextual color-theming feature based on color schemes (light, dark) and six corresponding color palettes. Designed to respect user's preferences while enabling designer's vision and increasing developers' efficiency, theming with RHDS builds upon state-of-the-art web standards. Authors and developers who adopt the color palette system can quickly produce accessible, branded experiences with less effort and greater cross-property consistency.

Color schemes (previously referred to as backgrounds) are rendering modes for elements that change their foreground and background colors. There are two color schemes: light and dark, each corresponding to three of the six color palettes. Elements which respond to their color scheme by changing their colors are called color scheme consumers (previously referred to as color context consumers).

Being aware of which elements are rendering in which color scheme is important to ensure that things like icons, text, and border colours remain legible.

RHDS defines six color palettes ranging from lightest to darkest, and those are the two palettes you will use the most for the majority of your projects.

Understanding how color palettes, color schemes, and theming work together is important not only in terms of design guidelines but also for accessibility compliance, and to enable positive experiences for all our users. We've developed our theming system with web standards in mind, and aiming to use CSS over JavaScript as much as possible. The following explains how the theming system works.

RHDS' color palette system is an HTML and CSS system with some supporting JavaScript.

Some design system elements may define their own color palettes. Elements that have this ability also pass on a specific color scheme to their children, based on their current color palette. For example <rh-surface>, <rh-card>, and <rh-accordion> can define their own color palette, while <rh-cta> and <rh-badge> cannot.

Elements which have this ability are called color scheme providers (previously referred to as color context providers). They usually implement a default color palette (e.g. lightest). Color scheme providers must also possess an optional color-palette attribute. When it is set to one of the six color palette values, any child elements which consume a background type will respond to the change. Setting the color-palette attribute will override any parent's color scheme.

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:

Color palettes allow for the creation of different experiences using the same design system. Changing an element's color palette can affect its colors and backgrounds, but usually spacing, typography, layouts, content, and imagery remain the same.

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 you add 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's colours.

To summarize: color providers can adopt one of six palettes, three dark and three light, and setting a color palette also sets the color scheme for its descendants, overriding any user preferences.

Some elements are both providers and consumers. Card, for example is both a provider and a consumer. It accepts the color scheme of its parent elements, or it can set its own color palette, and inherit that scheme to it's child elements.

.custom-theme-card {
  --rh-color-interactive-primary-default-on-light: var(--my-theme-darkblue);
  --rh-color-interactive-primary-default-on-dark: var(--my-theme-lightblue);
}

.custom-cta {
  color: var(--my-theme-darkblue);
}

See the customizing page for a more detailed example.

How you choose a color palette is based on content, user experience, and accessibility needs.

The lightest color palette is the default and has lots of use cases.

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.

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.