[HOW TO] Generate a color based on a value / number

Hi there!
In this step by step tutorial, we will see how to dynamically generate a color according to a value and a max value (or percentage).

A great example of a real use case would be to display offers with prices, and change the color according to the price. Or display a grade out of 10 visually.

Here is an example

EASY :star2: This tutorial is for everyone.


We will need the Percent Color plugin, available for $3 per month.
This tutorial works on any Bubble plan.


1. Add the Percent Color plugin to your application

In the “Plugin” tab of your application editor, click on “Add a plugin” and search for “Percent Color”
Subscribe or buy the plugin.

2. Initial setup

The Percent Color plugin will work through a page element and will give you the final color through a state of this element. Once you added the plugin to your app, place the Percent Color element on the page.

In the plugin element properties popup, you can define the values and colors used to generate your final color.

The start color and the end color correspond to the gradient on which you want to generate a color.

The max value corresponds to the value where the end color will be reached. (Start color is the color for the value 0 and end color is the value for the Max Value)

You may leave the max value to 100 if you will use current value formatted as a percent.

3. Retrieve and use the final color

The element expose the final color as a state.

To access this state, search for Percent Color's Render Color (hex). The value is formatted as an hex color (#ff22fe) including the #.

There is an example of how to make a text use the result color as the font color.

4A. Concrete use-case

I want to work on a gradient that goes from BLUE to RED . I want the color respond to my input, and based on the max input from a list.

—>I want to generate a color for the dynamic value INPUT on a dynamic scale of 0 to THE MAX INPUT .

Here is the required configuration:


:link: Demo application: https: //plugin-demo-iframe.bubbleapps …
:link: Demo editor: https://bubble.io/page?name=index&id…

If you need help or want to take the plugin further, please refer to the full documentation.
:link: Documentation: https://www.notion.so/Embed-iFrame-Detector-…

This tutorial is produced by the French platform Ottho.
Progressez plus vite.


1 Like

How can i convert it into rgba?

No, but if it’s a needed feature I can add it for you.

Otherwise, you might be able to find other plugins that can convert colors on the marketplace.


Yea that would be great, because i am inserting the result into progress bars pro circle bar as a end color and it turns out hex even though rgba is necessary.

Thanks for your suggestion @lankri.erez : we added the feature


  • Result colour is now also expressed as an RGBA colour
1 Like

How can i apply the RGBA color switch?
It only has the renders as hex option…

When i enter dynamic precentage it doesent work…

Wonderful plugin!

1 Like