Shopify file_url isn't showing correctly

Question

I'm editing the following

{% for option in product.options %}
{% if option == 'Colour' %}
   {% assign index = forloop.index0 %}
   {% assign colorlist = '' %}
   {% assign color = '' %}

      {% for variant in product.variants %}
      {% capture color %}{{ variant.options[index] }}{% endcapture %}
      {% unless colorlist contains color %}

      <button class="product-colour__item">
      <label class="product-colour__item-label" style="background-image:url("{{ color | downcase | handleize | append: '.png' | file_url }}");">
      </label>
      </button>

      {% capture tempList %}{{colorlist | append: color | append:''}}{% endcapture %}
      {% assign colorlist = tempList %}
      {% endunless %}
      {% endfor %}

{% endif %}
{% endfor %}

and it's meant to show like:

style="background-image:url("//cdn.shopify.com/s/files/1/0584/2419/7328/products/deep-rose.png");

instead its showing like:

style="background-image:url(" cdn.shopify.com s files 1 0584 2419 7328 deep-rose.png");

I know it's missing the /products/ as well as the rest of it. What am I doing wrong?