Red Hat design system

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

Base

Ex.	Token name	Value	Use case
	`--rh-color-accent-base-on-light`	`#0066cc`	Inline link (light theme)
	`--rh-color-accent-base-on-dark`	`#92c5f9`	Inline link (dark theme)

Brand

Ex.	Token name	Value	Use case
	`--rh-color-accent-brand-on-light`	`#ee0000`	Brand red (light theme)
	`--rh-color-accent-brand-on-dark`	`#ee0000`	Brand red (dark theme)

Brand

Red

Token name	Value	Use case
`--rh-color-brand-red-lightest`	`#fbc5c5`	Lightest brand red
`--rh-color-brand-red-lighter`	`#f9a8a8`	lighter brand red
`--rh-color-brand-red-light`	`#f56e6e`	Light brand red
`--rh-color-brand-red-dark`	`#a60000`	Dark brand red/Brand red hover
`--rh-color-brand-red-darker`	`#5f0000`	Darker brand red
`--rh-color-brand-red-darkest`	`#5f0000`	Darkest brand red
`--rh-color-brand-red-on-dark`	`#ee0000`	Brand red on dark background
`--rh-color-brand-red-on-light`	`#ee0000`	Brand red on light background

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)

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

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

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

#F4784A

Color function variants

Ex.	Token name	Value	Use case
	`--rh-color-red-orange-50-rgb`	`rgb(244, 120, 74)`	To modify opacity
	`--rh-color-red-orange-50-hsl`	`hsl(16.235294117647054 88.54166666666671% 62.35294117647059%)`	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

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

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

Interactive

Blue

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

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`	`#21134d`	Inline link visited hover (light theme)

Surface

Token name	Value	Use case
`--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`	`#292929`	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)

Global color tokens

Color

Accent

Base

Brand

Brand

Red

Canvas

Blue

Gray

Green

Orange

Purple

Red orange

Red

Teal

Yellow

Interactive

Blue

Purple

Surface

Other libraries

Feedback

Other libraries

Red Hat legal and privacy links

Red Hat legal and privacy links