Colors are one of the key aspects when it comes to brand recognition. Making sure we use the right hues (colors) is essential to that effect. Check out the following list to find the official WordPress colors. (Also available on this codepen)

Are you also looking for the official logos?

Colors Colors

Colors are separated into three groups. The Blues, the Grays, and Auxiliary colors. The most recognizable colors are, obviously, the Blues and Grays. The Auxiliary hues can be used for various reasons, and come in a variety of values, with some tints (added white), tones (mix with another hue), and shades (added black)

Top ↑

Blues Blues

WordPress Blue
Medium Blue

Top ↑

Grays Grays

This section keeps growing, here are just some of the base ones. More on the codepen.

Ultra Dark Gray
Dark Gray
Base Gray
Dark Silver Gray
Silver Gray
Light Silver Gray

Top ↑

Auxiliary Hues Auxiliary Hues

Here are just the base hues, but there’s a plethora of tints, tones, and shades available on the codepen. These keep evolving, so they don’t get documented here quite yet.

Accent Red
Accent Orange
Accent Yellow
Accent Green
Medium Blue
Accent Purple

Top ↑

Downloads Downloads

  • Adobe Swatches (.ase) (props to @antpb)
  • Adobe Illustrator (.ai) (props to @antpb)
  • Sketch File with color elements (want to contribute one? pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @hugobaeta on slackSlack Slack is a Collaborative Group Chat Platform The WordPress community has its own Slack Channel at

Top ↑

Resources Resources

Last updated: