Color
On this page
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.
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.
Color tokens
Read more about our colour tokens on the tokens page.
Red
- rh-color-red-10
- rh-color-red-20
- rh-color-red-30
- rh-color-red-40
- rh-color-red-50
- rh-color-red-60
- rh-color-red-70
Red-orange
- rh-color-red-orange-10
- rh-color-red-orange-20
- rh-color-red-orange-30
- rh-color-red-orange-40
- rh-color-red-orange-50
- rh-color-red-orange-60
- rh-color-red-orange-70
Orange
- rh-color-orange-10
- rh-color-orange-20
- rh-color-orange-30
- rh-color-orange-40
- rh-color-orange-50
- rh-color-orange-60
- rh-color-orange-70
Yellow
- rh-color-yellow-10
- rh-color-yellow-20
- rh-color-yellow-30
- rh-color-yellow-40
- rh-color-yellow-50
- rh-color-yellow-60
- rh-color-yellow-70
Green
- rh-color-green-10
- rh-color-green-20
- rh-color-green-30
- rh-color-green-40
- rh-color-green-50
- rh-color-green-60
- rh-color-green-70
Teal
- rh-color-teal-10
- rh-color-teal-20
- rh-color-teal-30
- rh-color-teal-40
- rh-color-teal-50
- rh-color-teal-60
- rh-color-teal-70
Blue
- rh-color-blue-10
- rh-color-blue-20
- rh-color-blue-30
- rh-color-blue-40
- rh-color-blue-50
- rh-color-blue-60
- rh-color-blue-70
Purple
- rh-color-purple-10
- rh-color-purple-20
- rh-color-purple-30
- rh-color-purple-40
- rh-color-purple-50
- rh-color-purple-60
- rh-color-purple-70
Gray
- rh-color-gray-10
- rh-color-gray-20
- rh-color-gray-30
- rh-color-gray-40
- rh-color-gray-50
- rh-color-gray-60
- rh-color-gray-70
- rh-color-gray-80
- rh-color-gray-90
- rh-color-gray-95
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other foundations in your designs, visit the foundations section.