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 and Sketch, that have the correct hex colors in swatch form, are also available to download and install.
- Download the Adobe Color file for Photoshop.
- In Finder, go to Applications > Adobe Photoshop CC > Presets > Color Swatches
- Place the .aco file into the Color Swatches folder.
- Download the Adobe Color file for Illustrator.
- In Finder, go to Applications > Adobe Illustrator CC > Presets > en_US > Swatches
- Place the .ase file into the Swatches folder.
- Download the Adobe Color file for InDesign.
- In Finder, go to Applications > Adobe InDesign CC > Presets > Swatch Libraries
- Place the .ase file into the Swatches folder.
- Download the Sketch palette file.
- Download the Sketch-Palettes plugin and follow the installation instructions.
- Open Sketch and your desired file.
- In Sketch, go to Plugins > Sketch Palettes > Document Colors > Load Palette
- Locate the PatternFly_Palette.sketchpalette file that you downloaded.
- Find the palette in the Inspector sidebar > Fills > Document Colors
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 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 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 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
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.