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.

Important

Use these color swatches to ensure that you are using the correct colors -- do not use the eyedropper tool to select colors. Palettes for Adobe Photoshop, Adobe Illustrator, Sketch, Inkscape, and GIMP that have the correct hex colors in swatch form, are also available to download and install.

Last updated: 27 Feb 2017
Install palette for Adobe Photoshop:
  1. Download the Adobe Color file for Photoshop.
  2. In Finder, go to Applications > Adobe Photoshop CC > Presets > Color Swatches
  3. Place the .aco file into the Color Swatches folder.
Install palette for Adobe Illustrator:
  1. Download the Adobe Color file for Illustrator.
  2. In Finder, go to Applications > Adobe Illustrator CC > Presets > en_US > Swatches
  3. Place the .ase file into the Swatches folder.
Install palette for Adobe InDesign:
  1. Download the Adobe Color file for InDesign.
  2. In Finder, go to Applications > Adobe InDesign CC > Presets > Swatch Libraries
  3. Place the .ase file into the Swatches folder.
Install palette for Sketch:
  1. Download the Sketch palette file.
  2. Download the Sketch-Palettes plugin and follow the installation instructions.
  3. Open Sketch and your desired file.
  4. In Sketch, go to Plugins > Sketch Palettes > Document Colors > Load Palette
  5. Locate the PatternFly_Palette.sketchpalette file that you downloaded.
  6. Find the palette in the Inspector sidebar > Fills > Document Colors
Install palette for Inkscape:
  1. Download the Inkscape palette file.
  2. Open the terminal.
  3. Create the palette directory: mkdir -p ~/.config/inkscape/palettes/
  4. Copy the palette file: cp -v PatternFly_Palette.gpl ~/.config/inkscape/palettes/
Install palette for GIMP:
  1. Download the GIMP palette file.
  2. Open the terminal.
  3. Create the palette directory: mkdir -p ~/.gimp-2.8/palettes/
  4. Copy the palette file: cp -v PatternFly_Palette.gpl ~/.gimp-2.8/palettes/

Primary Colors

The primary colors consist of the following colors and their corresponding shades and tints. When designing and developing, use only the following primary colors for a majority of the product's interface.

pf-black  #030303

The majority of a UI will use the grayscale palette for best contrast and visibility Use for general UI and backgrounds.

Use for
general UI and backgrounds

pf-black-100 #fafafa

pf-black-150 #f5f5f5

pf-black-200 #ededed

pf-black-300 #d1d1d1

pf-black-400 #bbbbbb

pf-black-500 #8b8d8f

pf-black-600 #72767b

pf-black-700 #4d5258

pf-black-800 #393f44

pf-black-900 #292e34

pf-black #030303

pf-blue  #0088ce

Tints and shades of this specific blue are used to guide users to interactive elements and states.

Use for
actions and highlights

pf-blue-50 #def3ff

pf-blue-100 #bee1f4

pf-blue-200 #7dc3e8

pf-blue-300 #39a5dc

pf-blue-400 #0088ce

pf-blue-500 #00659c

pf-blue-600 #004368

pf-blue-700 #002235

Secondary Colors

Secondary colors are used as accents, to show emphasis, and to visualize notifications/alerts. Use these sparingly to not distract from the main function of the product.

pf-red

pf-red-100 #cc0000

pf-red-200 #a30000

pf-red-300 #8b0000

pf-red-400 #470000

pf-red-500 #2c0000

pf-orange

pf-orange-100 #fbdebf

pf-orange-200 #f7bd7f

pf-orange-300 #f39d3c

pf-orange-400 #ec7a08

pf-orange-500 #b35c00

pf-orange-600 #773d00

pf-orange-700 #3b1f00

pf-gold

pf-gold-100 #fbeabc

pf-gold-200 #f9d67a

pf-gold-300 #f5c12e

pf-gold-400 #f0ab00

pf-gold-500 #b58100

pf-gold-600 #795600

pf-gold-700 #3d2c00

pf-light-green

pf-light-green-100 #e4f5bc

pf-light-green-200 #c8eb79

pf-light-green-300 #ace12e

pf-light-green-400 #92d400

pf-light-green-500 #6ca100

pf-light-green-600 #486b00

pf-light-green-700 #253600

pf-green

pf-green-100 #cfe7cd

pf-green-200 #9ecf99

pf-green-300 #6ec664

pf-green-400 #3f9c35

pf-green-500 #2d7623

pf-green-600 #1e4f18

pf-green-700 #0f280d

pf-cyan

pf-cyan-100 #bedee1

pf-cyan-200 #7dbdc3

pf-cyan-300 #3a9ca6

pf-cyan-400 #007a87

pf-cyan-500 #005c66

pf-cyan-600 #003d44

pf-cyan-700 #001f22

pf-light-blue

pf-light-blue-100 #beedf9

pf-light-blue-200 #7cdbf3

pf-light-blue-300 #35caed

pf-light-blue-400 #00b9e4

pf-light-blue-500 #008bad

pf-light-blue-600 #005c73

pf-light-blue-700 #002d39

pf-purple

pf-purple-100 #c7bfff

pf-purple-200 #a18fff

pf-purple-300 #8461f7

pf-purple-400 #703fec

pf-purple-500 #582fc0

pf-purple-600 #40199a

pf-purple-700 #1f0066

Color Palettes

When choosing a palette, select colors that reinforce the brand identity of your product. Be consistent across designs to increase brand recognition with your users. Color palettes limited to a few colors help users make quick associations with forms and elements on the screen, and can make your product more usable. Click a color to see the HEX value.

Primary-Palette

Primary Palette

Primary colors make up a majority of the product's interface and are used to define structure. The majority of a UI will use the grayscale palette for best contrast and visibility.

Extended-Palette

Extended Palette

Extended colors are used as accents, to show emphasis, and to visualize notifications/alerts. Use these sparingly to not distract from the main function of the product.

Status-Palettes

Status Palette

Choose colors that correspond with the severity of the message. It should not alarm or threaten users, but instead motivate them to take action. These colors should be used sparingly.

Contrast Ratios

AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. All patternfly fonts must adhere to AAA standards. More details on contrast ratios are at WCAG 2.0.

pf-blue-300 #39a5dc

pf-blue-400 #0088ce

Each color swatch on this page shows you if it’s black text accessible or white text accessible. High color contrast helps users who are partially or completely color-blind see differences between certain colors. It creates a strong visual hierarchy and improved usability for everyone.

Resources

Color Contrast Analyser

Accessibility Color Guide

Alerts/Notifications

Color indicates a status or notification in an obvious way. An alert should be only as prominent as it is critical. It should not alarm or threaten users, but instead motivate them to take action. Choose colors that correspond with the severity of the message. Many patterns and elements suggest appropriate colors in their examples.

Great job! This is really working out.
The server configuration changed.
The server configuration changed.
Failed to add server_abc.