JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top" class="box_menu"></div>
    <br>
    <div  id="left" class="box_left"></div>

    <div id="slideout">
      <img src="http://storage3.static.itmages.ru/i/16/0103/h_1451838516_3579639_70861a3721.png" />
      <div id="slideout_inner">
      <select name="" id="currentElement">
        <option value="#top">Верхняя панель</option>
        <option value="#left">Левая панель</option>
      </select>
        <ul class="metro">
          - Цвет блока с верху --------------------------
          <li><span>#A87B51</span>
          </li>
          <li><span>#56DEA7</span>
          </li>
          <li><span>#FF7659</span>
          </li>
          <li><span>#F8CD36</span>
          </li>
          <li><span>#F26175</span>
          </li>
          <li><span>#5CA7DF</span>
          </li>
          <li><span>#C86466</span>
          </li>
          <li><span>#9E7AC2</span>
          </li>
        </ul>
      </div>
    </div>

CSS

html, body, div {margin:0; padding:0;}
ol,ul {list-style:none}
html,body {height:100%;}
body { background: #363B48;}

.box_menu {
	height:60px;
	width:100%;
	background: #5CA7DF;
}

.box_left {
	float:left;
	height:85%;
	width:100px;
	background: #C86466;
}

/* === Блок выбора цвета .metro  === */

.metro {
	float:right; 
    width: 180px;
	height:330px;
	background: #292D38;
	padding:8px; 
	margin: 10px 10px ;
	border: 1px solid #444;
	color: #FFF; 
	font-size:14px; 
	font-weight:bold; 
	font-family:Verdana, Arial, Helvetica;
}

.metro li {
    cursor: default;
    position: relative;
    text-align: center;
    margin: 0 10px 10px 0;
    width: 80px;
    height: 60px;
    color: #ffffff;
    float: left;
    cursor:pointer;
}


.metro  li:first-child  { background: #A87B51;}
.metro  li:nth-child(2) { background: #56dea7;}
.metro  li:nth-child(3) { background: #ff7659;}
.metro  li:nth-child(4) { background: #f8cd36;}
.metro  li:nth-child(5) { background: #f26175;}
.metro  li:nth-child(6) { background: #5ca7df;}
.metro  li:nth-child(7) { background: #C86466;}
.metro  li:last-child   { background: #9e7ac2;}



/* Выезжающая панель на css */

#slideout {
	position: fixed;
	top: 100px;
	right: 0;
	width: 35px;
	padding: 16px 0 16px 10px;
	text-align: center;
	background: #282C37;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;

}
#slideout_inner {
	position: fixed;
	top: 100px;
	right: -250px;
	background: #282C37;
	width: 200px;
	padding: 25px;
	height: 370px;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	text-align: left;

}

#slideout:hover {
	right: 250px;
}
#slideout:hover #slideout_inner {
	right: 0;
}

JavaScript

var $currentPanel = $('#currentElement');

$('.metro li').on('click', function (event){
 var $panel = $($currentPanel.val());
 //Не очень хорошо хранить значение прямо в span, лучше использовать data-color аттрибут или как-то еще хранить.
 $panel.css({
  backgroundColor: $(event.currentTarget).find('span').html()
 });
});