<ul class="item-swatch kkk">
{% for option in product.options %}
  {% if option == 'Color' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
  {% if variant.available %}
  {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
   {% endif %}
  {% unless colorlist contains color %}

      {% assign text = color | handleize %}

      <li>
        <label style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>

        {% if variant.image != null %}
        <div class="hidden">
          <a href="{{ variant.image.src | product_img_url: 'large' }}"></a>
        </div>
        {% endif %}
      </li>

        {% capture tempList %}
          {{ colorlist | append: color | append: ' ' }}
        {% endcapture %}

        {% assign colorlist = tempList %}
      {% endunless %}

    {% endfor %}
  {% endif %}
{% endfor %}
</ul>