Adaptive Colour Scaler

I built this proof of concept as a way of allowing app users configure their app theme colours. I had a use case where admins would set up ‘events’ via an admin portal. The event would then be interacted with by end users via a mobile app. Each event would have distinct theming, livery, and imagery, but all using the same app template. Instead of building a new app each time, I allowed the admins to modify the look and feel of the mobile app using UI features in their admin portal.

The concept uses formulas to calculate Red, Green and Blue values from the position of the bottom slider, which returns a decimal between 0 and 1. While initially it was tricky to work out how to modify each number, I mapped out the key points on the colour spectrum and noted what values the RGB properties took on at each point.

Here’s what I roughly wanted the colour to be at each point in the slider:

By studying the RGB properties of a standard tone for each colour (for example, pure red would be #FF0000), I identified patterns that, if applied to the RGBA() function, would reliably reproduce the intended colours. I then translated these into rules for every 0.25 of the slider value. This may be staying at zero, staying at 255, or sliding between those numbers, or 127 (the midpoint).

Fortunately, it didn’t get more complex than this. Using the With() function afforded some readability to the code, as I was able to define my fixed and sliding values in one place before using them for the R, G and B values. Here’s how the code turned out:

First, I capture the current value. This makes the solution easy to port as all it needs is a percentage value:

With(
    {
        Value:sldColourSlider.Value / 100
    }, ...

Here’s the Red value:

Switch(
    true,
    // red-yellow, stick at 255
    Value < 0.25, 
    255,
    // yellow-green, slide to 127
    Value < 0.5,
    255 - ((127 * (Value - 0.25)) / 0.25),
    // green-blue, slide to 0
    Value < 0.75,
    127 - (127 * ((Value - 0.5) * 2)),
    // blue-red, slide to 255 
    255 * ((Value - 0.75) / 0.25)
)

The comments are self-explanatory – as mentioned before we are moving around the values of 0, 127 and 255. The bracketed formulas isolate a value between 0 and 0.25 from the current slider value. This could also be added to an additional With() function to further improve readability.

Green and Blue follow a similar pattern:

// green
Switch(
    true,
    // red-yellow - slide to 255
    Value < 0.25, 
    (Value / 0.25) * 255,
    // yellow-green, stick at 255 
    Value < 0.5,
    255,
    // green-blue, slide to 127
    Value < 0.75,
    255 - (127 * ((Value - 0.5) / 0.25)),
    // blue-red, slide to 0,
    127 - (127 * ((Value - 0.75) / 0.25))
)

// blue
Switch(
    true,
    // red-yellow, stick at 0
    Value < 0.25,
    0,
    // yellow-green, stick at 0,
    Value < 0.5,
    0,
    // green-blue, slide to 255
    Value < 0.75,
    255 * ((Value - 0.5) / 0.25),
    // blue-red, slide to 0
    255 - (255 * ((Value - 0.75) / 0.25))
)

This gives us a fully dynamic use of the RGBA() function. We can save the individual values, either separately or as a concatenated string, to the datasource or device to allow the selection to be recalled on a future session. If needed, we can use ColorFade() to control the lightness of the colour (as we do in the video above with a second slider).

I have some further developments on user colour selection which I’ll link when they are uploaded.