function to render similor or best match color swatch in shopify

Question

i,m facing an issue using Pipeline theme and in many of my products having custom color variants like "Green/White" or "New Light Coral" but can see in theme code in swatches.json there,s only colors for { "coral": "#ff7f50" }, { "green": "#008000" }, { "ivory": "#f5ecda" so i want to show best match or similor color to my products like for "Green/White" color it should show "green": "#008000" and for "New Light Coral" it should show "coral": "#ff7f50" on color swatch below is the theme liquid which is responsible to render the color template-swatch.liquid

{%- if settings.swatches_enable and settings.swatches_collection_enable -%}
  <script data-swatch-template type="text/x-template">
    <radio-swatch class="swatch__button{% if settings.swatches_squares %} swatch__button--square{% endif %}">
      {% raw %}
        <input type="radio"
          name="grouped-{{ it.product_id }}"
          value="{{ it.color }}"
          id="{{ it.uniq }}"
          tabindex="-1">
        <label for="{{ it.uniq }}"
          data-swatch="{{ it.color }}"
          data-swatch-variant="{{ it.variant }}"
          data-swatch-image="{{ it.image }}"
          data-swatch-image-id="{{ it.image_id }}"
          data-swatch-index="{{ it.index }}"
          tabindex="0">
          <span class="visually-hidden">{{ it.color }}</span>
        </label>
      {% endraw %}
    </radio-swatch>
  </script>
{%- endif -%}

i,m tryiing to make a function but its not applying below is my script to do my task

{%- if settings.swatches_enable and settings.swatches_collection_enable and settings.show_swatches_in_sidebar -%}
  <script data-swatch-template type="text/x-template">
    <radio-swatch class="swatch__button{% if settings.swatches_squares %} swatch__button--square{% endif %}">
      {% raw %}
        <input type="radio"
          name="grouped-{{ it.product_id }}"
          value="{{ it.color }}"
          id="{{ it.uniq }}"
          tabindex="-1">
        <label for="{{ it.uniq }}"
          data-swatch="{{ it.color }}"
          data-swatch-variant="{{ it.variant }}"
          data-swatch-image="{{ it.image }}"
          data-swatch-image-id="{{ it.image_id }}"
          data-swatch-index="{{ it.index }}"
          tabindex="0">
          <span class="visually-hidden">{{ it.color }}</span>
        </label>
        {%- if it.color_contains_slash -%}
          {% assign custom_color_parts = it.color | split: '/' %}
          {%- assign found_custom_color = false -%}

          {%- for part in custom_color_parts -%}
            {%- assign swatch_entry = swatches | map: part | compact | first -%}
            {%- if swatch_entry -%}
              <div class="custom-color-swatch" style="background-color: {{ swatch_entry }}"></div>
              {%- assign found_custom_color = true -%}
              {%- break -%}
            {%- endif -%}
          {%- endfor -%}

          {%- unless found_custom_color -%}
            {%- assign closest_color = find_closest_color(custom_color_parts) -%}
            {%- if closest_color -%}
              <div class="custom-color-swatch" style="background-color: {{ closest_color }}"></div>
            {%- endif -%}
          {%- endunless -%}
        {%- endif -%}
      {% endraw %}
    </radio-swatch>
  </script>
{%- endif -%}