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.
EASY 
This tutorial is for everyone.
PRERIQUISITES
We will need the Percent Color plugin, available for $3 per month.
This tutorial works on any Bubble plan.
POURCENT COLOR
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:
LINKS
Demo application: https: //plugin-demo-iframe.bubbleapps …
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.
Documentation: https://www.notion.so/Embed-iFrame-Detector-…
This tutorial is produced by the French platform Ottho.
Progressez plus vite.
