Colors

Theme colors

Primary default

#0066CC

Global CSS variable

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

#004080

Global CSS variable

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

Colors in context

This call-to-action uses default PatternFly 4 colors. The active state button takes --pf-global--primary-color--100. On a hover, the color adjusts to --pf-global--primary-color--200.

Secondary default

#72767B

Global CSS variable

--pf-global--secondary-color--100

Colors in context

Chip
Really long Chip that goes on and on

This Chip uses default PatternFly 4 colors. The border uses --pf-global--secondary-color--100.

Typography colors

Text

#151515

Global CSS variable

--pf-global--Color--100

#72767B

Global CSS variable

--pf-global--Color--200

#393F44

Global CSS variable

--pf-global--Color--300

Colors in context

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body text should be Overpass Regular at 16px. It should have leading of 24px because of it’s relative line-height of 1.5.

Learn more about typography styles.

#0066CC

Global CSS variable

--pf-global--link--Color

#004080

Global CSS variable

--pf-global--link--Color--hover

Colors in context

Body text should be Overpass Regular at 16px. This is a link in-content. It should have leading of 24px because of its relative line-height of 1.5.

Icons

#72767B

Global CSS variable

--pf-global--icon--Color--light

Colors in context

Icon color is #72767B unless used in an alert.

Learn more about icons.

Alert statuses

Success

#92D400

Global CSS variable

--pf-global--success-color--100

#486B00

Global CSS variable

--pf-global--success-color--200

Colors in context

Success alert:Success -- ipsum dolor sit ame

Success alert color: --pf-global--success-color--100

Success alert icon color: --pf-global--success-color--200

Information

#73BCF7

Global CSS variable

--pf-global--info-color--100

#004368

Global CSS variable

--pf-global--info-color--200

Colors in context

Info alert:Info -- ipsum dolor sit ame

Info alert color: --pf-global--info-color--100

Info alert icon color: --pf-global--info-color--200

Warning

#f0AB00

Global CSS variable

--pf-global--warning-color--100

#795600

Global CSS variable

--pf-global--warning-color--200

Colors in context

Warning alert:Warning -- ipsum dolor sit ame

Warning alert color: --pf-global--warning-color--100

Warning alert icon color: --pf-global--warning-color--200

Danger

#C9190B

Global CSS variable

--pf-global--danger-color--100

#470000

Global CSS variable

--pf-global--danger-color--300

Colors in context

Danger alert:Danger -- ipsum dolor sit ame

Danger/critical alert color: --pf-global--danger-color--100

Danger/critical alert icon color: --pf-global--danger-color--300

Contrast ratios

Level AA in the Web Content Accessibility Guildelines 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.