Red Hat design system

Ex.	Token name	Value	Use case
	--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

Accent

Theme Tokens

Color Palette

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

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.

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.	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.

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.	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

Color Palette

--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.

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.	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

--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	Full CSS Variable Permalink to this token
	--rh-color-green-10-hsl	`hsl(95.00000000000003 60.00000000000004% 92.15686274509804%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-green-20-hsl	`hsl(95.55555555555556 65.85365853658536% 83.92156862745097%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-green-30-hsl	`hsl(95.06493506493506 52.380952380952394% 71.17647058823529%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-green-40-hsl	`hsl(95.05617977528091 39.55555555555555% 55.88235294117647%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-green-50-hsl	`hsl(95.21739130434783 42.99065420560747% 41.96078431372549%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-green-60-hsl	`hsl(95.21739130434783 66.66666666666667% 27.058823529411764%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-green-70-hsl	`hsl(95.06493506493506 100% 15.098039215686274%)`	To modify opacity	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
	--rh-color-orange-10-hsl	`hsl(32.941176470588225 100% 90%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-orange-20-hsl	`hsl(33.02752293577981 94.78260869565219% 77.45098039215686%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-orange-30-hsl	`hsl(32.926829268292686 92.13483146067415% 65.09803921568627%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-orange-40-hsl	`hsl(32.752293577981646 91.5966386554622% 53.333333333333336%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-orange-50-hsl	`hsl(29.83957219251337 86.17511520737327% 42.549019607843135%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-orange-60-hsl	`hsl(26.842105263157904 92.68292682926828% 32.15686274509804%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-orange-70-hsl	`hsl(24 100% 22.54901960784314%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-orange-80-hsl	`hsl(24.155844155844157 100% 15.098039215686274%)`	To modify opacity	Full CSS Variable Permalink to this token

Canvas

Ex.	Token name	Value	Use case
	--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

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	Full CSS Variable Permalink to this token
	--rh-color-blue-10-hsl	`hsl(209.03225806451616 100% 93.92156862745098%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-blue-20-hsl	`hsl(210.44776119402988 91.78082191780825% 85.68627450980392%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-blue-30-hsl	`hsl(210.29126213592232 89.56521739130436% 77.45098039215685%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-blue-40-hsl	`hsl(210 75.70093457943923% 58.03921568627452%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-blue-50-hsl	`hsl(210 100% 40%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-blue-60-hsl	`hsl(209.80392156862746 100% 30%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-blue-70-hsl	`hsl(210 100% 20%)`	To modify opacity	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
	--rh-color-gray-10-hsl	`hsl(0 0% 94.90196078431372%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-20-hsl	`hsl(0 0% 87.84313725490196%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-30-hsl	`hsl(0 0% 78.03921568627452%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-40-hsl	`hsl(0 0% 63.921568627450974%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-50-hsl	`hsl(0 0% 43.92156862745098%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-60-hsl	`hsl(0 0% 30.19607843137255%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-70-hsl	`hsl(0 0% 21.96078431372549%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-80-hsl	`hsl(0 0% 16.07843137254902%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-gray-90-hsl	`hsl(0 0% 12.156862745098039%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-10-hsl	`hsl(254.4 100% 95.09803921568627%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-20-hsl	`hsl(254.0425531914893 68.11594202898556% 86.47058823529412%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-30-hsl	`hsl(254.32835820895522 60.36036036036033% 78.23529411764706%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-40-hsl	`hsl(254.25742574257427 54.010695187165794% 63.33333333333333%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-50-hsl	`hsl(254.2857142857143 49.60629921259843% 49.80392156862745%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-60-hsl	`hsl(254.0425531914894 54.65116279069767% 33.72549019607843%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-70-hsl	`hsl(254.48275862068965 60.416666666666664% 18.823529411764707%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-purple-80-hsl	`hsl(262.10526315789474 59.375000000000014% 12.549019607843137%)`	To modify opacity	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
	--rh-color-red-orange-10-hsl	`hsl(15.789473684210513 100% 92.54901960784314%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-orange-20-hsl	`hsl(15.903614457831333 91.20879120879121% 82.15686274509804%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-orange-30-hsl	`hsl(16.406249999999996 90.14084507042254% 72.15686274509804%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-orange-40-hsl	`hsl(16.235294117647054 88.54166666666671% 62.35294117647059%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-orange-50-hsl	`hsl(16.208530805687207 87.55186721991701% 52.74509803921569%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-orange-60-hsl	`hsl(16.265060240963855 88.29787234042554% 36.86274509803921%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-orange-70-hsl	`hsl(16.17391304347826 100% 22.54901960784314%)`	To modify opacity	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
	--rh-color-red-10-hsl	`hsl(0 80.64516129032265% 93.92156862745098%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-20-hsl	`hsl(0 87.09677419354838% 87.84313725490196%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-30-hsl	`hsl(0 87.0967741935484% 81.76470588235294%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-40-hsl	`hsl(0 87.09677419354841% 69.6078431372549%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-50-hsl	`hsl(0 100% 46.666666666666664%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-60-hsl	`hsl(0 100% 32.549019607843135%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-70-hsl	`hsl(0 100% 18.627450980392158%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-red-80-hsl	`hsl(0 100% 12.352941176470589%)`	To modify opacity	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
	--rh-color-teal-10-hsl	`hsl(180 47.99999999999998% 90.19607843137254%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-teal-20-hsl	`hsl(180 45.833333333333336% 81.17647058823529%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-teal-30-hsl	`hsl(180 44.28571428571429% 72.54901960784314%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-teal-40-hsl	`hsl(180 40.54054054054054% 56.470588235294116%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-teal-50-hsl	`hsl(180 49.54128440366972% 42.745098039215684%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-teal-60-hsl	`hsl(180 71.42857142857142% 27.450980392156865%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-teal-70-hsl	`hsl(180 100% 15.098039215686274%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-teal-80-hsl	`hsl(180 100% 10%)`	To modify opacity	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
	--rh-color-yellow-10-hsl	`hsl(47.058823529411775 100% 90%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-yellow-20-hsl	`hsl(46.80851063829787 100% 72.35294117647058%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-yellow-30-hsl	`hsl(46.81034482758621 100% 54.509803921568626%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-yellow-40-hsl	`hsl(43.79999999999999 83.33333333333334% 47.05882352941176%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-yellow-50-hsl	`hsl(40.95808383233534 82.26600985221675% 39.80392156862745%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-yellow-60-hsl	`hsl(37.77777777777777 81.81818181818181% 32.35294117647059%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-yellow-70-hsl	`hsl(35.192307692307686 82.53968253968253% 24.705882352941178%)`	To modify opacity	Full CSS Variable Permalink to this token

--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	Full CSS Variable Permalink to this token
	--rh-color-yellow-80-hsl	`hsl(32.87671232876713 76.84210526315789% 18.627450980392158%)`	To modify opacity	Full CSS Variable Permalink to this token

Interactive

Theme Tokens

Color Palette

--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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-default-on-light	`#0066cc`	Primary interactive - default (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-default-on-dark	`#92c5f9`	Primary interactive - default (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-hover-on-light	`#003366`	Primary interactive - hover (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-hover-on-dark	`#b9dafc`	Primary interactive - hover (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-active-on-light	`#003366`	Primary interactive - active (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-active-on-dark	`#b9dafc`	Primary interactive - active (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-focus-on-light	`#003366`	Primary interactive - focus (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-focus-on-dark	`#b9dafc`	Primary interactive - focus (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-default-on-light	`#5e40be`	Primary interactive visited - default (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-default-on-dark	`#b6a6e9`	Primary interactive visited - default (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-hover-on-light	`#21134d`	Primary interactive visited - hover (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-hover-on-dark	`#ece6ff`	Primary interactive visited - hover (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-active-on-light	`#21134d`	Primary interactive visited - active (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-active-on-dark	`#ece6ff`	Primary interactive visited - active (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-focus-on-light	`#21134d`	Primary interactive visited - focus (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-focus-on-dark	`#ece6ff`	Primary interactive visited - focus (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-default-on-light	`#4d4d4d`	Secondary interactive - default (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-default-on-dark	`#c7c7c7`	Secondary interactive - default (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-hover-on-light	`#4d4d4d`	Secondary interactive - hover (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-hover-on-dark	`#c7c7c7`	Secondary interactive - hover (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-active-on-light	`#4d4d4d`	Secondary interactive - active (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-active-on-dark	`#c7c7c7`	Secondary interactive - active (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-focus-on-light	`#4d4d4d`	Secondary interactive - focus (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-focus-on-dark	`#c7c7c7`	Secondary interactive - focus (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-default-on-light	`#4d4d4d`	Secondary interactive visited - default (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-default-on-dark	`#c7c7c7`	Secondary interactive visited - default (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-hover-on-light	`#4d4d4d`	Secondary interactive visited - hover (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-hover-on-dark	`#c7c7c7`	Secondary interactive visited - hover (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-active-on-light	`#4d4d4d`	Secondary interactive visited - active (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-active-on-dark	`#c7c7c7`	Secondary interactive visited - active (Dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-focus-on-light	`#4d4d4d`	Secondary interactive visited - focus (Light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-focus-on-dark	`#c7c7c7`	Secondary interactive visited - focus (Dark theme)	Full CSS Variable Permalink to this token

Blue

Token name	Value	Use case
--rh-color-interactive-blue-lightest	`#b9dafc`	Inline link hover (dark theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-blue-lighter	`#92c5f9`	Inline link (dark theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-blue-darker	`#0066cc`	Inline link (light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-blue-darkest	`#003366`	Inline link hover (light theme)	Full CSS Variable Permalink to this token

Purple

Token name	Value	Use case
--rh-color-interactive-purple-lightest	`#ece6ff`	Inline link visited hover (dark theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-purple-lighter	`#b6a6e9`	Inline link visited (dark theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-purple-darker	`#5e40be`	Inline link visited (light theme)	Full CSS Variable Permalink to this token
--rh-color-interactive-purple-darkest	`#ece6ff`	Inline link visited hover (light theme)	Full CSS Variable Permalink to this token

Status

Theme Tokens

Color Palette

--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.

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.	Full CSS Variable Permalink to this token
--rh-color-status-danger-on-light	`#b1380b`	Danger status color (light theme)	Full CSS Variable Permalink to this token
--rh-color-status-danger-on-dark	`#f0561d`	Danger status color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-status-caution-on-light	`#ca6c0f`	Caution status color (light theme)	Full CSS Variable Permalink to this token
--rh-color-status-caution-on-dark	`#f5921b`	Caution status color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-status-warning-on-light	`#dca614`	Warning status color (light theme)	Full CSS Variable Permalink to this token
--rh-color-status-warning-on-dark	`#ffcc17`	Warning status color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-status-neutral-on-light	`#4d4d4d`	Neutral accent color (light theme)	Full CSS Variable Permalink to this token
--rh-color-status-neutral-on-dark	`#c7c7c7`	Neutral accent color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-status-note-on-light	`#5e40be`	Note/tip status color (light theme)	Full CSS Variable Permalink to this token
--rh-color-status-note-on-dark	`#b6a6e9`	Note/tip status color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-status-info-on-light	`#5e40be`	Info status color (light theme)	Full CSS Variable Permalink to this token
--rh-color-status-info-on-dark	`#b6a6e9`	Info status color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-status-success-on-light	`#3d7317`	Success status color (light theme)	Full CSS Variable Permalink to this token
--rh-color-status-success-on-dark	`#87bb62`	Success status color (dark theme)	Full CSS Variable Permalink to this token

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

Color Palette

--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

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.	Full CSS Variable Permalink to this token
--rh-color-surface-lightest	`#ffffff`	Primary surface (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-lighter	`#f2f2f2`	Tertiary surface (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-light	`#e0e0e0`	Secondary surface (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-dark	`#383838`	Tertiary surface (dark theme)	Full CSS Variable Permalink to this token
--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)	Full CSS Variable Permalink to this token
--rh-color-surface-darker	`#1f1f1f`	Secondary surface (dark theme)	Full CSS Variable Permalink to this token
--rh-color-surface-darkest	`#151515`	Primary surface (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-surface-status-danger-on-light	`#ffe3d9`	Danger status surface color (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-status-danger-on-dark	`#ffe3d9`	Danger status surface color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-surface-status-caution-on-light	`#ffe8cc`	Caution status surface color (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-status-caution-on-dark	`#ffe8cc`	Caution status surface color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-surface-status-warning-on-light	`#fff4cc`	Warning status surface color (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-status-warning-on-dark	`#73480b`	Warning status surface color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-surface-status-default-on-light	`#f2f2f2`	Default status surface color (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-status-default-on-dark	`#f2f2f2`	Default status surface color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-surface-status-neutral-on-light	`#f2f2f2`	Neutral status surface color (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-status-neutral-on-dark	`#f2f2f2`	Neutral status surface color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-surface-status-info-on-light	`#ece6ff`	Info status surface color (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-status-info-on-dark	`#ece6ff`	Info status surface color (dark theme)	Full CSS Variable Permalink to this token

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.

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.	Full CSS Variable Permalink to this token
--rh-color-surface-status-success-on-light	`#e9f7df`	Success status surface color (light theme)	Full CSS Variable Permalink to this token
--rh-color-surface-status-success-on-dark	`#e9f7df`	Success status surface color (dark theme)	Full CSS Variable Permalink to this token

Global color tokens

Theme Tokens

Theme Tokens

Theme Tokens

Theme Tokens

Theme Tokens

Other libraries

Red Hat legal and privacy links

Red Hat legal and privacy links