Global color tokens

Color#

Ex. Token name Value Use case
Lightest surface (light theme) or primary text (dark theme) var(--rh-color-white, #ffffff) Copy Link
Brand black (avoid using) var(--rh-color-black, #000000) Copy Link

Accent#

Base#

Ex. Token name Value Use case
Inline link (light theme) var(--rh-color-accent-base-on-light, #0066cc) Copy Link
Inline link (dark theme) var(--rh-color-accent-base-on-dark, #73bcf7) Copy Link

Brand#

Ex. Token name Value Use case
Brand red (light theme) var(--rh-color-accent-brand-on-light, #ee0000) Copy Link
Brand red (dark theme) var(--rh-color-accent-brand-on-dark, #ff442b) Copy Link

Brand#

Red#

Ex. Token name Value Use case
Lightest brand red var(--rh-color-brand-red-lightest, #fddbdb) Copy Link
lighter brand red var(--rh-color-brand-red-lighter, #fab6b6) Copy Link
Light brand red var(--rh-color-brand-red-light, #f56d6d) Copy Link
Dark brand red/Brand red hover var(--rh-color-brand-red-dark, #be0000) Copy Link
Darker brand red var(--rh-color-brand-red-darker, #8f0000) Copy Link
Darkest brand red var(--rh-color-brand-red-darkest, #5f0000) Copy Link
Brand red on dark background var(--rh-color-brand-red-on-dark, #ff442b) Copy Link
Brand red on light background var(--rh-color-brand-red-on-light, #ee0000) Copy Link

Canvas#

Ex. Token name Value Use case
Primary canvas (light theme) var(--rh-color-canvas-white, #ffffff) Copy Link
Primary canvas (dark theme) var(--rh-color-canvas-black, #151515) Copy Link

Blue#

Ex. Token name Value Use case
Alert - Info background var(--rh-color-blue-50, #e7f1fa) Copy Link
To modify opacity var(--rh-color-blue-50, #e7f1fa) Copy Link
To modify opacity var(--rh-color-blue-50, #e7f1fa) Copy Link
Label - Filled (Blue) border color var(--rh-color-blue-100, #bee1f4) Copy Link
To modify opacity var(--rh-color-blue-100, #bee1f4) Copy Link
To modify opacity var(--rh-color-blue-100, #bee1f4) Copy Link
var(--rh-color-blue-200, #73bcf7) Copy Link
To modify opacity var(--rh-color-blue-200, #73bcf7) Copy Link
To modify opacity var(--rh-color-blue-200, #73bcf7) Copy Link
Alert - Info accent var(--rh-color-blue-250, #2b9af3) Copy Link
To modify opacity var(--rh-color-blue-250, #2b9af3) Copy Link
To modify opacity var(--rh-color-blue-250, #2b9af3) Copy Link
Label - Filled (Blue) accent color var(--rh-color-blue-400, #0066cc) Copy Link
To modify opacity var(--rh-color-blue-400, #0066cc) Copy Link
To modify opacity var(--rh-color-blue-400, #0066cc) Copy Link
var(--rh-color-blue-500, #004080) Copy Link
To modify opacity var(--rh-color-blue-500, #004080) Copy Link
To modify opacity var(--rh-color-blue-500, #004080) Copy Link
Alert - Info title text var(--rh-color-blue-600, #002952) Copy Link
To modify opacity var(--rh-color-blue-600, #002952) Copy Link
To modify opacity var(--rh-color-blue-600, #002952) Copy Link

Cyan#

Ex. Token name Value Use case
Alert - Default background var(--rh-color-cyan-50, #f2f9f9) Copy Link
To modify opacity var(--rh-color-cyan-50, #f2f9f9) Copy Link
To modify opacity var(--rh-color-cyan-50, #f2f9f9) Copy Link
Label (Cyan) border color var(--rh-color-cyan-100, #a2d9d9) Copy Link
To modify opacity var(--rh-color-cyan-100, #a2d9d9) Copy Link
To modify opacity var(--rh-color-cyan-100, #a2d9d9) Copy Link
Alert - Default accent var(--rh-color-cyan-300, #009596) Copy Link
To modify opacity var(--rh-color-cyan-300, #009596) Copy Link
To modify opacity var(--rh-color-cyan-300, #009596) Copy Link
Alert - Default accent var(--rh-color-cyan-400, #005f60) Copy Link
To modify opacity var(--rh-color-cyan-400, #005f60) Copy Link
To modify opacity var(--rh-color-cyan-400, #005f60) Copy Link
Alert - Default title text var(--rh-color-cyan-500, #003737) Copy Link
To modify opacity var(--rh-color-cyan-500, #003737) Copy Link
To modify opacity var(--rh-color-cyan-500, #003737) Copy Link

Gold#

Ex. Token name Value Use case
Alert - Warning background var(--rh-color-gold-50, #fdf7e7) Copy Link
To modify opacity var(--rh-color-gold-50, #fdf7e7) Copy Link
To modify opacity var(--rh-color-gold-50, #fdf7e7) Copy Link
Alert - Warning accent var(--rh-color-gold-400, #f0ab00) Copy Link
To modify opacity var(--rh-color-gold-400, #f0ab00) Copy Link
To modify opacity var(--rh-color-gold-400, #f0ab00) Copy Link
Alert - Warning title text var(--rh-color-gold-600, #795600) Copy Link
To modify opacity var(--rh-color-gold-600, #795600) Copy Link
To modify opacity var(--rh-color-gold-600, #795600) Copy Link

Gray#

Ex. Token name Value Use case
Secondary surface (light theme) var(--rh-color-gray-10, #E0E0E0) Copy Link
To modify opacity var(--rh-color-gray-10, #E0E0E0) Copy Link
To modify opacity var(--rh-color-gray-10, #E0E0E0) Copy Link
Subtle borders (light theme) var(--rh-color-gray-20, #C7C7C7) Copy Link
To modify opacity var(--rh-color-gray-20, #C7C7C7) Copy Link
To modify opacity var(--rh-color-gray-20, #C7C7C7) Copy Link
Subtle icon (hover state) var(--rh-color-gray-30, #A3A3A3) Copy Link
To modify opacity var(--rh-color-gray-30, #A3A3A3) Copy Link
To modify opacity var(--rh-color-gray-30, #A3A3A3) Copy Link
Subtle icon var(--rh-color-gray-40, #707070) Copy Link
To modify opacity var(--rh-color-gray-40, #707070) Copy Link
To modify opacity var(--rh-color-gray-40, #707070) Copy Link
Secondary text (light theme) var(--rh-color-gray-50, #4D4D4D) Copy Link
To modify opacity var(--rh-color-gray-50, #4D4D4D) Copy Link
To modify opacity var(--rh-color-gray-50, #4D4D4D) Copy Link
Tertiary surface (dark theme) var(--rh-color-gray-60, #383838) Copy Link
To modify opacity var(--rh-color-gray-60, #383838) Copy Link
To modify opacity var(--rh-color-gray-60, #383838) Copy Link
var(--rh-color-gray-70, #292929) Copy Link
To modify opacity var(--rh-color-gray-70, #292929) Copy Link
To modify opacity var(--rh-color-gray-70, #292929) Copy Link
Secondary surface (dark theme) var(--rh-color-gray-80, #1F1F1F) Copy Link
To modify opacity var(--rh-color-gray-80, #1F1F1F) Copy Link
To modify opacity var(--rh-color-gray-80, #1F1F1F) Copy Link
Primary surface (dark theme) or primary text (light theme) var(--rh-color-gray-90, #151515) Copy Link
To modify opacity var(--rh-color-gray-90, #151515) Copy Link
To modify opacity var(--rh-color-gray-90, #151515) Copy Link
Tertiary surface (light theme) var(--rh-color-gray-05, #F2F2F2) Copy Link

Green#

Ex. Token name Value Use case
alert - success background var(--rh-color-green-50, #f3faf2) Copy Link
To modify opacity var(--rh-color-green-50, #f3faf2) Copy Link
To modify opacity var(--rh-color-green-50, #f3faf2) Copy Link
Label - Filled (Green) border color var(--rh-color-green-100, #bde5b8) Copy Link
To modify opacity var(--rh-color-green-100, #bde5b8) Copy Link
To modify opacity var(--rh-color-green-100, #bde5b8) Copy Link
Alert - Success accent var(--rh-color-green-500, #3e8635) Copy Link
To modify opacity var(--rh-color-green-500, #3e8635) Copy Link
To modify opacity var(--rh-color-green-500, #3e8635) Copy Link
Alert - Success title text var(--rh-color-green-600, #1e4f18) Copy Link
To modify opacity var(--rh-color-green-600, #1e4f18) Copy Link
To modify opacity var(--rh-color-green-600, #1e4f18) Copy Link

Orange#

Ex. Token name Value Use case
Label - Filled (Orange) background color var(--rh-color-orange-50, #fff6ec) Copy Link
To modify opacity var(--rh-color-orange-50, #fff6ec) Copy Link
To modify opacity var(--rh-color-orange-50, #fff6ec) Copy Link
Label - Filled (Orange) border color var(--rh-color-orange-100, #f4b678) Copy Link
To modify opacity var(--rh-color-orange-100, #f4b678) Copy Link
To modify opacity var(--rh-color-orange-100, #f4b678) Copy Link
Label - Filled (Orange) accent color var(--rh-color-orange-300, #ec7a08) Copy Link
To modify opacity var(--rh-color-orange-300, #ec7a08) Copy Link
To modify opacity var(--rh-color-orange-300, #ec7a08) Copy Link
Label - Filled (Orange) accent color var(--rh-color-orange-500, #8f4700) Copy Link
To modify opacity var(--rh-color-orange-500, #8f4700) Copy Link
To modify opacity var(--rh-color-orange-500, #8f4700) Copy Link
Label - Filled (Orange) text color var(--rh-color-orange-700, #3b1f00) Copy Link
To modify opacity var(--rh-color-orange-700, #3b1f00) Copy Link
To modify opacity var(--rh-color-orange-700, #3b1f00) Copy Link

Purple#

Ex. Token name Value Use case
Label - Filled (Purple) background color var(--rh-color-purple-50, #f2f0fc) Copy Link
To modify opacity var(--rh-color-purple-50, #f2f0fc) Copy Link
To modify opacity var(--rh-color-purple-50, #f2f0fc) Copy Link
var(--rh-color-purple-100, #cbc1ff) Copy Link
To modify opacity var(--rh-color-purple-100, #cbc1ff) Copy Link
To modify opacity var(--rh-color-purple-100, #cbc1ff) Copy Link
var(--rh-color-purple-300, #a18fff) Copy Link
To modify opacity var(--rh-color-purple-300, #a18fff) Copy Link
To modify opacity var(--rh-color-purple-300, #a18fff) Copy Link
var(--rh-color-purple-500, #6753ac) Copy Link
To modify opacity var(--rh-color-purple-500, #6753ac) Copy Link
To modify opacity var(--rh-color-purple-500, #6753ac) Copy Link
var(--rh-color-purple-700, #1f0066) Copy Link
To modify opacity var(--rh-color-purple-700, #1f0066) Copy Link
To modify opacity var(--rh-color-purple-700, #1f0066) Copy Link

Red#

Ex. Token name Value Use case
Alert - Critical background var(--rh-color-red-50, #faeae8) Copy Link
To modify opacity var(--rh-color-red-50, #faeae8) Copy Link
To modify opacity var(--rh-color-red-50, #faeae8) Copy Link
Lightest red var(--rh-color-red-100, #fddbdb) Copy Link
To modify opacity var(--rh-color-red-100, #fddbdb) Copy Link
To modify opacity var(--rh-color-red-100, #fddbdb) Copy Link
Lighter red var(--rh-color-red-200, #fab6b6) Copy Link
To modify opacity var(--rh-color-red-200, #fab6b6) Copy Link
To modify opacity var(--rh-color-red-200, #fab6b6) Copy Link
Light red var(--rh-color-red-300, #f56d6d) Copy Link
To modify opacity var(--rh-color-red-300, #f56d6d) Copy Link
To modify opacity var(--rh-color-red-300, #f56d6d) Copy Link
Brand red (dark theme) var(--rh-color-red-400, #ff442b) Copy Link
To modify opacity var(--rh-color-red-400, #ff442b) Copy Link
To modify opacity var(--rh-color-red-400, #ff442b) Copy Link
Brand red (light theme) var(--rh-color-red-500, #ee0000) Copy Link
To modify opacity var(--rh-color-red-500, #ee0000) Copy Link
To modify opacity var(--rh-color-red-500, #ee0000) Copy Link
Dark red or brand red hover var(--rh-color-red-600, #be0000) Copy Link
To modify opacity var(--rh-color-red-600, #be0000) Copy Link
To modify opacity var(--rh-color-red-600, #be0000) Copy Link
Darker red var(--rh-color-red-700, #8f0000) Copy Link
To modify opacity var(--rh-color-red-700, #8f0000) Copy Link
To modify opacity var(--rh-color-red-700, #8f0000) Copy Link
Darkest red var(--rh-color-red-800, #5f0000) Copy Link
To modify opacity var(--rh-color-red-800, #5f0000) Copy Link
To modify opacity var(--rh-color-red-800, #5f0000) Copy Link

Interactive#

Blue#

Ex. Token name Value Use case
Inline link hover (dark theme) var(--rh-color-interactive-blue-lightest, #bee1f4) Copy Link
Inline link (dark theme) var(--rh-color-interactive-blue-lighter, #73bcf7) Copy Link
Inline link (light theme) var(--rh-color-interactive-blue-darker, #0066cc) Copy Link
Inline link hover (light theme) var(--rh-color-interactive-blue-darkest, #004080) Copy Link

Purple#

Ex. Token name Value Use case
Inline link visited hover (dark theme) var(--rh-color-interactive-purple-lightest, #cbc1ff) Copy Link
Inline link visited (dark theme) var(--rh-color-interactive-purple-lighter, #a18fff) Copy Link
Inline link visited (light theme) var(--rh-color-interactive-purple-darker, #6753ac) Copy Link
Inline link visited hover (light theme) var(--rh-color-interactive-purple-darkest, #1f0066) Copy Link

Surface#

Ex. Token name Value Use case
Primary surface (light theme) var(--rh-color-surface-lightest, #ffffff) Copy Link
Tertiary surface (light theme) var(--rh-color-surface-lighter, #f2f2f2) Copy Link
Secondary surface (light theme) var(--rh-color-surface-light, #e0e0e0) Copy Link
Tertiary surface (dark theme) var(--rh-color-surface-dark, #383838) Copy Link
Alternative tertiary surface (not available for use with context provider) var(--rh-color-surface-dark-alt, #292929) Copy Link
Secondary surface (dark theme) var(--rh-color-surface-darker, #1f1f1f) Copy Link
Primary surface (dark theme) var(--rh-color-surface-darkest, #151515) Copy Link
© 2021-2023 Red Hat, Inc. Deploys by Netlify