WordPress 3.2 Admin Colour Palette

So a ticket popped up on trac, mentioning the Gray colour scheme example colours were out of date, gave me a quick idea to make a script to make a colour palette of the colour schemes (ie. All colours used in the colour css file), so here we have it:

Fresh – Gray

#e9e9e9
#f5f5f5
#c3c3c3
#ededed
#909090
#a0a0a0
#ffffff
#d7d7d7
#f2f2f2
#dadada
#aaaaaa
#ebebeb
#555555
#b2b2b2
#888888
#e7e7e7
#c0c0c0
#606060
#d5d5d5
#fbfbfb
#c1c1c1
#d3d3d3
#e3e3e3
#e5e5e5
#444444
#cfcfcf
#e1e1e1
#6d6d6d
#bbbbbb
#f4f4f4
#666666
#dddddd
#e8e8e8
#9a9a9a
#fcfcfc
#000000
#ececec
#101010
#f9f9f9
#222222
#808080
#cccccc
#f1f1f1
#dfdfdf
#eeeeee
#eaeaea
#464646
#333333
#777777
#999999
#ebeaeb
#f0f6fb
#eaf2fa
#eaf3fa
#ededff
#ffebe8
#e4f2fd
#fffbe4
#ffffe0
#b6bdd2
#ddffdd
#ffdddd
#cfe1ef
#cee1ef
#ccf3fa
#b8d3e2
#fffbcc
#f0f0b8
#9fd0d5
#9999dd
#ffa0a0
#ff9999
#99ff99
#557799
#ffb78c
#ffec8b
#c3ff88
#ff6666
#264761
#e6db55
#448abd
#f04040
#cc4433
#ff853c
#298cba
#21759b
#13455b
#d54e21
#8dff1c
#0a246a
#bc0b0b
#0000ff
#ffcc00
#cc0000
#dd0000
#006505
#d98500
#ff0000

Classic – Blue

#e9e9e9
#606060
#aaaaaa
#ebebeb
#f2f2f2
#464646
#dddddd
#e8e8e8
#9a9a9a
#dadada
#e5e5e5
#444444
#b2b2b2
#c9c9c9
#f5f5f5
#c3c3c3
#f4f4f4
#fcfcfc
#888888
#555555
#d7d7d7
#ffffff
#101010
#bbbbbb
#d5d5d5
#e7e7e7
#000000
#666666
#222222
#cccccc
#c1c1c1
#f9f9f9
#808080
#333333
#eaeaea
#dfdfdf
#777777
#999999
#eeeeee
#c0c0c0
#f1f1f1
#d3d3d3
#ebeaeb
#f7fcfe
#f5fafd
#efede7
#f0f6fb
#eff8ff
#eaf3fa
#eaf2fa
#ededff
#ecf8fe
#ffebe8
#e4f2fd
#fffbe4
#d0dfe9
#cfdfe9
#bdccd5
#ffffe0
#d1e5ee
#b6bdd2
#ffdddd
#ddffdd
#cfe1ef
#cee1ef
#bed1dd
#b0c8d7
#ccf3fa
#b8d3e2
#fffbcc
#f0f0b8
#a0c3d5
#9fd0d5
#9999dd
#ffa0a0
#99ff99
#ff9999
#557799
#ffb78c
#ffec8b
#c3ff88
#5a8fad
#5589aa
#ff6666
#264761
#e6db55
#448abd
#f04040
#cc4433
#ff853c
#185069
#298cba
#174f69
#21759b
#13455b
#d54e21
#8dff1c
#0a246a
#bc0b0b
#ff0000
#ffcc00
#cc0000
#d98500
#dd0000
#0000ff
#006505

Script used

[php]
<?php
$file = ABSPATH . ‘wp-admin\\css\\colors-classic.dev.css';
$file = escapeshellarg($file );

$in = shell_exec("grep -i -o -e #[0-9a-f]\\{3,6\\}\\b $file | uniq -i");

$in = str_replace(array(‘:’, ‘#’, ‘ ‘), ”, $in);

$in = explode("\n", $in);
$in = array_filter($in);

foreach ( $in as $i => $v ) {
if ( strlen($v) == 3 )
$in[$i] = $v[0] . $v[0] . $v[1] . $v[1] . $v[2] . $v[2];
}

$out = array();
foreach ( $in as $rgb ) {
$r = hexdec( substr($rgb, 0, 2) );
$g = hexdec( substr($rgb, 2, 2) );
$b = hexdec( substr($rgb, 4, 2) );
$hsl = rgb2hsl($r, $g, $b); // we’ll sort it by the Saturation
$out[ strtolower($rgb) ] = $hsl;
}

uasort($out, function($a, $b) {
return $a[1] > $b[1];
});

foreach ( $out as $c => $hsl ) {
$f = ($hsl[2] > 0.6 ) ? ‘000’ : ‘fff';
echo "<div style=’background-color: #$c; color:#$f; width: 80px; height: 40px; display: inline-block;’>#$c</div>";
}

foreach ( $out as $c => $hsl ) {
$f = ($hsl[2] > 0.6 ) ? ‘000’ : ‘fff';
echo htmlentities("<div style=’background-color: #$c; color:#$f; width: 80px; height: 40px; display: inline-block;’>#$c</div>") . ‘<br />';
}

function rgb2hsl($r, $g, $b) {
$var_R = ($r / 255);
$var_G = ($g / 255);
$var_B = ($b / 255);

$var_Min = min($var_R, $var_G, $var_B);
$var_Max = max($var_R, $var_G, $var_B);
$del_Max = $var_Max – $var_Min;

$v = $var_Max;

if ($del_Max == 0) {
$h = 0;
$s = 0;
} else {
$s = $del_Max / $var_Max;

$del_R = ( ( ( $var_Max – $var_R ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;
$del_G = ( ( ( $var_Max – $var_G ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;
$del_B = ( ( ( $var_Max – $var_B ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;

if ($var_R == $var_Max) $h = $del_B – $del_G;
else if ($var_G == $var_Max) $h = ( 1 / 3 ) + $del_R – $del_B;
else if ($var_B == $var_Max) $h = ( 2 / 3 ) + $del_G – $del_R;

if ($h < 0) $h++;
if ($h > 1) $h–;
}

return array($h, $s, $v);
}
?>
[/php]

This post was edited to correct a few things, including sorting by the saturation of the colour rather than alphabetically.

5 thoughts on “WordPress 3.2 Admin Colour Palette”

  1. Thank you – this will help, just one possible improvement – could you add count, so that we may be able to find what are the most common/important ones? And maybe also differntiate background, text and border colors. P.S.: if I understand it well, you are not catching named colors, but they are probably not much used, i just mention it if someone would like to use it as general tool for greping colors

    1. Nah, You can do that yourself :) I’ve edited this a dozen or more times already today, I’ve had enough of fiddling with this, it achieved what I wanted out of it, so I’ve posted the results here for people to look over.

      If you use the grep command like i have, and pipe it through uniq, there’s a cli switch to output the count of each item as well which should show the most common ones easily (Most of these are only used once or twice, but that css block might apply to 20 different css selectors..)

      As you rightly pointed out, It’s not catching named colours, but if there’s any of those in WordPress, tell me so I can remove them!

Comments are closed.