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 developer resources to see a list of all global CSS color variables.

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.

Default --pf-v5-global--primary-color--100

Hover --pf-v5-global--primary-color--200

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.

#151515 --pf-v5-global--Color--100

#6A6E73 --pf-v5-global--Color--200

#0066CC --pf-v5-global--link--Color

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

#F0F0F0 --pf-v5-global--BackgroundColor--200

#FFFFFF --pf-v5-global--BackgroundColor--100

Dark backgrounds

#151515 --pf-v5-global--BackgroundColor--dark-100

#3C3F42 --pf-v5-global--BackgroundColor--dark-200

#212427 --pf-v5-global--BackgroundColor--dark-300

#4F5255 --pf-v5-global--BackgroundColor--dark-400

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.

Default

(alert title)--pf-v5-global--default-color--300

(alert icon)--pf-v5-global--default-color--200

#F2F9F9 (inline alert background)--pf-v5-global--palette--cyan-50

Danger

#A30000 (alert title)--pf-v5-global--danger-color--200

#C9190B (alert icon)--pf-v5-global--danger-color--100

#FAEAE8 (inline alert background)--pf-v5-global--palette--red-50

Success

#1E4F18 (alert title)--pf-v5-global--success-color--200

#3E8635 (alert icon)--pf-v5-global--success-color--100

#F3FAF2 (inline alert background)--pf-v5-global--palette--green-50

Info

#002952 (alert title)--pf-v5-global--info-color--200

#2B9AF3 (alert icon)--pf-v5-global--info-color--100

#E7F1FA (alert background)--pf-v5-global--palette--blue-50

Warning

#795600 (alert title)--pf-v5-global--warning-color--200

#F0AB00 (alert icon)--pf-v5-global--warning-color--100

#FDF7E7 (inline alert background)--pf-v5-global--palette--gold-50

Disabled

#6A6E73 (disabled text)--pf-v5-global--disabled-color--100

#D2D2D2 (disabled background)--pf-v5-global--disabled-color--200

#F0F0F0 (alternate disabled background)--pf-v5-global--disabled-color--300

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.

Large --pf-v5-global--BoxShadow--lg

Medium --pf-v5-global--BoxShadow--md

Small --pf-v5-global--BoxShadow--sm

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.

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.