Global color tokens
Color#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Lightest surface (light theme) or primary text (dark theme) |
var(--rh-color-white, #ffffff)
|
|||
| Brand black (avoid using) |
var(--rh-color-black, #000000)
|
Accent#
Base#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Inline link (light theme) |
var(--rh-color-accent-base-on-light, #0066cc)
|
|||
| Inline link (dark theme) |
var(--rh-color-accent-base-on-dark, #73bcf7)
|
Brand#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Brand red (light theme) |
var(--rh-color-accent-brand-on-light, #ee0000)
|
|||
| Brand red (dark theme) |
var(--rh-color-accent-brand-on-dark, #ff442b)
|
Brand#
Red#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Lightest brand red |
var(--rh-color-brand-red-lightest, #fddbdb)
|
|||
| lighter brand red |
var(--rh-color-brand-red-lighter, #fab6b6)
|
|||
| Light brand red |
var(--rh-color-brand-red-light, #f56d6d)
|
|||
| Dark brand red/Brand red hover |
var(--rh-color-brand-red-dark, #be0000)
|
|||
| Darker brand red |
var(--rh-color-brand-red-darker, #8f0000)
|
|||
| Darkest brand red |
var(--rh-color-brand-red-darkest, #5f0000)
|
|||
| Brand red on dark background |
var(--rh-color-brand-red-on-dark, #ff442b)
|
|||
| Brand red on light background |
var(--rh-color-brand-red-on-light, #ee0000)
|
Canvas#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary canvas (light theme) |
var(--rh-color-canvas-white, #ffffff)
|
|||
| Primary canvas (dark theme) |
var(--rh-color-canvas-black, #151515)
|
Blue#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - Info background |
var(--rh-color-blue-50, #e7f1fa)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Blue) border color |
var(--rh-color-blue-100, #bee1f4)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-blue-200, #73bcf7)
|
||||||||||||||
|
||||||||||||||
| Alert - Info accent |
var(--rh-color-blue-250, #2b9af3)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Blue) accent color |
var(--rh-color-blue-400, #0066cc)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-blue-500, #004080)
|
||||||||||||||
|
||||||||||||||
| Alert - Info title text |
var(--rh-color-blue-600, #002952)
|
|||||||||||||
|
||||||||||||||
Cyan#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - Default background |
var(--rh-color-cyan-50, #f2f9f9)
|
|||||||||||||
|
||||||||||||||
| Label (Cyan) border color |
var(--rh-color-cyan-100, #a2d9d9)
|
|||||||||||||
|
||||||||||||||
| Alert - Default accent |
var(--rh-color-cyan-300, #009596)
|
|||||||||||||
|
||||||||||||||
| Alert - Default accent |
var(--rh-color-cyan-400, #005f60)
|
|||||||||||||
|
||||||||||||||
| Alert - Default title text |
var(--rh-color-cyan-500, #003737)
|
|||||||||||||
|
||||||||||||||
Gold#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - Warning background |
var(--rh-color-gold-50, #fdf7e7)
|
|||||||||||||
|
||||||||||||||
| Alert - Warning accent |
var(--rh-color-gold-400, #f0ab00)
|
|||||||||||||
|
||||||||||||||
| Alert - Warning title text |
var(--rh-color-gold-600, #795600)
|
|||||||||||||
|
||||||||||||||
Gray#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Secondary surface (light theme) |
var(--rh-color-gray-10, #E0E0E0)
|
|||||||||||||
|
||||||||||||||
| Subtle borders (light theme) |
var(--rh-color-gray-20, #C7C7C7)
|
|||||||||||||
|
||||||||||||||
| Subtle icon (hover state) |
var(--rh-color-gray-30, #A3A3A3)
|
|||||||||||||
|
||||||||||||||
| Subtle icon |
var(--rh-color-gray-40, #707070)
|
|||||||||||||
|
||||||||||||||
| Secondary text (light theme) |
var(--rh-color-gray-50, #4D4D4D)
|
|||||||||||||
|
||||||||||||||
| Tertiary surface (dark theme) |
var(--rh-color-gray-60, #383838)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-gray-70, #292929)
|
||||||||||||||
|
||||||||||||||
| Secondary surface (dark theme) |
var(--rh-color-gray-80, #1F1F1F)
|
|||||||||||||
|
||||||||||||||
| Primary surface (dark theme) or primary text (light theme) |
var(--rh-color-gray-90, #151515)
|
|||||||||||||
|
||||||||||||||
| Tertiary surface (light theme) |
var(--rh-color-gray-05, #F2F2F2)
|
|||||||||||||
Green#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| alert - success background |
var(--rh-color-green-50, #f3faf2)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Green) border color |
var(--rh-color-green-100, #bde5b8)
|
|||||||||||||
|
||||||||||||||
| Alert - Success accent |
var(--rh-color-green-500, #3e8635)
|
|||||||||||||
|
||||||||||||||
| Alert - Success title text |
var(--rh-color-green-600, #1e4f18)
|
|||||||||||||
|
||||||||||||||
Orange#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Label - Filled (Orange) background color |
var(--rh-color-orange-50, #fff6ec)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Orange) border color |
var(--rh-color-orange-100, #f4b678)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Orange) accent color |
var(--rh-color-orange-300, #ec7a08)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Orange) accent color |
var(--rh-color-orange-500, #8f4700)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Orange) text color |
var(--rh-color-orange-700, #3b1f00)
|
|||||||||||||
|
||||||||||||||
Purple#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Label - Filled (Purple) background color |
var(--rh-color-purple-50, #f2f0fc)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-purple-100, #cbc1ff)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-purple-300, #a18fff)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-purple-500, #6753ac)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-purple-700, #1f0066)
|
||||||||||||||
|
||||||||||||||
Red#
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - Critical background |
var(--rh-color-red-50, #faeae8)
|
|||||||||||||
|
||||||||||||||
| Lightest red |
var(--rh-color-red-100, #fddbdb)
|
|||||||||||||
|
||||||||||||||
| Lighter red |
var(--rh-color-red-200, #fab6b6)
|
|||||||||||||
|
||||||||||||||
| Light red |
var(--rh-color-red-300, #f56d6d)
|
|||||||||||||
|
||||||||||||||
| Brand red (dark theme) |
var(--rh-color-red-400, #ff442b)
|
|||||||||||||
|
||||||||||||||
| Brand red (light theme) |
var(--rh-color-red-500, #ee0000)
|
|||||||||||||
|
||||||||||||||
| Dark red or brand red hover |
var(--rh-color-red-600, #be0000)
|
|||||||||||||
|
||||||||||||||
| Darker red |
var(--rh-color-red-700, #8f0000)
|
|||||||||||||
|
||||||||||||||
| Darkest red |
var(--rh-color-red-800, #5f0000)
|
|||||||||||||
|
||||||||||||||
Interactive#
Blue#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Inline link hover (dark theme) |
var(--rh-color-interactive-blue-lightest, #bee1f4)
|
|||
| Inline link (dark theme) |
var(--rh-color-interactive-blue-lighter, #73bcf7)
|
|||
| Inline link (light theme) |
var(--rh-color-interactive-blue-darker, #0066cc)
|
|||
| Inline link hover (light theme) |
var(--rh-color-interactive-blue-darkest, #004080)
|
Purple#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Inline link visited hover (dark theme) |
var(--rh-color-interactive-purple-lightest, #cbc1ff)
|
|||
| Inline link visited (dark theme) |
var(--rh-color-interactive-purple-lighter, #a18fff)
|
|||
| Inline link visited (light theme) |
var(--rh-color-interactive-purple-darker, #6753ac)
|
|||
| Inline link visited hover (light theme) |
var(--rh-color-interactive-purple-darkest, #1f0066)
|
Surface#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary surface (light theme) |
var(--rh-color-surface-lightest, #ffffff)
|
|||
| Tertiary surface (light theme) |
var(--rh-color-surface-lighter, #f2f2f2)
|
|||
| Secondary surface (light theme) |
var(--rh-color-surface-light, #e0e0e0)
|
|||
| Tertiary surface (dark theme) |
var(--rh-color-surface-dark, #383838)
|
|||
| Alternative tertiary surface (not available for use with context provider) |
var(--rh-color-surface-dark-alt, #292929)
|
|||
| Secondary surface (dark theme) |
var(--rh-color-surface-darker, #1f1f1f)
|
|||
| Primary surface (dark theme) |
var(--rh-color-surface-darkest, #151515)
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
