The Design Team provides user experience, user interface, and visual design expertise for the WordPress project.

Want to get involved?

Welcome! This all-volunteer team needs designers of various kinds. See our handbook and drop into #design once signed up for volunteer opportunities.

Our vision is to be the go-to resource for design for other teams across the WordPress open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.

Access the WordPress Component Library in Figma and learn more about how we use it in the handbook.

Find out how to get design help.

Home / Design Handbook / WordPress style guide / Foundations / Colors

Colors

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?

Note that as part of a redesign of WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, a new palette of colors is being explored in this Figma file.

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

WordPress Blue

rgb(0,115,170)

#0073aa

Medium Blue

rgb(0,160,210)

#00a0d2

Top ↑

Grays

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

Ultra Dark Gray

rgb(25,30,35)

#191e23

Dark Gray

rgb(35,40,45)

#23282d

Base Gray

rgb(50,55,60)

#32373c

Dark Silver Gray

rgb(130,135,140)

#82878c

Silver Gray

rgb(160,165,170)

#a0a5aa

Light Silver Gray

rgb(180,185,190)

#b4b9be

Top ↑

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

rgb(220,50,50)

#dc3232

Accent Orange

rgb(245,110,40)

#f56e28

Accent Yellow

rgb(255,185,0)

#ffb900

Accent Green

rgb(70,180,80)

#46B450

Medium Blue

rgb(0,160,210)

#00a0d2

Accent Purple

rgb(130,110,180)

#826eb4

Top ↑

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 https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.)