Colors

PatternFly colors

This guide outlines the PatternFly color palette, as well as guidance for color use in different scenarios. Note that the color swatches and palettes automatically change to accommodate light or dark themes. To learn more about PatternFly’s dark theme, refer to our dark theme handbook.

In this guide, you can select each color swatch to learn more details, such as hex values and usage guidance.

Refer to our tokens documentation to see a list of all design tokens.

Primary colors

Primary colors are those displayed most frequently across your application screens and components. Our primary color is called "PatternFly blue", which is used across PatternFly's components. PatternFly blue should change upon hover.

--pf-v6-global--primary-color--100
--pf-v6-global--primary-color--200
PatternFly blue colors

Typography and iconography colors

Text and icon colors are extremely similar because they can often be used in the same context, such as for a link button. We support multiple shades of text colors so that you can emphasize hierarchy on both light and dark backgrounds.

--pf-v6-global--Color--100
--pf-v6-global--Color--200
--pf-v6-global--link--Color
PatternFly typography colors

Background colors

Background colors are used throughout components and, occasionally, for certain screens. Light colors can be used interchangeably with full-screen backgrounds, while dark colors are strictly used as backgrounds within components.

Light backgrounds

--pf-v6-global--BackgroundColor--200
--pf-v6-global--BackgroundColor--100

Dark backgrounds

--pf-v6-global--BackgroundColor--dark-100
--pf-v6-global--BackgroundColor--dark-200
--pf-v6-global--BackgroundColor--dark-300
--pf-v6-global--BackgroundColor--dark-400
PatternFly background colors

Status and state colors

Status and state colors are indicators that communicate data and actions to users through the UI. PatternFly's status colors cover default, danger, success, information, and warning statuses, as well as disabled states.
PatternFly status colors

Default

--pf-v6-global--default-color--300
--pf-v6-global--default-color--200
--pf-v6-global--palette--cyan-50

Danger

--pf-v6-global--danger-color--200
--pf-v6-global--danger-color--100
--pf-v6-global--palette--red-50

Success

--pf-v6-global--success-color--200
--pf-v6-global--success-color--100
--pf-v6-global--palette--green-50

Info

--pf-v6-global--info-color--200
--pf-v6-global--info-color--100
--pf-v6-global--palette--blue-50

Warning

--pf-v6-global--warning-color--200
--pf-v6-global--warning-color--100
--pf-v6-global--palette--gold-50

Disabled

--pf-v6-global--disabled-color--100
--pf-v6-global--disabled-color--200
--pf-v6-global--disabled-color--300

Shadows

Shadows can be used to create contrast between UI elements. PatternFly supports different shadow sizes, which enable you to increase the visual depth of a UI element and distinguish it from other elements on the screen.

--pf-v6-global--BoxShadow--lg
--pf-v6-global--BoxShadow--md
--pf-v6-global--BoxShadow--sm
PatternFly shadows

Contrast ratios

PatternFly's goal is to meet level AA in the Web Content Accessibility Guidelines 2.1. To meet level AA requirements, your UI contrast ratios must be at or above 4.5:1 for normal text, 3:1 for large text, and 3:1 for graphics and other UI components. Additionally, on hover, link text color should have ample contrast from both the background color and the default state link color.

To check the contrast between background and text colors, use a WCAG AA-compliance tool.


PatternFly palettes

Our color palettes are created as a system, designed to reinforce content and workflows. Our palettes are carefully chosen to support effective communication and adapt to the needs of your UI.

Note that bright colors are used sparingly and are reserved for specific interactions, such as communicating status.

Our color palettes are organized into "families" that contain different shades of the same hue. In the following palettes, you can expand each value color or shadow in a family to see more details.

Gray family

white
#FFFFFF
black
#000000

Blue family

blue--10
#E0F0FF
blue--20
#B9DAFC
blue--30
#92C5F9
blue--40
#4394E5
blue--50
#0066CC
blue--60
#004D99
blue--70
#003366

Shadows

--pf-t--global--box-shadow--sm
--pf-t--global--box-shadow--md
--pf-t--global--box-shadow--lg

Green family

green--10
#E9F7DF
green--20
#D1F1BB
green--30
#AFDC8F
green--40
#87BB62
green--50
#63993D
green--60
#3D7317
green--70
#204D00

Cyan family

Purple family

purple--10
#ECE6FF
purple--20
#D0C5F4
purple--30
#B6A6E9
purple--40
#876FD4
purple--50
#5E40BE
purple--60
#3D2785
purple--70
#21134D

Light blue family

Gold family

Light green family

Orange family

orange--10
#FFE8CC
orange--20
#FCCB8F
orange--30
#F8AE54
orange--40
#F5921B
orange--50
#CA6C0F
orange--60
#9E4A06
orange--70
#732E00

Red family

red--10
#FCE3E3
red--20
#FBC5C5
red--30
#F9A8A8
red--40
#F56E6E
red--50
#EE0000
red--60
#A60000
red--70
#5F0000
red-orange--10
#FFE3D9
red-orange--20
#FBBEA8
red-orange--30
#F89B78
red-orange--40
#F4784A
red-orange--50
#F0561D
red-orange--60
#B1380B
red-orange--70
#731F00
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.