colorthief.js

<div class="application">
  <img id="image" src="/commnity.gif"/>

  <div id="section-1" class="page-section"></div>
  <div id="section-2" class="page-section"></div>
  <div id="section-3" class="page-section"></div>
  <div id="section-4" class="page-section"></div>
</div>

<script type="text/javascript">

var colorThief = new ColorThief();
    var sections = $('.page-section');
    $("#image").load(function(){
          var image = document.getElementById('image')
         var dominantColor = colorThief.getColor(image);
         var palette = colorThief.getPalette(image, 5);
         console.log("palette:",palette);
         console.log(dominantColor);
         $('.application').css("background-color", "rgb("+dominantColor+")");

         $.each(sections, function(index, section){
           console.log(palette[index])
           $(section).css('background-color', "rgb("+ palette[index] + ")")
         })
    });
</script>

requires colorthief.js and jquery!