Global color tokens

Color#

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#

Ex. 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
--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
--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)
--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
--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
--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)
--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
--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)
--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)
--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)
--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)
--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
--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)
--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)
--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)
--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)
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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)
--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
--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)
--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
--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)
--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)
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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)
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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
--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#

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

Surface#

Ex. 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)
© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top