Markdown card - what's wrong with this code for color font

Configuration Frontend
1

Hi there, I have a markdown card in which I use the info. from entity sensor.uv_index_clean. I won’t add to much information because I’m a newbie and I figure my problem is easy to spot. The only thing I will say is that the current value for sensor.uv_index_clean is 10.6 but the color of the text is lime, when it should be purple.
Ignore the grid part, there is an additional gauge in the grid but it’s not the focus here.

Thanks for your patience (first post here)

square: true
type: grid
columns: 2
title: UV Index
cards:
  - type: gauge
    segments:
      - from: 0
        color: lime
      - from: 2
        color: yellow
      - from: 5
        color: orange
      - from: 7
        color: red
      - from: 10
        color: purple
    max: 11
    needle: true
    entity: sensor.uv_index_clean
    min: 0
    name: Current UV
  - type: markdown
    content: >-
      <center><font size= "5"b>  <font color= {% set cat1 =
      states('sensor.uv_index_clean') %}
                         {% if cat1 < "2" %} lime
                         {% elif cat1 < "6" %} yellow
                         {% elif cat1 < "8" %} orange
                         {% elif cat1 < "10" %} red
                         {% else %} purple
                         {% endif %}>
    UV Index
2

You need to convert your values to INT and then it will work. I also adjusted your numbers to reflect the actual scale colours.

uv-index
uv-index881×621 25.2 KB

square: true
type: grid
columns: 2
title: UV Index
cards:
  - type: gauge
    segments:
      - from: 0
        color: lime
      - from: 3
        color: yellow
      - from: 6
        color: orange
      - from: 8
        color: red
      - from: 11
        color: purple
    needle: true
    entity: sensor.mock_uv_index_sensor
    min: 0
    max: 13.5
    name: " "
  - type: markdown
    content: >-
      <center><font size="5"b><font color="{% set cat1 =
      states('sensor.mock_uv_index_sensor') %}
          {% if cat1|int <= 2 %} lime
          {% elif cat1|int <= 6 %} yellow
          {% elif cat1|int <= 8 %} orange
          {% elif cat1|int <= 10 %} red
          {% else %} purple
          {% endif %}">
      UV Index</font></center>
3

Try to use dashes with your brackets, IE.
{{ to {{-
}} to -}}
{% to {%-
%} to -%}

4

Check here also

5

If you haven’t figured it out yet, I have corrected my response as I didn’t read the question correctly initially.