DEV Community

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

Posted on • Edited on

3 1

New WordPress Admin Color Palette

WOW!

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



Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay