Color

Overview Usage Accessibility
  1. Introduction
  2. Color system
  3. Color tokens
  1. Introduction
  2. Color system
  3. Color tokens

Introduction

Color helps unify Red Hat digital properties, from website experiences to application interfaces.

Color system

Our color system provides comprehensive guidelines on use, definition, and role of color in branded digital experiences.

Role of color

Our color palette is designed with brand, usability, and accessibility in mind and is used for all projects across Red Hat. Applying color thoughtfully and consistently helps us create cohesive, recognizable, and engaging experiences for our users.

Color relationships

When colors are used together, they form relationships that communicate brand, hierarchy, state, and more.

Variants of several elements

Color design tokens

Design tokens are the source of truth of our design decisions. They allow for changes at scale, making design language updates easy to implement.

To learn more about our color design tokens, go to the Tokens section.

"Crayon" and semantic colors

Our design system includes multiple sets of colors known as "crayon" colors. Crayon colors reference hard-coded values, but offer no information about usage. Semantic colors reference crayon colors and define how a color is used. Semantic naming is essential not just for color, but for all foundational styles.

Example of how crayon color tokens are aliased to semantic tokens, which are used to style a button

Color tokens

Read more about our colour tokens on the tokens page.

Red

  1. rh-color-red-10
  2. rh-color-red-20
  3. rh-color-red-30
  4. rh-color-red-40
  5. rh-color-red-50
  6. rh-color-red-60
  7. rh-color-red-70

Red-orange

  1. rh-color-red-orange-10
  2. rh-color-red-orange-20
  3. rh-color-red-orange-30
  4. rh-color-red-orange-40
  5. rh-color-red-orange-50
  6. rh-color-red-orange-60
  7. rh-color-red-orange-70

Orange

  1. rh-color-orange-10
  2. rh-color-orange-20
  3. rh-color-orange-30
  4. rh-color-orange-40
  5. rh-color-orange-50
  6. rh-color-orange-60
  7. rh-color-orange-70

Yellow

  1. rh-color-yellow-10
  2. rh-color-yellow-20
  3. rh-color-yellow-30
  4. rh-color-yellow-40
  5. rh-color-yellow-50
  6. rh-color-yellow-60
  7. rh-color-yellow-70

Green

  1. rh-color-green-10
  2. rh-color-green-20
  3. rh-color-green-30
  4. rh-color-green-40
  5. rh-color-green-50
  6. rh-color-green-60
  7. rh-color-green-70

Teal

  1. rh-color-teal-10
  2. rh-color-teal-20
  3. rh-color-teal-30
  4. rh-color-teal-40
  5. rh-color-teal-50
  6. rh-color-teal-60
  7. rh-color-teal-70

Blue

  1. rh-color-blue-10
  2. rh-color-blue-20
  3. rh-color-blue-30
  4. rh-color-blue-40
  5. rh-color-blue-50
  6. rh-color-blue-60
  7. rh-color-blue-70

Purple

  1. rh-color-purple-10
  2. rh-color-purple-20
  3. rh-color-purple-30
  4. rh-color-purple-40
  5. rh-color-purple-50
  6. rh-color-purple-60
  7. rh-color-purple-70

Gray

  1. rh-color-gray-10
  2. rh-color-gray-20
  3. rh-color-gray-30
  4. rh-color-gray-40
  5. rh-color-gray-50
  6. rh-color-gray-60
  7. rh-color-gray-70
  8. rh-color-gray-80
  9. rh-color-gray-90
  10. rh-color-gray-95

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.