DEV Community

Cover image for New WordPress Admin Color Palette
Michael R.
Michael R.

Posted on • Updated on

New WordPress Admin Color Palette


So pretty...

Let me just say I am loving this brand-new color palette repository for WordPress! (core, .org, and related projects)

Oh, and if you're a WP plugin developer, listen up because this applies to you too. And you'll also want to grab this handy PostCSS tool to automate your CSS changes courtesy of @ryelle! 😁😎

In his February post, Standardization of WP-Admin colors in WordPress 5.7, WP Core dev Jb Audras offered the following in-depth summary, and I quote:

This is the first part of a larger project in cleaning up WordPress admin CSS. In WordPress 5.7, all colors used in the CSS are collapsed to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white.

This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the WCAG 2.0 AA recommended contrast ratio against white or black.

The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step. Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.

Standardizing on this set of colors will help contributors make consistent, accessible design decisions. Themes and Plugin developers are encouraged to use this new color palette for better consistency between their products and WordPress Core.

Plugin authors that use the existing CSS Core classes should be all set up with the new color palette, as every Core class was updated accordingly.

Need/want more details? Check out the official Design Handbook or the CodePen palette shown below.

Now for a quick recruitment pitch 😅

Did you know that anyone is welcome to come and help shape future upgrades and improvements to WordPress? True open-source to the core, there are no prerequisites to joining the WordPress community.

It's also an excellent opportunity for those of us starting out as developers and designers to join a thriving open-source community and gain some valuable experience.

Interested? Consider contributing just 5% of your overall development time/effort by joining us in the Five for the Future initiative!

You will have the opportunity to help develop the subsequent versions of WordPress in countless ways, from casually providing feedback to working directly with the elite WP Core team.

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

Top comments (0)