.color-group{
  margin-bottom: 30px;
}

.color-item{
  width: 50px;
  height: 50px;
  background-color: white;
  float: left;
  border: 1px solid #000;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.color-item.active{
  box-shadow: 0 0 10px #000;
  border: 3px solid #444;
  //border-radius: 25px;
}

.color-group .color-item:hover{
  box-shadow: 0 0 10px #000;
}

.color-item.color-mix{
  background: -webkit-linear-gradient(red, yellow, green, blue, purple); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow, green, blue, purple); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow, green, blue, purple); /* Standard syntax */
}

.color-item.color-white{
  background-color: white;
}

.color-item.color-navajowhite{
  background-color: navajowhite;
}

.color-item.color-grey{
  background-color: grey;
}

.color-item.color-silver{
  background-color: silver;
}

.color-item.color-yellow{
  background-color: yellow;
}

.color-item.color-gold{
  background-color: gold;
}

.color-item.color-orange{
  background-color: orange;
}

.color-item.color-red{
  background-color: red;
}

.color-item.color-pink{
  background-color: #f06;
}

.color-item.color-purple{
  background-color: #90f;
}

.color-item.color-blue{
  background-color: blue;
}

.color-item.color-turquoise{
  background-color: turquoise;
}

.color-item.color-green{
  background-color: green;
}

.color-item.color-khaki{
  background-color: lime;
}

.color-item.color-brown{
  background-color: brown;
}

.color-item.color-black{
  background-color: black;  
}