Twenty Eleven Theme Colour Palette

As a follow up to my previous post: WordPress 3.2 Admin Colour Palette I was asked if I could do a Twenty Eleven version. See the previous post for the script used.

Standard “Light” colour scheme

#e5e5e5
#000000
#f7f7f7
#efefef
#444444
#0a0a0a
#ffffff
#555555
#aaaaaa
#d3d3d3
#575757
#f6f6f6
#999999
#777777
#3c3c3c
#252525
#f9f9f9
#666666
#222222
#cccccc
#e2e2e2
#dddddd
#373737
#fafafa
#f4f4f4
#eeeeee
#bbbbbb
#111111
#888888
#7a7a7a
#e0e6e8
#bfddf3
#fff9c0
#29628d
#ff4b33
#1982d1
#0861a5
#bd3500

Alternate “Dark” theme

Just a note here, Due to TwentyEleven’s structure, some of the colours in the above light theme will be used as part of this colour scheme, this is just for visual information purposes.

#282828
#888888
#060606
#444444
#000000
#2c2c2c
#aaaaaa
#555555
#090909
#a8a8a8
#959595
#c3c3c3
#777777
#111111
#1d1d1d
#242424
#0b0b0b
#ffffff
#999999
#333333
#bbbbbb
#0f0f0f
#dddddd
#222222
#383838
#272727
#cccccc
#0a0a0a
#858585
#eeeeee
#42caff
#40220c
#00b4cc
#00063f

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.

WordPress, What cant it do?

WordPress can do almost everything thanks to its great Plugin API system.. But now and then.. You just have to hack the core code to get what you want..

Left Bank Pictures has taken it a step further however, Welcome to Military hacking.. Strike Back style.

If you’re wondering where/when, It appears at the start and end of Episode 5 of Series 1. The changes have since been merged to WordPress as well/