Color Palette for WP Admin in 5.7

This is the first part of a large project to clean up the WordPress admin CSS. In WordPress 5.7 all colors used in CSS are reduced to one of 12 blues, greens, reds and yellows, 13 grays, pure blacks and pure whites.

gray = {
	"Gray 0": "#f6f7f7", "Gray 2":"#f0f0f1", "Gray 5": "#dcdcde",
	"Gray 10": "#c3c4c7", "Gray 20": "#a7aaad", "Gray 30": "#8c8f94",
	"Gray 40": "#787c82", "Gray 50": "#646970", "Gray 60": "#50575e",
	"Gray 70": "#3c434a", "Gray 80": "#2c3338", "Gray 90": "#1d2327"
, "Gray 100": "#101517"}

blue = {
	"Blue 0": "#f0f6fc", "Blue 5": "#c5d9ed", "Blue 10": "#9ec2e6",
	"Blue 20": "#72aee6", "Blue 30": "#4f94d4", "Blue 40": "#3582c4",
	"Blue 50": "#2271b1", "Blue 60": "#135e96", "Blue 70": "#0a4b78",
	"Blue 80": "#043959", "Blue 90": "#01263a", "Blue 100": "#00131c"
}

red = {
	"Red 0": "#fcf0f1", "Red 5": "#facfd2", "Red 10": "#ffabaf",
	"Red 20": "#ff8085", "Red 30": "#f86368", "Red 40": "#e65054",
	"Red 50": "#d63638", "Red 60": "#b32d2e", "Red 70": "#8a2424",
	"Red 80": "#691c1c", "Red 90": "#451313", "Red 100": "#240a0a"
}

yellow = {
	"Yellow 0": "#fcf9e8", "Yellow 5": "#f5e6ab", "Yellow 10": "#f2d675",
	"Yellow 20": "#f0c33c", "Yellow 30": "#dba617", "Yellow 40": "#bd8600",
	"Yellow 50": "#996800", "Yellow 60": "#755100", "Yellow 70": "#614200",
	"Yellow 80": "#4a3200", "Yellow 90": "#362400", "Yellow 100": "#211600"
}

green = {
	"Green 0": "#edfaef", "Green 5": "#b8e6bf", "Green 10": "#68de7c",
	"Green 20": "#1ed14b", "Green 30": "#00ba37", "Green 40": "#00a32a",
	"Green 50": "#008a20", "Green 60": "#007017", "Green 70": "#005c12",
	"Green 80": "#00450c", "Green 90": "#003008", "Green 100": "#001c05"
}

This same palette in HTML form.

This new optimized color palette reduces all colors that were previously in WordPress core code to seven base colors and a range of 56 shades that correspond to the recommended WCAG 2.0 AA contrast ratio relative to white or black.

Colors in each range are evenly perceived from light to dark, meaning they start from white and get darker by the same amount with each step. Half of the range has a contrast of 4.5 or higher against black, and the other half retains that same contrast against white.

Standardizing this color set will help authors make consistent and convenient design decisions. Developers of dark and plugin authors are advised to use this new color palette for better alignment of their products with WordPress Core.

Plugin authors who use existing Core CSS classes should be prepared to use the new color palette, as each Core class has been updated accordingly.