JSFiddle - React, Tailwind, and code Playground

HTML

<div class="itemFeature">
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#FF0000;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#0055FF;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#00AA00;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#FFAAFF;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#FFFFFF;">
      <span></span>
    </span>
  </label>
  <label class="itemValue">
    <input type="radio" name="feature[199_3_2]" value="1">
    <span class="featureValue" style="background-color:#000000;">
      <span></span>
    </span>
  </label>
</div>

CSS

.selected .featureValue {border:1px solid red; box-shadow: inset 0 0 1px 0 #fff;}
.inner-border-gray {box-shadow: inset 0 0 2px 0 rgba(61, 69, 71, 0.5) !important;}

/* -------- */

.itemFeature {
  padding:10px;
}

.itemValue {
    margin: 0 1px 5px 0;
    width: 25px;
    height: 25px;
}

.itemValue input {
    display: none;
}

.featureValue {
    width: 25px;
    height: 25px;
    cursor: pointer;
    display: inline-block;
    border:1px solid transparent;
    padding: 10px 10px;
    background-color: #fff;
    line-height: 1;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    color: #3d4547;
    margin-right:3px;
}

JavaScript

$('.itemValue ').each(function(){
    var colors = $('.featureValue',this).css('background-color');
    var arr_colors = colors.replace("rgb(",'').replace(")",'').split(',');
    if(arr_colors[0] > 239 && arr_colors[1] > 239 && arr_colors[2] > 239) {
        $('.featureValue',this).addClass('inner-border-gray');
    }
});

$('.itemValue>input').click(function(){
    $('.itemValue.selected').removeClass('selected');
    $(this).closest('.itemValue').addClass('selected');
});