Im looking for a smart way to change the background color for a page, but taking the #xxxxxx value from the dominant color of the headline picture.

In twenty eleven theme, I can set a random image for each page loaded, I would change the background color to match the picture.

I know that's possible but I don't know how to modify the CSS or the template to take the value from a specific function (I found this that seems promising:


Is that too complicated?

thanks alot

  • If you want to use php instead of jQuery take a look at this post: board.phpbuilder.com/… Cheers, Ari. Commented Apr 5, 2013 at 15:14
  • The code just works with JPG and I've PNG obviously :) But anyway... I'm supposed to put the code in the funcion.php and to call it from the header.php, so I can get back the array with colors (even just one that is supposed to be the dominant). But now I don't know how to pass the value to the CSS, otherwise I'm supposed to write code in the php to overpass the CSS and assign the color to the background (or the menu) directly.
    – Apteryx
    Commented Apr 5, 2013 at 15:57

1 Answer 1


You can use a jQuery plugin called Color Thief.

Files needed:

  1. jquery.js (is included in WordPress)
  2. quantize.js (download from color-thief github page)
  3. color-thief.js (download from color-thief github page)

Wordpress setup:

Open functions.php (located in your theme's folder) and add the code below to load the files in WordPress. In this case I placed all files in the "js" folder.

//color thief demo

wp_register_script('quantize', $base . '/js/quantize.js');

wp_register_script('colorThief', $base . '/js/color-thief.js');

wp_register_script('main', $base . '/js/main.js');

As you can see I also created a main.js file to store the code that will run the color-thief code.

main.js code:

jQuery(document).ready(function($) {


        // Dominant Color
        var dominantColor = getDominantColor($(this));

        //change background
        $("body").css("background-color", "rgb("+dominantColor+")");

The code above will look for an image with id = target.
The load() function will ensure that the image has already loaded before the code is executed.

Next the value of the dominant color is stored in a variable (the value returned is 3 numbers, which form the RGB color)

We use that same variable to change the color of the background.

The HTML setup:

The TwentyEleven theme loads the image through a function in the file header.php, but you can still edit the image tag and add an image ID to be able to find it easily with jQuery.

In this case my image ID is target:

    src="<?php header_image(); ?>" 
    width="<?php echo HEADER_IMAGE_WIDTH; ?>" 
    height="<?php echo HEADER_IMAGE_HEIGHT; ?>" 
    id="target" />

And that should do it. Once the page loads, the jQuery script will look for an image with id = target. Get the dominant color of that image, and then apply it to the background of the page automatically.

You can see a demo of this working here. (refresh the page a few times to until it loads a different image)

  • +1, though I still think the question ought to be closed as off-topic Commented Apr 5, 2013 at 14:23
  • @JohannesPille would be a pity, lots of interesting info here already! Commented Apr 5, 2013 at 15:27
  • I'm not smart enough, I'm trying to do this in a Wordpress based site, with twentyeleven theme. I understand the process but I don't really know how to call js functions in php pages and how to pass the color value to the CSS that control the background color... i'm DUMB
    – Apteryx
    Commented Apr 5, 2013 at 15:55
  • You don't need to "pass the value to the css", gdaniel's last line of code sets the css. You just have to figure how to insert JS. The preferred method would be via wp_enqueue_script. And to return to less constructive commenting: "not yet knowledgeable enough" != "not smart". And @dalbaeb: "interesting" != "within the scope of WPSE". Commented Apr 5, 2013 at 16:01
  • OK i'm not yet knowledgeable enough to do that.. but thank you :)
    – Apteryx
    Commented Apr 5, 2013 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.