<div class="panel">
  <ul class="cp">
    <li class="cp__color cp__color--red"></li>
    <li class="cp__color cp__color--green"></li>
    <li class="cp__color cp__color--blue"></li>
    <li class="cp__color cp__color--yellow"></li>
    <li class="cp__color cp__color--purple"></li>
    <li class="cp__color cp__color--tomato"></li>
    <li class="cp__color cp__color--grey"></li>
    <li class="cp__color cp__color--black"></li>
    <li class="cp__color cp__color--orange"></li>
  </ul>
</div>

body {
  padding: 40px;
}

.panel {
  max-width: 150px;
}

.cp {
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
  
}

.cp__color {
  width: 30px;
  height: 30px;
  background-color: #CCC;
  margin: 5px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor:pointer;
  transition: all 0.5s;
}

.cp__color.active {
  border: 2px solid blue;
}

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

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

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

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

.cp__color--purple {
  background-color: purple;
}

.cp__color--tomato {
  background-color: tomato;
}

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

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

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

$(document).ready(function() {
  $(".cp__color").on('click', function() {
    $(".cp__color").each(function() {
      $(this).removeClass('active');
    });
    $(this).addClass('active');
  });
});