Colors

Primary colors

PatternFly blue

Primary colors are the colors displayed most frequently across your application screens and components. Our primary colors are used within a variety of components and are typically applied to default or active states and hover states.

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

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

Typography and iconography colors

Text and icons

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

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

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

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

Background colors

Background colors are used throughout components and can be used for certain screens depending on the use case. The light colors can be interchangeable for full-screen backgrounds. The dark background colors are strictly used within components.

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

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

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

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

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

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

Status and state colors

Status and state colors are important when communicating data and action aspects through the UI with the user. Our status colors cover a variety of statuses including default, danger, success, information, and warning.

Danger

#470000 (alert icon)--pf-global--danger-color--300

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

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

Default

#003737 (alert title and icon)--pf-global--default-color--300

#009596 --pf-global--default-color--200

#73C5C5 (alert icon background)--pf-global--default-color--100

Info

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

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

Success

#0F280D (alert title and icon)--pf-global--success-color--200

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

Warning

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

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

Disabled

#6A6E73 --pf-global--disabled-color--100

#D2D2D2 --pf-global--disabled-color--200

#F0F0F0 --pf-global--disabled-color--300

Shadows

Shadows provide specifics about depth, direction of movement, and surface edges. Depending on the surface’s elevation and relationships to other surfaces, the type of shadow will change.

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

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

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

Contrast ratios

Level AA in the Web Content Accessibility Guidelines 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).

Check color contrast between background color and text color using a WCAG AA-compliance tool.

Make sure that, on hover, link texts provides ample contrast from both background color and from the default state of link text.

Color palette

Our palettes are created as a system designed to reinforce application content and workflows. Bright colors are reserved for specific interactions such as reinforcing status and are used sparingly. Our palettes are simple and consolidated to allow them to be easily deployed and versatile for any situation.