Shopify / Liquid: Separate a group of tags, then placing them on a select component - collections

Question

I have a large set of tags, and I want to be able to sepparate them. For example, I have the Green, Blue, Red, Black, Colorless and White tags (as well as some other tags that aren't colors, so I won't put them here) and I want to place them in an array.
I tried with something like this:
{% assign colors = "" | split: '' %}
{% for tag in collection.all_tags %}
{% if tag == 'Black' or tag == 'Blue' or tag == 'Colorless' or tag == 'Red' or tag == 'White' %}
{% assign comma = "," %}
{% assign color = tag | split: '_' %}
{% assign colors = colors | concat: color %}
{% assign colors = colors | concat: comma %}
{% endif %}
{% endfor %}
However, that returns me BlackBlueGreenRedColorlessWhite, without any spaces whatsoever. Also, is there a way I can place those selected tags in a <select> component so I can filter my products by the selected tag? Like in the example provided in this page but using a <select> instead of a <ul>.

Answer 1

first, categorizes your tag by having a label;
i.e: color-blue, color-red, color-green, etc.
why? You will not need to add more if-else statement;
then, with code below, you will get an array of color;
{% assign color = "" %}
{% for tag in collections.all_tags %}
{% if tag contains 'color-' %}
{% assign trimmed = tag | split: "-" | last %}
{% assign color = color | append: trimmed | append: ", " %}
{% endif %}
{% endfor %}
{% assign color = color | split: ", " %}
<select name="color" id="color">
{% for x in color %}
<option value="{{x}}">{{x}}</option>
{% endfor %}
</select>