JSFiddle - React, Tailwind, and code Playground

HTML

<select id='S1' style='background-color:#25F0FF;'>
    <option value='0' style='background-color:#25F0FF;'>   </option>
    <option value='1' style='background-color:#0000FF;'>   </option>
    <option value='2' style='background-color:#FF0000;'>   </option>
    <option value='3' style='background-color:#00FF00;'>   </option>
    <option value='4' style='background-color:#000000;'>   </option>
</select>

CSS

#S1 { 
    width: 150px;
}

JavaScript

$('#S1 option').each(function () {
     $(this).data('rgb', $(this).css('background-color'))
 })
 $("#S1").change(function () {
     var selrgb=$(this).find(':selected').css('backgroundColor');
     var selrgb_=$(this).find(':selected').css('background-color');
     var selcol = $(this).find(':selected').data('rgb');
     console.log("backgroundColor: "+selrgb+"\nbackground-color: "+selrgb_ +"\ndata-color: "+ selcol);
$(this).css("background-color", selcol).trigger('blur');
 });