[Color swatches Image ]- How to make a color swatches images on PDP page ?

Put the following code into main-product.liquid file on variant lebel

% if option.name == 'Color' %}
    <label class="color-swatch" 
    style="background-image:url({{ value | append:'.png' | file_url }})" 
    for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
    </label>
{% else %}
    <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
    {{ value }}
    </label>
{% endif %}

css code :-

/*section-main-product.css*/
.product-form__input input[type=radio]+label.color-swatch{
  height:40px;
  width:40px;
  border-radius:100%
}

.product-form__input input[type=radio]:checked+label.color-swatch{
  box-shadow: 0 0 0 2px #000;
  transition: box-shadow .2s ease
}

.product-form__input input[type=radio]+label.color-swatch::before{
  content:"";
  border: 3px solid #fff;
  border-radius:100%;
  z-index:1;
  position: absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
}

References:-