Color

Introduction

Color is integral to expressing the Red Hat brand successfully across digital experiences. We use color in our elements, patterns, websites, app UI, and more.

Using color

Color palette

Since all projects use color in some way, our color palette was designed with brand, usability, and accessibility as foundations.

Communication

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

Design tokens

Design tokens are how we communicate and translate our design decisions to code. Changes can be made at scale, so any elements or patterns using our tokens will always be current.

To learn more, go to the Tokens section.

Crayon and semantic tokens

Our design system includes two sets of tokens:

• Crayon tokens - reference hard-coded values and offer no information about usage
• Semantic tokens - reference crayon colors and define how a color should be used

Helpful tip

Semantic naming is essential not only just for color, but for all foundational styles.

Color palette tokens

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.