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