Example

by Gwyn Milcote

HTML

Title BG: <input type="color" value="#ffcc33" class="picker title_bg_picker"> Text: <input type="color" value="#000000" class="picker title_text_picker">
<br>
Main BG: <input type="color" value="#ffffff" class="picker bg_picker"> Text: <input type="color" value="#000000" class="picker text_picker"> Border: <input type="color" value="#ffcc33" class="picker border_picker">
<br>
Sub BG: <input type="color" value="#ffcc33" class="picker sub_bg_picker"> Text: <input type="color" value="#000000" class="picker sub_text_picker"> Border: <input type="color" value="#000000" class="picker sub_border_picker">

<div class='main_border'>
<div class='main'>
    <div class='title'>Title Here</div>

    The colours in this div will change according to the pickers.
    
    <div class='sub_border'>
    <div class='sub'>
        This is an inner div.
    </div>
    </div>
    
    Blah blah blah...
</div>
</div>

CSS

div {box-sizing:border-box;border-radius:10px;}
.main_border {width:90%;padding:5px;margin:20px auto;}
.main {padding:10px;}
.title {width:100%;padding:10px;font-size:20px;text-align:center;margin-bottom:10px;}
.sub_border {padding:5px;margin:10px auto;}
.sub {padding:10px;}

JavaScript

// title
var title_bg_colour = "#ffcc33";
var title_text_colour = "#000000";

// main div
var bg_colour = "#ffffff";
var text_colour = "#000000";
var border_colour = "#ffcc33";

// sub div
var sub_bg_colour = "#ffcc33";
var sub_text_colour = "#000000";
var sub_border_colour = "#ffcc33";

$('.picker').change(function(){
   title_bg_colour = $('.title_bg_picker').val();
   title_text_colour = $('.title_text_picker').val();
   
   bg_colour = $('.bg_picker').val();
   text_colour = $('.text_picker').val();
   border_colour = $('.border_picker').val();
   
   sub_bg_colour = $('.sub_bg_picker').val();
   sub_text_colour = $('.sub_text_picker').val();
   sub_border_colour = $('.sub_border_picker').val();
   
   $('.title').css("background-color",title_bg_colour);
   $('.title').css("color",title_text_colour);
   
   $('.main').css("background-color",bg_colour);
   $('.main').css("color",text_colour);
   $('.main_border').css("background-color",border_colour);
   
   $('.sub').css("background-color",sub_bg_colour);
   $('.sub').css("color",sub_text_colour);
   $('.sub_border').css("background-color",sub_border_colour);
});