Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

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

Other libraries

To learn more about our other libraries, visit the getting started page.
© 2021-2024 Red Hat, Inc. Deploys by Netlify