Global color tokens

  1. Accent
  2. Brand
  3. Green
  4. Orange
  5. Canvas
  6. Blue
  7. Gray
  8. Purple
  9. Red orange
  10. Red
  11. Teal
  12. Yellow
  13. Interactive
  14. Status
  15. Surface
  1. Accent
  2. Brand
  3. Green
  4. Orange
  5. Canvas
  6. Blue
  7. Gray
  8. Purple
  9. Red orange
  10. Red
  11. Teal
  12. Yellow
  13. Interactive
  14. Status
  15. Surface
Ex. Token name Value Use case
--rh-color-white #ffffff

Lightest surface (light theme) or primary text (dark theme)
--rh-color-black #000000

Brand black (avoid using)

Accent

Theme Tokens

--rh-color-accent-base --rh-color-accent-brand

Base

Responsive accent-base color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-accent-base-on-light on a themable container with a light color palette and --rh-color-accent-base-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-accent-base-on-light #0066cc

Inline link (light theme)
--rh-color-accent-base-on-dark #92c5f9

Inline link (dark theme)

Brand

Responsive accent-brand color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-accent-brand-on-light on a themable container with a light color palette and --rh-color-accent-brand-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-accent-brand-on-light #ee0000

Brand red (light theme)
--rh-color-accent-brand-on-dark #ee0000

Brand red (dark theme)

Brand

Theme Tokens

--rh-color-brand-red

Red

Responsive brand-red color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-brand-red-on-light on a themable container with a light color palette and --rh-color-brand-red-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-brand-red-on-light #ee0000

Brand red on light background
--rh-color-brand-red-on-dark #ee0000

Brand red on dark background
--rh-color-brand-red-lightest #fbc5c5

Lightest brand red
--rh-color-brand-red-lighter #f9a8a8

lighter brand red
--rh-color-brand-red-light #f56e6e

Light brand red
--rh-color-brand-red-dark #a60000

Dark brand red/Brand red hover
--rh-color-brand-red-darker #5f0000

Darker brand red
--rh-color-brand-red-darkest #5f0000

Darkest brand red

Green

Ex. Token name Value Use case
--rh-color-green-10 #e9f7df

Alert - success background
Color function variants
Ex. Token name Value Use case
--rh-color-green-10-rgb rgb(233, 247, 223) To modify opacity
--rh-color-green-10-hsl hsl(95.00000000000003 60.00000000000004% 92.15686274509804%) To modify opacity
--rh-color-green-20 #d1f1bb

Label - Filled (Green) border color
Color function variants
Ex. Token name Value Use case
--rh-color-green-20-rgb rgb(209, 241, 187) To modify opacity
--rh-color-green-20-hsl hsl(95.55555555555556 65.85365853658536% 83.92156862745097%) To modify opacity
--rh-color-green-30 #afdc8f
Color function variants
Ex. Token name Value Use case
--rh-color-green-30-rgb rgb(175, 220, 143) To modify opacity
--rh-color-green-30-hsl hsl(95.06493506493506 52.380952380952394% 71.17647058823529%) To modify opacity
--rh-color-green-40 #87bb62
Color function variants
Ex. Token name Value Use case
--rh-color-green-40-rgb rgb(135, 187, 98) To modify opacity
--rh-color-green-40-hsl hsl(95.05617977528091 39.55555555555555% 55.88235294117647%) To modify opacity
--rh-color-green-50 #63993d
Color function variants
Ex. Token name Value Use case
--rh-color-green-50-rgb rgb(99, 153, 61) To modify opacity
--rh-color-green-50-hsl hsl(95.21739130434783 42.99065420560747% 41.96078431372549%) To modify opacity
--rh-color-green-60 #3d7317

Alert - Success accent
Color function variants
Ex. Token name Value Use case
--rh-color-green-60-rgb rgb(61, 115, 23) To modify opacity