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 PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
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
--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 --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 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.
--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 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.
--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 --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 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.
--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 #3f0000

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
--rh-color-green-60-hsl hsl(95.21739130434783 66.66666666666667% 27.058823529411764%) To modify opacity
--rh-color-green-70 #204d00

Alert - Success title text
Color function variants
Ex. Token name Value Use case
--rh-color-green-70-rgb rgb(32, 77, 0) To modify opacity
--rh-color-green-70-hsl hsl(95.06493506493506 100% 15.098039215686274%) To modify opacity

Orange

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

Label - Filled (Orange) background color
Color function variants
Ex. Token name Value Use case
--rh-color-orange-10-rgb rgb(255, 232, 204) To modify opacity
--rh-color-orange-10-hsl hsl(32.941176470588225 100% 90%) To modify opacity
--rh-color-orange-20 #fccb8f
Color function variants
Ex. Token name Value Use case
--rh-color-orange-20-rgb rgb(252, 203, 143) To modify opacity
--rh-color-orange-20-hsl hsl(33.02752293577981 94.78260869565219% 77.45098039215686%) To modify opacity
--rh-color-orange-30 #f8ae54

Label - Filled (Orange) border color
Color function variants
Ex. Token name Value Use case
--rh-color-orange-30-rgb rgb(248, 174, 84) To modify opacity
--rh-color-orange-30-hsl hsl(32.926829268292686 92.13483146067415% 65.09803921568627%) To modify opacity
--rh-color-orange-40 #f5921b

Label - Filled (Orange) accent color
Color function variants
Ex. Token name Value Use case
--rh-color-orange-40-rgb rgb(245, 146, 27) To modify opacity
--rh-color-orange-40-hsl hsl(32.752293577981646 91.5966386554622% 53.333333333333336%) To modify opacity
--rh-color-orange-50 #ca6c0f

Label - Filled (Orange) accent color
Color function variants
Ex. Token name Value Use case
--rh-color-orange-50-rgb rgb(202, 108, 15) To modify opacity
--rh-color-orange-50-hsl hsl(29.83957219251337 86.17511520737327% 42.549019607843135%) To modify opacity
--rh-color-orange-60 #9e4a06
Color function variants
Ex. Token name Value Use case
--rh-color-orange-60-rgb rgb(158, 74, 6) To modify opacity
--rh-color-orange-60-hsl hsl(26.842105263157904 92.68292682926828% 32.15686274509804%) To modify opacity
--rh-color-orange-70 #732e00

Label - Filled (Orange) text color
Color function variants
Ex. Token name Value Use case
--rh-color-orange-70-rgb rgb(115, 46, 0) To modify opacity
--rh-color-orange-70-hsl hsl(24 100% 22.54901960784314%) To modify opacity
--rh-color-orange-80 #4d1f00
Color function variants
Ex. Token name Value Use case
--rh-color-orange-80-rgb rgb(77, 31, 0) To modify opacity
--rh-color-orange-80-hsl hsl(24.155844155844157 100% 15.098039215686274%) To modify opacity

Canvas

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

Primary canvas (light theme)
--rh-color-canvas-black #151515

Primary canvas (dark theme)

Blue

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

Alert - Info background
Color function variants
Ex. Token name Value Use case
--rh-color-blue-10-rgb rgb(224, 240, 255) To modify opacity
--rh-color-blue-10-hsl hsl(209.03225806451616 100% 93.92156862745098%) To modify opacity
--rh-color-blue-20 #b9dafc

Label - Filled (Blue) border color
Color function variants
Ex. Token name Value Use case
--rh-color-blue-20-rgb rgb(185, 218, 252) To modify opacity
--rh-color-blue-20-hsl hsl(210.44776119402988 91.78082191780825% 85.68627450980392%) To modify opacity
--rh-color-blue-30 #92c5f9

Inline link (dark theme)
Color function variants
Ex. Token name Value Use case
--rh-color-blue-30-rgb rgb(146, 197, 249) To modify opacity
--rh-color-blue-30-hsl hsl(210.29126213592232 89.56521739130436% 77.45098039215685%) To modify opacity
--rh-color-blue-40 #4394e5

Alert - Info accent
Color function variants
Ex. Token name Value Use case
--rh-color-blue-40-rgb rgb(67, 148, 229) To modify opacity
--rh-color-blue-40-hsl hsl(210 75.70093457943923% 58.03921568627452%) To modify opacity
--rh-color-blue-50 #0066cc

Label - Filled (Blue) accent color
Color function variants
Ex. Token name Value Use case
--rh-color-blue-50-rgb rgb(0, 102, 204) To modify opacity
--rh-color-blue-50-hsl hsl(210 100% 40%) To modify opacity
--rh-color-blue-60 #004d99

Inline link hover (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-blue-60-rgb rgb(0, 77, 153) To modify opacity
--rh-color-blue-60-hsl hsl(209.80392156862746 100% 30%) To modify opacity
--rh-color-blue-70 #003366

Alert - Info title text
Color function variants
Ex. Token name Value Use case
--rh-color-blue-70-rgb rgb(0, 51, 102) To modify opacity
--rh-color-blue-70-hsl hsl(210 100% 20%) To modify opacity

Gray

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

Tertiary surface (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-10-rgb rgb(242, 242, 242) To modify opacity
--rh-color-gray-10-hsl hsl(0 0% 94.90196078431372%) To modify opacity
--rh-color-gray-20 #e0e0e0

Secondary surface (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-20-rgb rgb(224, 224, 224) To modify opacity
--rh-color-gray-20-hsl hsl(0 0% 87.84313725490196%) To modify opacity
--rh-color-gray-30 #c7c7c7

Subtle borders (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-30-rgb rgb(199, 199, 199) To modify opacity
--rh-color-gray-30-hsl hsl(0 0% 78.03921568627452%) To modify opacity
--rh-color-gray-40 #a3a3a3

Subtle icon (hover state)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-40-rgb rgb(163, 163, 163) To modify opacity
--rh-color-gray-40-hsl hsl(0 0% 63.921568627450974%) To modify opacity
--rh-color-gray-50 #707070

Subtle icon
Color function variants
Ex. Token name Value Use case
--rh-color-gray-50-rgb rgb(112, 112, 112) To modify opacity
--rh-color-gray-50-hsl hsl(0 0% 43.92156862745098%) To modify opacity
--rh-color-gray-60 #4d4d4d

Secondary text (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-60-rgb rgb(77, 77, 77) To modify opacity
--rh-color-gray-60-hsl hsl(0 0% 30.19607843137255%) To modify opacity
--rh-color-gray-70 #383838

Tertiary surface (dark theme)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-70-rgb rgb(56, 56, 56) To modify opacity
--rh-color-gray-70-hsl hsl(0 0% 21.96078431372549%) To modify opacity
--rh-color-gray-80 #292929

Alternative tertiary surface (not available for use with context provider)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-80-rgb rgb(41, 41, 41) To modify opacity
--rh-color-gray-80-hsl hsl(0 0% 16.07843137254902%) To modify opacity
--rh-color-gray-90 #1f1f1f

Secondary surface (dark theme)
Color function variants
Ex. Token name Value Use case
--rh-color-gray-90-rgb rgb(31, 31, 31) To modify opacity
--rh-color-gray-90-hsl hsl(0 0% 12.156862745098039%) To modify opacity
--rh-color-gray-95 #151515

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

Purple

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

Label - Filled (Purple) background color
Color function variants
Ex. Token name Value Use case
--rh-color-purple-10-rgb rgb(236, 230, 255) To modify opacity
--rh-color-purple-10-hsl hsl(254.4 100% 95.09803921568627%) To modify opacity
--rh-color-purple-20 #d0c5f4

Inline link visited hover (dark theme)
Color function variants
Ex. Token name Value Use case
--rh-color-purple-20-rgb rgb(208, 197, 244) To modify opacity
--rh-color-purple-20-hsl hsl(254.0425531914893 68.11594202898556% 86.47058823529412%) To modify opacity
--rh-color-purple-30 #b6a6e9
Color function variants
Ex. Token name Value Use case
--rh-color-purple-30-rgb rgb(182, 166, 233) To modify opacity
--rh-color-purple-30-hsl hsl(254.32835820895522 60.36036036036033% 78.23529411764706%) To modify opacity
--rh-color-purple-40 #876fd4

Inline link visited (dark theme)
Color function variants
Ex. Token name Value Use case
--rh-color-purple-40-rgb rgb(135, 111, 212) To modify opacity
--rh-color-purple-40-hsl hsl(254.25742574257427 54.010695187165794% 63.33333333333333%) To modify opacity
--rh-color-purple-50 #5e40be
Color function variants
Ex. Token name Value Use case
--rh-color-purple-50-rgb rgb(94, 64, 190) To modify opacity
--rh-color-purple-50-hsl hsl(254.2857142857143 49.60629921259843% 49.80392156862745%) To modify opacity
--rh-color-purple-60 #3d2785

Inline link visited (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-purple-60-rgb rgb(61, 39, 133) To modify opacity
--rh-color-purple-60-hsl hsl(254.0425531914894 54.65116279069767% 33.72549019607843%) To modify opacity
--rh-color-purple-70 #21134d

Inline link visited hover (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-purple-70-rgb rgb(33, 19, 77) To modify opacity
--rh-color-purple-70-hsl hsl(254.48275862068965 60.416666666666664% 18.823529411764707%) To modify opacity
--rh-color-purple-80 #1b0d33
Color function variants
Ex. Token name Value Use case
--rh-color-purple-80-rgb rgb(27, 13, 51) To modify opacity
--rh-color-purple-80-hsl hsl(262.10526315789474 59.375000000000014% 12.549019607843137%) To modify opacity

Red orange

Ex. Token name Value Use case
--rh-color-red-orange-10 #ffe3d9
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-10-rgb rgb(255, 227, 217) To modify opacity
--rh-color-red-orange-10-hsl hsl(15.789473684210513 100% 92.54901960784314%) To modify opacity
--rh-color-red-orange-20 #fbbea8
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-20-rgb rgb(251, 190, 168) To modify opacity
--rh-color-red-orange-20-hsl hsl(15.903614457831333 91.20879120879121% 82.15686274509804%) To modify opacity
--rh-color-red-orange-30 #f89b78
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-30-rgb rgb(248, 155, 120) To modify opacity
--rh-color-red-orange-30-hsl hsl(16.406249999999996 90.14084507042254% 72.15686274509804%) To modify opacity
--rh-color-red-orange-40 #f4784a
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-40-rgb rgb(244, 120, 74) To modify opacity
--rh-color-red-orange-40-hsl hsl(16.235294117647054 88.54166666666671% 62.35294117647059%) To modify opacity
--rh-color-red-orange-50 #f0561d
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-50-rgb rgb(240, 86, 29) To modify opacity
--rh-color-red-orange-50-hsl hsl(16.208530805687207 87.55186721991701% 52.74509803921569%) To modify opacity
--rh-color-red-orange-60 #b1380b
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-60-rgb rgb(177, 56, 11) To modify opacity
--rh-color-red-orange-60-hsl hsl(16.265060240963855 88.29787234042554% 36.86274509803921%) To modify opacity
--rh-color-red-orange-70 #731f00
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-70-rgb rgb(115, 31, 0) To modify opacity
--rh-color-red-orange-70-hsl hsl(16.17391304347826 100% 22.54901960784314%) To modify opacity

Red

Ex. Token name Value Use case
--rh-color-red-10 #fce3e3
Color function variants
Ex. Token name Value Use case
--rh-color-red-10-rgb rgb(252, 227, 227) To modify opacity
--rh-color-red-10-hsl hsl(0 80.64516129032265% 93.92156862745098%) To modify opacity
--rh-color-red-20 #fbc5c5

Lightest brand red
Color function variants
Ex. Token name Value Use case
--rh-color-red-20-rgb rgb(251, 197, 197) To modify opacity
--rh-color-red-20-hsl hsl(0 87.09677419354838% 87.84313725490196%) To modify opacity
--rh-color-red-30 #f9a8a8

Lighter brand red
Color function variants
Ex. Token name Value Use case
--rh-color-red-30-rgb rgb(249, 168, 168) To modify opacity
--rh-color-red-30-hsl hsl(0 87.0967741935484% 81.76470588235294%) To modify opacity
--rh-color-red-40 #f56e6e

Light brand red
Color function variants
Ex. Token name Value Use case
--rh-color-red-40-rgb rgb(245, 110, 110) To modify opacity
--rh-color-red-40-hsl hsl(0 87.09677419354841% 69.6078431372549%) To modify opacity
--rh-color-red-50 #ee0000

Brand red (light and dark theme)
Color function variants
Ex. Token name Value Use case
--rh-color-red-50-rgb rgb(238, 0, 0) To modify opacity
--rh-color-red-50-hsl hsl(0 100% 46.666666666666664%) To modify opacity
--rh-color-red-60 #a60000

Dark brand red
Color function variants
Ex. Token name Value Use case
--rh-color-red-60-rgb rgb(166, 0, 0) To modify opacity
--rh-color-red-60-hsl hsl(0 100% 32.549019607843135%) To modify opacity
--rh-color-red-70 #5f0000

Darker brand red
Color function variants
Ex. Token name Value Use case
--rh-color-red-70-rgb rgb(95, 0, 0) To modify opacity
--rh-color-red-70-hsl hsl(0 100% 18.627450980392158%) To modify opacity
--rh-color-red-80 #3f0000

Darkest brand red
Color function variants
Ex. Token name Value Use case
--rh-color-red-80-rgb rgb(63, 0, 0) To modify opacity
--rh-color-red-80-hsl hsl(0 100% 12.352941176470589%) To modify opacity

Teal

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

Alert - Default background
Color function variants
Ex. Token name Value Use case
--rh-color-teal-10-rgb rgb(218, 242, 242) To modify opacity
--rh-color-teal-10-hsl hsl(180 47.99999999999998% 90.19607843137254%) To modify opacity
--rh-color-teal-20 #b9e5e5
Color function variants
Ex. Token name Value Use case
--rh-color-teal-20-rgb rgb(185, 229, 229) To modify opacity
--rh-color-teal-20-hsl hsl(180 45.833333333333336% 81.17647058823529%) To modify opacity
--rh-color-teal-30 #9ad8d8

Label (Cyan) border color
Color function variants
Ex. Token name Value Use case
--rh-color-teal-30-rgb rgb(154, 216, 216) To modify opacity
--rh-color-teal-30-hsl hsl(180 44.28571428571429% 72.54901960784314%) To modify opacity
--rh-color-teal-40 #63bdbd
Color function variants
Ex. Token name Value Use case
--rh-color-teal-40-rgb rgb(99, 189, 189) To modify opacity
--rh-color-teal-40-hsl hsl(180 40.54054054054054% 56.470588235294116%) To modify opacity
--rh-color-teal-50 #37a3a3

Alert - Default accent
Color function variants
Ex. Token name Value Use case
--rh-color-teal-50-rgb rgb(55, 163, 163) To modify opacity
--rh-color-teal-50-hsl hsl(180 49.54128440366972% 42.745098039215684%) To modify opacity
--rh-color-teal-60 #147878
Color function variants
Ex. Token name Value Use case
--rh-color-teal-60-rgb rgb(20, 120, 120) To modify opacity
--rh-color-teal-60-hsl hsl(180 71.42857142857142% 27.450980392156865%) To modify opacity
--rh-color-teal-70 #004d4d

Alert - Default title text
Color function variants
Ex. Token name Value Use case
--rh-color-teal-70-rgb rgb(0, 77, 77) To modify opacity
--rh-color-teal-70-hsl hsl(180 100% 15.098039215686274%) To modify opacity
--rh-color-teal-80 #003333
Color function variants
Ex. Token name Value Use case
--rh-color-teal-80-rgb rgb(0, 51, 51) To modify opacity
--rh-color-teal-80-hsl hsl(180 100% 10%) To modify opacity

Yellow

Ex. Token name Value Use case
--rh-color-yellow-10 #fff4cc

Alert - Warning background
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-10-rgb rgb(255, 244, 204) To modify opacity
--rh-color-yellow-10-hsl hsl(47.058823529411775 100% 90%) To modify opacity
--rh-color-yellow-20 #ffe072
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-20-rgb rgb(255, 224, 114) To modify opacity
--rh-color-yellow-20-hsl hsl(46.80851063829787 100% 72.35294117647058%) To modify opacity
--rh-color-yellow-30 #ffcc17
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-30-rgb rgb(255, 204, 23) To modify opacity
--rh-color-yellow-30-hsl hsl(46.81034482758621 100% 54.509803921568626%) To modify opacity
--rh-color-yellow-40 #dca614

Alert - Warning accent
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-40-rgb rgb(220, 166, 20) To modify opacity
--rh-color-yellow-40-hsl hsl(43.79999999999999 83.33333333333334% 47.05882352941176%) To modify opacity
--rh-color-yellow-50 #b98412
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-50-rgb rgb(185, 132, 18) To modify opacity
--rh-color-yellow-50-hsl hsl(40.95808383233534 82.26600985221675% 39.80392156862745%) To modify opacity
--rh-color-yellow-60 #96640f
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-60-rgb rgb(150, 100, 15) To modify opacity
--rh-color-yellow-60-hsl hsl(37.77777777777777 81.81818181818181% 32.35294117647059%) To modify opacity
--rh-color-yellow-70 #73480b

Alert - Warning title text
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-70-rgb rgb(115, 72, 11) To modify opacity
--rh-color-yellow-70-hsl hsl(35.192307692307686 82.53968253968253% 24.705882352941178%) To modify opacity
--rh-color-yellow-80 #54330b
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-80-rgb rgb(84, 51, 11) To modify opacity
--rh-color-yellow-80-hsl hsl(32.87671232876713 76.84210526315789% 18.627450980392158%) To modify opacity

Interactive

Theme Tokens

--rh-color-interactive-primary-default --rh-color-interactive-primary-hover --rh-color-interactive-primary-active --rh-color-interactive-primary-focus --rh-color-interactive-primary-visited-default --rh-color-interactive-primary-visited-hover --rh-color-interactive-primary-visited-active --rh-color-interactive-primary-visited-focus --rh-color-interactive-secondary-default --rh-color-interactive-secondary-hover --rh-color-interactive-secondary-active --rh-color-interactive-secondary-focus --rh-color-interactive-secondary-visited-default --rh-color-interactive-secondary-visited-hover --rh-color-interactive-secondary-visited-active --rh-color-interactive-secondary-visited-focus --rh-color-interactive-primary-default --rh-color-interactive-primary-hover --rh-color-interactive-primary-active --rh-color-interactive-primary-focus --rh-color-interactive-primary-visited-default --rh-color-interactive-primary-visited-hover --rh-color-interactive-primary-visited-active --rh-color-interactive-primary-visited-focus --rh-color-interactive-secondary-default --rh-color-interactive-secondary-hover --rh-color-interactive-secondary-active --rh-color-interactive-secondary-focus --rh-color-interactive-secondary-visited-default --rh-color-interactive-secondary-visited-hover --rh-color-interactive-secondary-visited-active --rh-color-interactive-secondary-visited-focus

Primary

Default

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-default light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc), var(--rh-color-interactive-primary-default-on-dark, #92c5f9))

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-default-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-default-on-light #0066cc

Primary interactive - default (Light theme)
--rh-color-interactive-primary-default-on-dark #92c5f9

Primary interactive - default (Dark theme)

Hover

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-hover light-dark(var(--rh-color-interactive-primary-hover-on-light, #003366), var(--rh-color-interactive-primary-hover-on-dark, #b9dafc))

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-hover-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-hover-on-light #003366

Primary interactive - hover (Light theme)
--rh-color-interactive-primary-hover-on-dark #b9dafc

Primary interactive - hover (Dark theme)

Active

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-active-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-active light-dark(var(--rh-color-interactive-primary-active-on-light, #003366), var(--rh-color-interactive-primary-active-on-dark, #b9dafc))

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-active-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-active-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-active-on-light #003366

Primary interactive - active (Light theme)
--rh-color-interactive-primary-active-on-dark #b9dafc

Primary interactive - active (Dark theme)

Focus

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-focus light-dark(var(--rh-color-interactive-primary-focus-on-light, #003366), var(--rh-color-interactive-primary-focus-on-dark, #b9dafc))

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-focus-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-focus-on-light #003366

Primary interactive - focus (Light theme)
--rh-color-interactive-primary-focus-on-dark #b9dafc

Primary interactive - focus (Dark theme)

Visited

Default

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-visited-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-default light-dark(var(--rh-color-interactive-primary-visited-default-on-light, #5e40be), var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9))

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-visited-default-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-visited-default-on-light #5e40be

Primary interactive visited - default (Light theme)
--rh-color-interactive-primary-visited-default-on-dark #b6a6e9

Primary interactive visited - default (Dark theme)
Hover

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-hover light-dark(var(--rh-color-interactive-primary-visited-hover-on-light, #21134d), var(--rh-color-interactive-primary-visited-hover-on-dark, #ece6ff))

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-hover-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-visited-hover-on-light #21134d

Primary interactive visited - hover (Light theme)
--rh-color-interactive-primary-visited-hover-on-dark #ece6ff

Primary interactive visited - hover (Dark theme)
Active

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-active-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-active light-dark(var(--rh-color-interactive-primary-visited-active-on-light, #21134d), var(--rh-color-interactive-primary-visited-active-on-dark, #ece6ff))

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-active-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-active-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-visited-active-on-light #21134d

Primary interactive visited - active (Light theme)
--rh-color-interactive-primary-visited-active-on-dark #ece6ff

Primary interactive visited - active (Dark theme)
Focus

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-focus light-dark(var(--rh-color-interactive-primary-visited-focus-on-light, #21134d), var(--rh-color-interactive-primary-visited-focus-on-dark, #ece6ff))

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-focus-on-dark on a themable container with a dark color palette.
--rh-color-interactive-primary-visited-focus-on-light #21134d

Primary interactive visited - focus (Light theme)
--rh-color-interactive-primary-visited-focus-on-dark #ece6ff

Primary interactive visited - focus (Dark theme)

Secondary

Default

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-default light-dark(var(--rh-color-interactive-secondary-default-on-light, #4d4d4d), var(--rh-color-interactive-secondary-default-on-dark, #c7c7c7))

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-default-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-default-on-light #4d4d4d

Secondary interactive - default (Light theme)
--rh-color-interactive-secondary-default-on-dark #c7c7c7

Secondary interactive - default (Dark theme)

Hover

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-hover light-dark(var(--rh-color-interactive-secondary-hover-on-light, #4d4d4d), var(--rh-color-interactive-secondary-hover-on-dark, #c7c7c7))

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-hover-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-hover-on-light #4d4d4d

Secondary interactive - hover (Light theme)
--rh-color-interactive-secondary-hover-on-dark #c7c7c7

Secondary interactive - hover (Dark theme)

Active

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-active-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-active light-dark(var(--rh-color-interactive-secondary-active-on-light, #4d4d4d), var(--rh-color-interactive-secondary-active-on-dark, #c7c7c7))

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-active-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-active-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-active-on-light #4d4d4d

Secondary interactive - active (Light theme)
--rh-color-interactive-secondary-active-on-dark #c7c7c7

Secondary interactive - active (Dark theme)

Focus

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-focus light-dark(var(--rh-color-interactive-secondary-focus-on-light, #4d4d4d), var(--rh-color-interactive-secondary-focus-on-dark, #c7c7c7))

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-focus-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-focus-on-light #4d4d4d

Secondary interactive - focus (Light theme)
--rh-color-interactive-secondary-focus-on-dark #c7c7c7

Secondary interactive - focus (Dark theme)

Visited

Default

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-visited-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-default light-dark(var(--rh-color-interactive-secondary-visited-default-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-default-on-dark, #c7c7c7))

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-visited-default-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-visited-default-on-light #4d4d4d

Secondary interactive visited - default (Light theme)
--rh-color-interactive-secondary-visited-default-on-dark #c7c7c7

Secondary interactive visited - default (Dark theme)
Hover

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-hover light-dark(var(--rh-color-interactive-secondary-visited-hover-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-hover-on-dark, #c7c7c7))

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-hover-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-visited-hover-on-light #4d4d4d

Secondary interactive visited - hover (Light theme)
--rh-color-interactive-secondary-visited-hover-on-dark #c7c7c7

Secondary interactive visited - hover (Dark theme)
Active

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-active-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-active light-dark(var(--rh-color-interactive-secondary-visited-active-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-active-on-dark, #c7c7c7))

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-active-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-active-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-visited-active-on-light #4d4d4d

Secondary interactive visited - active (Light theme)
--rh-color-interactive-secondary-visited-active-on-dark #c7c7c7

Secondary interactive visited - active (Dark theme)
Focus

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-focus light-dark(var(--rh-color-interactive-secondary-visited-focus-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-focus-on-dark, #c7c7c7))

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-focus-on-dark on a themable container with a dark color palette.
--rh-color-interactive-secondary-visited-focus-on-light #4d4d4d

Secondary interactive visited - focus (Light theme)
--rh-color-interactive-secondary-visited-focus-on-dark #c7c7c7

Secondary interactive visited - focus (Dark theme)

Blue

Ex. Token name Value Use case
--rh-color-interactive-blue-lightest #b9dafc

Inline link hover (dark theme)
--rh-color-interactive-blue-lighter #92c5f9

Inline link (dark theme)
--rh-color-interactive-blue-darker #0066cc

Inline link (light theme)
--rh-color-interactive-blue-darkest #003366

Inline link hover (light theme)

Purple

Ex. Token name Value Use case
--rh-color-interactive-purple-lightest #ece6ff

Inline link visited hover (dark theme)
--rh-color-interactive-purple-lighter #b6a6e9

Inline link visited (dark theme)
--rh-color-interactive-purple-darker #5e40be

Inline link visited (light theme)
--rh-color-interactive-purple-darkest #ece6ff

Inline link visited hover (light theme)

Status

Theme Tokens

--rh-color-status-danger --rh-color-status-caution --rh-color-status-warning --rh-color-status-neutral --rh-color-status-note --rh-color-status-info --rh-color-status-success --rh-color-status-danger --rh-color-status-caution --rh-color-status-warning --rh-color-status-neutral --rh-color-status-note --rh-color-status-info --rh-color-status-success

Danger

Represents an action which could have destructive consequences, e.g. deleting a file.

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

Ex. Token name Value Use case
--rh-color-status-danger light-dark(var(--rh-color-status-danger-on-light, #b1380b), var(--rh-color-status-danger-on-dark, #f0561d))

Responsive status-danger color value. Typically read-only – use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-danger-on-light on a themable container with a light color palette and --rh-color-status-danger-on-dark on a themable container with a dark color palette.
--rh-color-status-danger-on-light #b1380b

Danger status color (light theme)
--rh-color-status-danger-on-dark #f0561d

Danger status color (dark theme)

Caution

Represents an action or notice which should immediately draw the attention

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

Ex. Token name Value Use case
--rh-color-status-caution light-dark(var(--rh-color-status-caution-on-light, #ca6c0f), var(--rh-color-status-caution-on-dark, #f5921b))

Responsive status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-caution-on-light on a themable container with a light color palette and --rh-color-status-caution-on-dark on a themable container with a dark color palette.
--rh-color-status-caution-on-light #ca6c0f

Caution status color (light theme)
--rh-color-status-caution-on-dark #f5921b

Caution status color (dark theme)

Warning

Represents an action or notice which elicits a warning of potential danger

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

Ex. Token name Value Use case
--rh-color-status-warning light-dark(var(--rh-color-status-warning-on-light, #dca614), var(--rh-color-status-warning-on-dark, #ffcc17))

Responsive status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-warning-on-light on a themable container with a light color palette and --rh-color-status-warning-on-dark on a themable container with a dark color palette.
--rh-color-status-warning-on-light #dca614

Warning status color (light theme)
--rh-color-status-warning-on-dark #ffcc17

Warning status color (dark theme)

Neutral

Represents an action or notice which has neither positive nor negative connotations, is neither explicitly constructive or explicitly destructive.

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

Ex. Token name Value Use case
--rh-color-status-neutral light-dark(var(--rh-color-status-neutral-on-light, #4d4d4d), var(--rh-color-status-neutral-on-dark, #c7c7c7))

Responsive status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-neutral-on-light on a themable container with a light color palette and --rh-color-status-neutral-on-dark on a themable container with a dark color palette.
--rh-color-status-neutral-on-light #4d4d4d

Neutral accent color (light theme)
--rh-color-status-neutral-on-dark #c7c7c7

Neutral accent color (dark theme)

Note

Represents an action or notice which is informational, or a tip on how best to complete a task.

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

Ex. Token name Value Use case
--rh-color-status-note light-dark(var(--rh-color-status-note-on-light, #5e40be), var(--rh-color-status-note-on-dark, #b6a6e9))

Responsive status-note color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-note-on-light on a themable container with a light color palette and --rh-color-status-note-on-dark on a themable container with a dark color palette.
--rh-color-status-note-on-light #5e40be

Note/tip status color (light theme)
--rh-color-status-note-on-dark #b6a6e9

Note/tip status color (dark theme)

Info

Represents an action or notice which is informational, or a tip on how best to complete a task.

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

Ex. Token name Value Use case
--rh-color-status-info light-dark(var(--rh-color-status-info-on-light, #5e40be), var(--rh-color-status-info-on-dark, #b6a6e9))

Responsive status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-info-on-light on a themable container with a light color palette and --rh-color-status-info-on-dark on a themable container with a dark color palette.
--rh-color-status-info-on-light #5e40be

Info status color (light theme)
--rh-color-status-info-on-dark #b6a6e9

Info status color (dark theme)

Success

Represents a notice of success.

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

Ex. Token name Value Use case
--rh-color-status-success light-dark(var(--rh-color-status-success-on-light, #3d7317), var(--rh-color-status-success-on-dark, #87bb62))

Responsive status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-success-on-light on a themable container with a light color palette and --rh-color-status-success-on-dark on a themable container with a dark color palette.
--rh-color-status-success-on-light #3d7317

Success status color (light theme)
--rh-color-status-success-on-dark #87bb62

Success status color (dark theme)

Surface

Responsive surface color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to the surface color corresponding to the surface' color palette.

Theme Tokens

--rh-color-surface --rh-color-surface-status-danger --rh-color-surface-status-caution --rh-color-surface-status-warning --rh-color-surface-status-default --rh-color-surface-status-neutral --rh-color-surface-status-info --rh-color-surface-status-success --rh-color-surface --rh-color-surface-status-danger --rh-color-surface-status-caution --rh-color-surface-status-warning --rh-color-surface-status-default --rh-color-surface-status-neutral --rh-color-surface-status-info --rh-color-surface-status-success
Ex. Token name Value Use case
--rh-color-surface light-dark(var(--rh-color-surface-lightest, #ffffff), var(--rh-color-surface-lighter, #f2f2f2))

Responsive surface color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to the surface color corresponding to the surface' color palette.
--rh-color-surface-lightest #ffffff

Primary surface (light theme)
--rh-color-surface-lighter #f2f2f2

Tertiary surface (light theme)
--rh-color-surface-light #e0e0e0

Secondary surface (light theme)
--rh-color-surface-dark #383838

Tertiary surface (dark theme)
--rh-color-surface-dark-alt oklch(from(--rh-color-surface-dark) calc(l * 0.82) c h)

DEPRECATED. Theme authors should use --rh-color-surface-dark. Element authors should use oklch(from var(--rh-color-surface-dark) calc(l * 0.82) c h). Alternative tertiary surface (not available for use with context provider)
--rh-color-surface-darker #1f1f1f

Secondary surface (dark theme)
--rh-color-surface-darkest #151515

Primary surface (dark theme)

Status

Danger

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

Ex. Token name Value Use case
--rh-color-surface-status-danger light-dark(var(--rh-color-surface-status-danger-on-light, #ffe3d9), var(--rh-color-surface-status-danger-on-dark, #ffe3d9))

Responsive surface-status-danger color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-danger-on-light on a themable container with a light color palette and --rh-color-surface-status-danger-on-dark on a themable container with a dark color palette.
--rh-color-surface-status-danger-on-light #ffe3d9

Danger status surface color (light theme)
--rh-color-surface-status-danger-on-dark #ffe3d9

Danger status surface color (dark theme)

Caution

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

Ex. Token name Value Use case
--rh-color-surface-status-caution light-dark(var(--rh-color-surface-status-caution-on-light, #ffe8cc), var(--rh-color-surface-status-caution-on-dark, #ffe8cc))

Responsive surface-status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-caution-on-light on a themable container with a light color palette and --rh-color-surface-status-caution-on-dark on a themable container with a dark color palette.
--rh-color-surface-status-caution-on-light #ffe8cc

Caution status surface color (light theme)
--rh-color-surface-status-caution-on-dark #ffe8cc

Caution status surface color (dark theme)

Warning

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

Ex. Token name Value Use case
--rh-color-surface-status-warning light-dark(var(--rh-color-surface-status-warning-on-light, #fff4cc), var(--rh-color-surface-status-warning-on-dark, #73480b))

Responsive surface-status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-warning-on-light on a themable container with a light color palette and --rh-color-surface-status-warning-on-dark on a themable container with a dark color palette.
--rh-color-surface-status-warning-on-light #fff4cc

Warning status surface color (light theme)
--rh-color-surface-status-warning-on-dark #73480b

Warning status surface color (dark theme)

Default

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

Ex. Token name Value Use case
--rh-color-surface-status-default light-dark(var(--rh-color-surface-status-default-on-light, #f2f2f2), var(--rh-color-surface-status-default-on-dark, #f2f2f2))

Responsive surface-status-default color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-default-on-light on a themable container with a light color palette and --rh-color-surface-status-default-on-dark on a themable container with a dark color palette.
--rh-color-surface-status-default-on-light #f2f2f2

Default status surface color (light theme)
--rh-color-surface-status-default-on-dark #f2f2f2

Default status surface color (dark theme)

Neutral

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

Ex. Token name Value Use case
--rh-color-surface-status-neutral light-dark(var(--rh-color-surface-status-neutral-on-light, #f2f2f2), var(--rh-color-surface-status-neutral-on-dark, #f2f2f2))

Responsive surface-status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-neutral-on-light on a themable container with a light color palette and --rh-color-surface-status-neutral-on-dark on a themable container with a dark color palette.
--rh-color-surface-status-neutral-on-light #f2f2f2

Neutral status surface color (light theme)
--rh-color-surface-status-neutral-on-dark #f2f2f2

Neutral status surface color (dark theme)

Info

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

Ex. Token name Value Use case
--rh-color-surface-status-info light-dark(var(--rh-color-surface-status-info-on-light, #ece6ff), var(--rh-color-surface-status-info-on-dark, #ece6ff))

Responsive surface-status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-info-on-light on a themable container with a light color palette and --rh-color-surface-status-info-on-dark on a themable container with a dark color palette.
--rh-color-surface-status-info-on-light #ece6ff

Info status surface color (light theme)
--rh-color-surface-status-info-on-dark #ece6ff

Info status surface color (dark theme)

Success

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

Ex. Token name Value Use case
--rh-color-surface-status-success light-dark(var(--rh-color-surface-status-success-on-light, #e9f7df), var(--rh-color-surface-status-success-on-dark, #e9f7df))

Responsive surface-status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-success-on-light on a themable container with a light color palette and --rh-color-surface-status-success-on-dark on a themable container with a dark color palette.
--rh-color-surface-status-success-on-light #e9f7df

Success status surface color (light theme)
--rh-color-surface-status-success-on-dark #e9f7df

Success status surface color (dark theme)

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify