Our color palettes align with Red Hat's brand colors and are designed to reinforce content and support effective communication across different UI needs. Colors are applied to PatternFly elements using semantic design tokens. This guide offers guidance for color use in some of the most common scenarios, but it does not cover all tokens. Additional color usage information is included in our tokens documentation.

Each example contains a descriptive label, a semantic token, and a color swatch circle. If you select a color swatch circle, you can see more details, including a hex code and usage information. Color swatches will automatically update to match light or dark theme colors, based on your browser settings.

Brand colors are used to identify your brand, and are the colors most frequently used across your UI. Our brand color, "PatternFly blue", is used across all components. There are different brand tokens depending on the use case, like icon tokens, text tokens, global color tokens, and so on.

Default --pf-t--global--color--brand--default

Hover --pf-t--global--color--brand--hover

Text --pf-t--global--text--color--brand--default

Background colors are used throughout components and, occasionally, for certain screens.

Primary --pf-t--global--background--color--primary--default

Primary hover --pf-t--global--background--color--primary--hover

Secondary --pf-t--global--background--color--secondary--default

Secondary hover --pf-t--global--background--color--secondary--hover

Text and icon colors overlap, because they can be used inline with each other. Note that there are different tokens for standalone icons, inline icons, and standalone text. For more details view our icons and typography guidelines.

Text and icons can also display status information, which is covered in the status and state colors section.

Regular text --pf-t--global--text--color--regular

Subtle text --pf-t--global--text--color--subtle

Regular icons --pf-t--global--icon--color--regular

Links --pf-t--global--text--color--link--default

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 icons --pf-t--global--icon--color--status--danger--default

Default text --pf-t--global--text--color--status--danger--default

Hover --pf-t--global--color--status--danger--hover

Default icons --pf-t--global--icon--color--status--warning--default

Default text --pf-t--global--text--color--status--warning--default

Hover --pf-t--global--color--status--warning--hover

Icons --pf-t--global--icon--color--disabled

Text --pf-t--global--text--color--disabled

Backgrounds --pf-t--global--background--color--disabled--default

Borders --pf-t--global--border--color--nonstatus--teal--default

Backgrounds --pf-t--global--color--nonstatus--purple--default

Hover --pf-t--global--color--nonstatus--green--hover

Our goal is for PatternFly to meet level AA requirements in the Web Content Accessibility Guidelines 2.1. To achieve level AA accessibility, 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.