# Mapping a CSS gradient based on numerical or percentage scale

**URL:** <https://forum.inductiveautomation.com/t/mapping-a-css-gradient-based-on-numerical-or-percentage-scale/90063>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 7, 2024, 8:07pm UTC](https://forum.inductiveautomation.com/t/mapping-a-css-gradient-based-on-numerical-or-percentage-scale/90063 "2024-05-07T20:07:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bushmatic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bushmatic/32/87014_2.png) [@Bushmatic](https://forum.inductiveautomation.com/u/Bushmatic)\
**Post date:** [May 7, 2024, 8:07pm UTC](https://forum.inductiveautomation.com/t/mapping-a-css-gradient-based-on-numerical-or-percentage-scale/90063/1 "2024-05-07T20:07:45Z")

</div>

Suppose I have this gradient:

`linear-gradient(green, yellow, red)`

I'd like to map color values from the gradient on a percentage basis... 100% would be pure green, 50% would be pure yellow, 0% would be pure red. The percent value exists somewhere easily accessible by an expression or script, like a custom property or a label component.

I want to be able to output (or bind) 1 singular color (NOT a gradient, but rather 1 color pulled out of the gradient) at any given moment of time corresponding to the percentage value. Is there an easy way to do this? If my percentage were, say, 25%, I'd like the color output to be halfway between red and yellow (i.e. orange). Maybe there is a Python function or expression function that can do this?

---

<div class="post-metadata">

**Author:** ![Patrick\_Fuller](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/patrick_fuller/32/61996_2.png) [@Patrick\_Fuller](https://forum.inductiveautomation.com/u/Patrick_Fuller)\
**Post date:** [May 7, 2024, 9:25pm UTC](https://forum.inductiveautomation.com/t/mapping-a-css-gradient-based-on-numerical-or-percentage-scale/90063/2 "2024-05-07T21:25:36Z")

</div>

```python
def interpolate_color(color1, color2, factor):
    """Interpolate between two colors."""
    # Generate a color by linearly interpolating between two colors based on the factor (0 to 1)
    return tuple(int(c1 + (c2 - c1) * factor) for c1, c2 in zip(color1, color2))

def get_color_from_gradient(percentage):
    # Define RGB colors for green, yellow, and red
    green = (0, 255, 0)
    yellow = (255, 255, 0)
    red = (255, 0, 0)

    if percentage >= 50:
        # Interpolate between green and yellow
        # Map the percentage from range 100-50 to 0-1
        factor = (percentage - 50) / 50.0
        return interpolate_color(yellow, green, factor)
    else:
        # Interpolate between yellow and red
        # Map the percentage from range 50-0 to 0-1
        factor = percentage / 50.0
        return interpolate_color(red, yellow, factor)

def color_to_hex(color):
    """Convert an RGB tuple to a hexadecimal string."""
    return '#%02x%02x%02x' % color

# Example usage
percentage = 25 # You can replace this value with any percentage
color_at_percentage = get_color_from_gradient(percentage)
hex_color = color_to_hex(color_at_percentage)
print("Color at {}% is {}".format(percentage, hex_color))

```

This should get you most of the way

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 7, 2024, 9:40pm UTC](https://forum.inductiveautomation.com/t/mapping-a-css-gradient-based-on-numerical-or-percentage-scale/90063/3 "2024-05-07T21:40:00Z")

</div>

I'm not proud of this, but it it's an expression which will perform better than a script and works for red, yellow, green. Add the script below into an expression binding on the component background.

![RYG background indicator](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/080c636b045fd9a93029e7b1ed91250acbb416f7.gif)

Note that the hex colors go from

```python
red #FF0000
yellow #FFFF00
green #00FF00

```

so most of the expression is trying to handle the "both on" in the middle.

> **Background expression binding**
>
> ```python
> "#" 
> + right("0" // Red
> + toHex(
> if(
> {../Slider.props.value} < 50, 
> 255,
> 256 - ({../Slider.props.value} - 50) * 5.11
> )
> )
> , 2)
> + right("0" // Green
> + toHex(
> if(
> {../Slider.props.value} < 50, 
> ({../Slider.props.value} - 50) * 5.11,
> 255
> )
> )
> , 2)
> + "00" // Blue
> 
> ```

Please think carefully about why you're doing this. Color can introduce a lot of visual clutter. See [High Performance HMI Techniques | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/vision/common-tasks-in-vision/high-performance-hmitechniques) for some explanation of current thinking.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [May 7, 2024, 9:53pm UTC](https://forum.inductiveautomation.com/t/mapping-a-css-gradient-based-on-numerical-or-percentage-scale/90063/4 "2024-05-07T21:53:03Z")

</div>

> **[gradient | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/expression-functions/colors/gradient)**
>
> Calculates a percentage given the three numeric arguments number, low, and high.

Have to do some manipulation to get it to a web-safe color at the end, but the `gradient` built-in expression function will do a super basic linear interpolation across two colors for you.