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.
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. Similar colors are being applied to WordPress Components, and are thus default in the Figma library.
Resources
- Accessibility handbook on uses of color and contrast.
- Color contrast ratio checker.
- More resources regarding accessibility and color testing.
Classic 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).
Check out the following list to find the official WordPress colors. (Also available on this codepen).
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).
Blues
Grays
This section keeps growing, here are just some of the base ones. More on the codepen.
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.
Downloads
- Adobe Swatches (.ase) (props to @antpb)
- Adobe Illustrator (.ai) (props to @antpb)