Color palettes

There are various color palettes within our design system. The palettes you will use the most for the majority of your projects are the lightest and darkest themes.

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.

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.

Desaturated color-palette Beta

The desaturated theme can be used when elements or patterns need to be placed on large areas of color or some of the surface gray values.

Update from the team

The design system team is working on creating desaturated theme best practices in the near future. Contact us if you would like to contribute.

Illustrations and imagery should align to the theme. The light theme 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 theme-specific imagery, contact the Brand team.

Red Hat Design System comes with a contextual color-theming feature called "Color Context", designed to make page developers' and content authors' jobs easier and to improve customers' digital experiences. Authors and developers who adopt the color context system will produce accessible, branded experiences with less effort and greater cross-property consistency.

RHDS' color context system is an HTML and CSS system with some supporting JavaScript[1]. The color context system has two main parts: providers and consumers. Providers actively define a color theme, while consumers passively accept their theme from the nearest provider ancestor.

Context providers define a color palette for themselves and their child elements. There are currently six main color palettes:

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:

<rh-card>
  <p>
    This card uses the default
    color palette.
  </p>
</rh-card>

<rh-card color-palette="darkest">
  <p>
    This card uses the author-set
    "darkest" color palette.
  </p>
</rh-card>

Context consumers, which adopt a color theme. There are two main color themes, corresponding to the above palettes:

1. light
2. dark

Child elements which are providers will automatically adapt, applying their own color theme as needed. Page authors do not need to and should not customize colors of consumer elements.

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

<rh-card>
  <p>
    The card <em>and</em> 
    CTA use the default colors.
  </p>
  <rh-cta slot="footer">Fine!</rh-cta>
</rh-card>

<rh-card color-palette="darkest">
  <p>
    The card uses the "darkest" palette.
    The CTA is automatically themed
    with the "dark" theme.
  </p>
  <rh-cta slot="footer">Nice!</rh-cta>
</rh-card>

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 context and it can also set its own color palette.