Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Global color tokens

AccentBrandGreenOrangeCanvasBlueGrayPurpleRed orangeRedTealYellowInteractiveStatusSurfaceAccentBrandGreenOrangeCanvasBlueGrayPurpleRed orangeRedTealYellowInteractiveStatusSurface
Ex. Token name Value Use case Actions
--rh-color-white #ffffff

Lightest surface (light theme) or primary text (dark theme)

Full CSS Variable Permalink to this token
--rh-color-black #000000

Brand black (avoid using)

Full CSS Variable Permalink to this token
--rh-color-white-hsl 0 0% 100%
Full CSS Variable Permalink to this token
--rh-color-white-rgb 255 255 255
Full CSS Variable Permalink to this token
--rh-color-black-hsl 0 0% 0%
Full CSS Variable Permalink to this token
--rh-color-black-rgb 0 0 0
Full CSS Variable Permalink to this token

Accent

Theme Tokens

--rh-color-accent-base --rh-color-accent-brand --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 Actions
--rh-color-accent-base light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9))

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.

Full CSS Variable Permalink to this token
--rh-color-accent-base-on-light #0066cc

Inline link (light theme)

Full CSS Variable Permalink to this token
--rh-color-accent-base-on-dark #92c5f9

Inline link (dark theme)

Full CSS Variable Permalink to this token

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 Actions
--rh-color-accent-brand light-dark(var(--rh-color-accent-brand-on-light, #ee0000), var(--rh-color-accent-brand-on-dark, #ee0000))

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.

Full CSS Variable Permalink to this token
--rh-color-accent-brand-on-light #ee0000

Brand red (light theme)

Full CSS Variable Permalink to this token
--rh-color-accent-brand-on-dark #ee0000

Brand red (dark theme)

Full CSS Variable Permalink to this token

Brand

Theme Tokens

--rh-color-brand-red --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 Actions
--rh-color-brand-red light-dark(var(--rh-color-brand-red-on-light, #ee0000), var(--rh-color-brand-red-on-dark, #ee0000))

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.

Full CSS Variable Permalink to this token
--rh-color-brand-red-on-light #ee0000

Brand red on light background

Full CSS Variable Permalink to this token
--rh-color-brand-red-on-dark #ee0000

Brand red on dark background

Full CSS Variable Permalink to this token
--rh-color-brand-red-lightest #fbc5c5

Lightest brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-lighter #f9a8a8

Lighter brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-light #f56e6e

Light brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-dark #a60000

Dark brand red/Brand red hover

Full CSS Variable Permalink to this token
--rh-color-brand-red-darker #5f0000

Darker brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-darkest #3f0000

Darkest brand red

Full CSS Variable Permalink to this token

Green

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

Alert - success background

Full CSS Variable Permalink to this token
--rh-color-green-20 #d1f1bb

Label - Filled (Green) border color

Full CSS Variable Permalink to this token
--rh-color-green-30 #afdc8f
Full CSS Variable Permalink to this token
--rh-color-green-40 #87bb62
Full CSS Variable Permalink to this token
--rh-color-green-50 #63993d
Full CSS Variable Permalink to this token
--rh-color-green-60 #3d7317

Alert - Success accent

Full CSS Variable Permalink to this token
--rh-color-green-70 #204d00

Alert - Success title text

Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-green-10-hsl 95.00000000000003 60.00000000000004% 92.15686274509804%

Use color transforms instead e.g. hsla(from var(--rh-color-green-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-10-rgb 233 247 223

Use color transforms instead e.g. rgba(from var(--rh-color-green-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-20-hsl 95.55555555555556 65.85365853658536% 83.92156862745097%

Use color transforms instead e.g. hsla(from var(--rh-color-green-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-20-rgb 209 241 187

Use color transforms instead e.g. rgba(from var(--rh-color-green-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-30-hsl 95.06493506493506 52.380952380952394% 71.17647058823529%

Use color transforms instead e.g. hsla(from var(--rh-color-green-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-30-rgb 175 220 143

Use color transforms instead e.g. rgba(from var(--rh-color-green-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-40-hsl 95.05617977528091 39.55555555555555% 55.88235294117647%

Use color transforms instead e.g. hsla(from var(--rh-color-green-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-40-rgb 135 187 98

Use color transforms instead e.g. rgba(from var(--rh-color-green-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-50-hsl 95.21739130434783 42.99065420560747% 41.96078431372549%

Use color transforms instead e.g. hsla(from var(--rh-color-green-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-50-rgb 99 153 61

Use color transforms instead e.g. rgba(from var(--rh-color-green-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-60-hsl 95.21739130434783 66.66666666666667% 27.058823529411764%

Use color transforms instead e.g. hsla(from var(--rh-color-green-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-60-rgb 61 115 23

Use color transforms instead e.g. rgba(from var(--rh-color-green-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-70-hsl 95.06493506493506 100% 15.098039215686274%

Use color transforms instead e.g. hsla(from var(--rh-color-green-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-green-70-rgb 32 77 0

Use color transforms instead e.g. rgba(from var(--rh-color-green-70) r g b / 10%)

Full CSS Variable Permalink to this token

Orange

Ex. Token name Value Use case Actions
--rh-color-orange-10 #ffe8cc

Label - Filled (Orange) background color

Full CSS Variable Permalink to this token
--rh-color-orange-20 #fccb8f
Full CSS Variable Permalink to this token
--rh-color-orange-30 #f8ae54

Label - Filled (Orange) border color

Full CSS Variable Permalink to this token
--rh-color-orange-40 #f5921b

Label - Filled (Orange) accent color

Full CSS Variable Permalink to this token
--rh-color-orange-50 #ca6c0f

Label - Filled (Orange) accent color

Full CSS Variable Permalink to this token
--rh-color-orange-60 #9e4a06
Full CSS Variable Permalink to this token
--rh-color-orange-70 #732e00

Label - Filled (Orange) text color

Full CSS Variable Permalink to this token
--rh-color-orange-80 #4d1f00
Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-orange-10-hsl 32.941176470588225 100% 90%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-10-rgb 255 232 204

Use color transforms instead e.g. rgba(from var(--rh-color-orange-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-20-hsl 33.02752293577981 94.78260869565219% 77.45098039215686%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-20-rgb 252 203 143

Use color transforms instead e.g. rgba(from var(--rh-color-orange-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-30-hsl 32.926829268292686 92.13483146067415% 65.09803921568627%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-30-rgb 248 174 84

Use color transforms instead e.g. rgba(from var(--rh-color-orange-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-40-hsl 32.752293577981646 91.5966386554622% 53.333333333333336%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-40-rgb 245 146 27

Use color transforms instead e.g. rgba(from var(--rh-color-orange-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-50-hsl 29.83957219251337 86.17511520737327% 42.549019607843135%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-50-rgb 202 108 15

Use color transforms instead e.g. rgba(from var(--rh-color-orange-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-60-hsl 26.842105263157904 92.68292682926828% 32.15686274509804%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-60-rgb 158 74 6

Use color transforms instead e.g. rgba(from var(--rh-color-orange-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-70-hsl 24 100% 22.54901960784314%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-70-rgb 115 46 0

Use color transforms instead e.g. rgba(from var(--rh-color-orange-70) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-80-hsl 24.155844155844157 100% 15.098039215686274%

Use color transforms instead e.g. hsla(from var(--rh-color-orange-80) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-orange-80-rgb 77 31 0

Use color transforms instead e.g. rgba(from var(--rh-color-orange-80) r g b / 10%)

Full CSS Variable Permalink to this token

Canvas

Ex. Token name Value Use case Actions
--rh-color-canvas-white #ffffff

Primary canvas (light theme)

Full CSS Variable Permalink to this token
--rh-color-canvas-black #151515

Primary canvas (dark theme)

Full CSS Variable Permalink to this token
--rh-color-canvas-white-hsl 0 0% 100%
Full CSS Variable Permalink to this token
--rh-color-canvas-white-rgb 255 255 255
Full CSS Variable Permalink to this token
--rh-color-canvas-black-hsl 0 0% 0%
Full CSS Variable Permalink to this token
--rh-color-canvas-black-rgb 0 0 0
Full CSS Variable Permalink to this token

Blue

Ex. Token name Value Use case Actions
--rh-color-blue-10 #e0f0ff

Alert - Info background

Full CSS Variable Permalink to this token
--rh-color-blue-20 #b9dafc

Label - Filled (Blue) border color

Full CSS Variable Permalink to this token
--rh-color-blue-30 #92c5f9

Inline link (dark theme)

Full CSS Variable Permalink to this token
--rh-color-blue-40 #4394e5

Alert - Info accent

Full CSS Variable Permalink to this token
--rh-color-blue-50 #0066cc

Label - Filled (Blue) accent color

Full CSS Variable Permalink to this token
--rh-color-blue-60 #004d99

Inline link hover (light theme)

Full CSS Variable Permalink to this token
--rh-color-blue-70 #003366

Alert - Info title text

Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-blue-10-hsl 209.03225806451616 100% 93.92156862745098%

Use color transforms instead e.g. hsla(from var(--rh-color-blue-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-10-rgb 224 240 255

Use color transforms instead e.g. rgba(from var(--rh-color-blue-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-20-hsl 210.44776119402988 91.78082191780825% 85.68627450980392%

Use color transforms instead e.g. hsla(from var(--rh-color-blue-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-20-rgb 185 218 252

Use color transforms instead e.g. rgba(from var(--rh-color-blue-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-30-hsl 210.29126213592232 89.56521739130436% 77.45098039215685%

Use color transforms instead e.g. hsla(from var(--rh-color-blue-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-30-rgb 146 197 249

Use color transforms instead e.g. rgba(from var(--rh-color-blue-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-40-hsl 210 75.70093457943923% 58.03921568627452%

Use color transforms instead e.g. hsla(from var(--rh-color-blue-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-40-rgb 67 148 229

Use color transforms instead e.g. rgba(from var(--rh-color-blue-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-50-hsl 210 100% 40%

Use color transforms instead e.g. hsla(from var(--rh-color-blue-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-50-rgb 0 102 204

Use color transforms instead e.g. rgba(from var(--rh-color-blue-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-60-hsl 209.80392156862746 100% 30%

Use color transforms instead e.g. hsla(from var(--rh-color-blue-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-60-rgb 0 77 153

Use color transforms instead e.g. rgba(from var(--rh-color-blue-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-70-hsl 210 100% 20%

Use color transforms instead e.g. hsla(from var(--rh-color-blue-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-blue-70-rgb 0 51 102

Use color transforms instead e.g. rgba(from var(--rh-color-blue-70) r g b / 10%)

Full CSS Variable Permalink to this token

Gray

Ex. Token name Value Use case Actions
--rh-color-gray-10 #f2f2f2

Tertiary surface (light theme)

Full CSS Variable Permalink to this token
--rh-color-gray-20 #e0e0e0

Secondary surface (light theme)

Full CSS Variable Permalink to this token
--rh-color-gray-30 #c7c7c7

Subtle borders (light theme)

Full CSS Variable Permalink to this token
--rh-color-gray-40 #a3a3a3

Subtle icon (hover state)

Full CSS Variable Permalink to this token
--rh-color-gray-50 #707070

Subtle icon

Full CSS Variable Permalink to this token
--rh-color-gray-60 #4d4d4d

Secondary text (light theme)

Full CSS Variable Permalink to this token
--rh-color-gray-70 #383838

Tertiary surface (dark theme)

Full CSS Variable Permalink to this token
--rh-color-gray-80 #292929

Alternative tertiary surface (not available for use with context provider)

Full CSS Variable Permalink to this token
--rh-color-gray-90 #1f1f1f

Secondary surface (dark theme)

Full CSS Variable Permalink to this token
--rh-color-gray-95 #151515

Primary surface (dark theme) or primary text (light theme)

Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-gray-10-hsl 0 0% 94.90196078431372%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-10-rgb 242 242 242

Use color transforms instead e.g. rgba(from var(--rh-color-gray-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-20-hsl 0 0% 87.84313725490196%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-20-rgb 224 224 224

Use color transforms instead e.g. rgba(from var(--rh-color-gray-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-30-hsl 0 0% 78.03921568627452%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-30-rgb 199 199 199

Use color transforms instead e.g. rgba(from var(--rh-color-gray-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-40-hsl 0 0% 63.921568627450974%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-40-rgb 163 163 163

Use color transforms instead e.g. rgba(from var(--rh-color-gray-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-50-hsl 0 0% 43.92156862745098%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-50-rgb 112 112 112

Use color transforms instead e.g. rgba(from var(--rh-color-gray-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-60-hsl 0 0% 30.19607843137255%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-60-rgb 77 77 77

Use color transforms instead e.g. rgba(from var(--rh-color-gray-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-70-hsl 0 0% 21.96078431372549%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-70-rgb 56 56 56

Use color transforms instead e.g. rgba(from var(--rh-color-gray-70) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-80-hsl 0 0% 16.07843137254902%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-80) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-80-rgb 41 41 41

Use color transforms instead e.g. rgba(from var(--rh-color-gray-80) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-90-hsl 0 0% 12.156862745098039%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-90) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-90-rgb 31 31 31

Use color transforms instead e.g. rgba(from var(--rh-color-gray-90) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-95-hsl 0 0% 8.235294117647058%

Use color transforms instead e.g. hsla(from var(--rh-color-gray-95) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-gray-95-rgb 21 21 21

Use color transforms instead e.g. rgba(from var(--rh-color-gray-95) r g b / 10%)

Full CSS Variable Permalink to this token

Purple

Ex. Token name Value Use case Actions
--rh-color-purple-10 #ece6ff

Label - Filled (Purple) background color

Full CSS Variable Permalink to this token
--rh-color-purple-20 #d0c5f4

Inline link visited hover (dark theme)

Full CSS Variable Permalink to this token
--rh-color-purple-30 #b6a6e9
Full CSS Variable Permalink to this token
--rh-color-purple-40 #876fd4

Inline link visited (dark theme)

Full CSS Variable Permalink to this token
--rh-color-purple-50 #5e40be
Full CSS Variable Permalink to this token
--rh-color-purple-60 #3d2785

Inline link visited (light theme)

Full CSS Variable Permalink to this token
--rh-color-purple-70 #21134d

Inline link visited hover (light theme)

Full CSS Variable Permalink to this token
--rh-color-purple-80 #1b0d33
Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-purple-10-hsl 254.4 100% 95.09803921568627%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-10-rgb 236 230 255

Use color transforms instead e.g. rgba(from var(--rh-color-purple-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-20-hsl 254.0425531914893 68.11594202898556% 86.47058823529412%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-20-rgb 208 197 244

Use color transforms instead e.g. rgba(from var(--rh-color-purple-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-30-hsl 254.32835820895522 60.36036036036033% 78.23529411764706%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-30-rgb 182 166 233

Use color transforms instead e.g. rgba(from var(--rh-color-purple-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-40-hsl 254.25742574257427 54.010695187165794% 63.33333333333333%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-40-rgb 135 111 212

Use color transforms instead e.g. rgba(from var(--rh-color-purple-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-50-hsl 254.2857142857143 49.60629921259843% 49.80392156862745%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-50-rgb 94 64 190

Use color transforms instead e.g. rgba(from var(--rh-color-purple-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-60-hsl 254.0425531914894 54.65116279069767% 33.72549019607843%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-60-rgb 61 39 133

Use color transforms instead e.g. rgba(from var(--rh-color-purple-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-70-hsl 254.48275862068965 60.416666666666664% 18.823529411764707%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-70-rgb 33 19 77

Use color transforms instead e.g. rgba(from var(--rh-color-purple-70) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-80-hsl 262.10526315789474 59.375000000000014% 12.549019607843137%

Use color transforms instead e.g. hsla(from var(--rh-color-purple-80) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-purple-80-rgb 27 13 51

Use color transforms instead e.g. rgba(from var(--rh-color-purple-80) r g b / 10%)

Full CSS Variable Permalink to this token

Red orange

Ex. Token name Value Use case Actions
--rh-color-red-orange-10 #ffe3d9
Full CSS Variable Permalink to this token
--rh-color-red-orange-20 #fbbea8
Full CSS Variable Permalink to this token
--rh-color-red-orange-30 #f89b78
Full CSS Variable Permalink to this token
--rh-color-red-orange-40 #f4784a
Full CSS Variable Permalink to this token
--rh-color-red-orange-50 #f0561d
Full CSS Variable Permalink to this token
--rh-color-red-orange-60 #b1380b
Full CSS Variable Permalink to this token
--rh-color-red-orange-70 #731f00
Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-red-orange-10-hsl 15.789473684210513 100% 92.54901960784314%

Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-10-rgb 255 227 217

Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-20-hsl 15.903614457831333 91.20879120879121% 82.15686274509804%

Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-20-rgb 251 190 168

Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-30-hsl 16.406249999999996 90.14084507042254% 72.15686274509804%

Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-30-rgb 248 155 120

Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-40-hsl 16.235294117647054 88.54166666666671% 62.35294117647059%

Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-40-rgb 244 120 74

Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-50-hsl 16.208530805687207 87.55186721991701% 52.74509803921569%

Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-50-rgb 240 86 29

Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-60-hsl 16.265060240963855 88.29787234042554% 36.86274509803921%

Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-60-rgb 177 56 11

Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-70-hsl 16.17391304347826 100% 22.54901960784314%

Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-orange-70-rgb 115 31 0

Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-70) r g b / 10%)

Full CSS Variable Permalink to this token

Red

Ex. Token name Value Use case Actions
--rh-color-red-10 #fce3e3
Full CSS Variable Permalink to this token
--rh-color-red-20 #fbc5c5

Lightest brand red

Full CSS Variable Permalink to this token
--rh-color-red-30 #f9a8a8

Lighter brand red

Full CSS Variable Permalink to this token
--rh-color-red-40 #f56e6e

Light brand red

Full CSS Variable Permalink to this token
--rh-color-red-50 #ee0000

Brand red (light and dark theme)

Full CSS Variable Permalink to this token
--rh-color-red-60 #a60000

Dark brand red

Full CSS Variable Permalink to this token
--rh-color-red-70 #5f0000

Darker brand red

Full CSS Variable Permalink to this token
--rh-color-red-80 #3f0000

Darkest brand red

Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-red-10-hsl 0 80.64516129032265% 93.92156862745098%

Use color transforms instead e.g. hsla(from var(--rh-color-red-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-10-rgb 252 227 227

Use color transforms instead e.g. rgba(from var(--rh-color-red-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-20-hsl 0 87.09677419354838% 87.84313725490196%

Use color transforms instead e.g. hsla(from var(--rh-color-red-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-20-rgb 251 197 197

Use color transforms instead e.g. rgba(from var(--rh-color-red-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-30-hsl 0 87.0967741935484% 81.76470588235294%

Use color transforms instead e.g. hsla(from var(--rh-color-red-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-30-rgb 249 168 168

Use color transforms instead e.g. rgba(from var(--rh-color-red-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-40-hsl 0 87.09677419354841% 69.6078431372549%

Use color transforms instead e.g. hsla(from var(--rh-color-red-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-40-rgb 245 110 110

Use color transforms instead e.g. rgba(from var(--rh-color-red-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-50-hsl 0 100% 46.666666666666664%

Use color transforms instead e.g. hsla(from var(--rh-color-red-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-50-rgb 238 0 0

Use color transforms instead e.g. rgba(from var(--rh-color-red-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-60-hsl 0 100% 32.549019607843135%

Use color transforms instead e.g. hsla(from var(--rh-color-red-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-60-rgb 166 0 0

Use color transforms instead e.g. rgba(from var(--rh-color-red-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-70-hsl 0 100% 18.627450980392158%

Use color transforms instead e.g. hsla(from var(--rh-color-red-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-70-rgb 95 0 0

Use color transforms instead e.g. rgba(from var(--rh-color-red-70) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-80-hsl 0 100% 12.352941176470589%

Use color transforms instead e.g. hsla(from var(--rh-color-red-80) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-red-80-rgb 63 0 0

Use color transforms instead e.g. rgba(from var(--rh-color-red-80) r g b / 10%)

Full CSS Variable Permalink to this token

Teal

Ex. Token name Value Use case Actions
--rh-color-teal-10 #daf2f2

Alert - Default background

Full CSS Variable Permalink to this token
--rh-color-teal-20 #b9e5e5
Full CSS Variable Permalink to this token
--rh-color-teal-30 #9ad8d8

Label (Cyan) border color

Full CSS Variable Permalink to this token
--rh-color-teal-40 #63bdbd
Full CSS Variable Permalink to this token
--rh-color-teal-50 #37a3a3

Alert - Default accent

Full CSS Variable Permalink to this token
--rh-color-teal-60 #147878
Full CSS Variable Permalink to this token
--rh-color-teal-70 #004d4d

Alert - Default title text

Full CSS Variable Permalink to this token
--rh-color-teal-80 #003333
Full CSS Variable Permalink to this token
Ex. Token name Value Deprecation reason Actions
--rh-color-teal-10-hsl 180 47.99999999999998% 90.19607843137254%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-10) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-10-rgb 218 242 242

Use color transforms instead e.g. rgba(from var(--rh-color-teal-10) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-20-hsl 180 45.833333333333336% 81.17647058823529%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-20) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-20-rgb 185 229 229

Use color transforms instead e.g. rgba(from var(--rh-color-teal-20) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-30-hsl 180 44.28571428571429% 72.54901960784314%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-30) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-30-rgb 154 216 216

Use color transforms instead e.g. rgba(from var(--rh-color-teal-30) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-40-hsl 180 40.54054054054054% 56.470588235294116%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-40) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-40-rgb 99 189 189

Use color transforms instead e.g. rgba(from var(--rh-color-teal-40) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-50-hsl 180 49.54128440366972% 42.745098039215684%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-50) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-50-rgb 55 163 163

Use color transforms instead e.g. rgba(from var(--rh-color-teal-50) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-60-hsl 180 71.42857142857142% 27.450980392156865%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-60) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-60-rgb 20 120 120

Use color transforms instead e.g. rgba(from var(--rh-color-teal-60) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-70-hsl 180 100% 15.098039215686274%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-70) h s l / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-70-rgb 0 77 77

Use color transforms instead e.g. rgba(from var(--rh-color-teal-70) r g b / 10%)

Full CSS Variable Permalink to this token
--rh-color-teal-80-hsl 180 100% 10%

Use color transforms instead e.g. hsla(from var(--rh-color-teal-80) h s l / 10%)

Full CSS Variable Permalink to this token