Link to the plugin page: https://zeroqode.com/plugin/color-pro-plugin-for-bubble-1695289788319x880814197914610300
Demo to preview the plugin:
Introduction
Access all the color variations you’ve defined and have the ability to make adjustments. This useful no-code plugin contains the essential tools for enhancing your color palette.
Tools included:
- Get Format
- Get Original Input
- Is Valid
- Get Brightness
- Is Light
- Is Dark
- Get Luminance
- Get Alpha
- Lighten
- Brighten
- Darken
- Desaturate
- Saturate
- Analogous
- Monochromatic
- Triad
- Tetrad
- Complement
- Random
- Clone
- To Hsv
- To Hsv String
- To Hsl
- To Hsl String
- To Hex
- To Hex String
- To Hex 8
- To Hex 8 String
- To Rgb
- To Rgb String
- To Percentage Rgb
- To Percentage Rgb String
- To Name
- To Filter
- To String
How to setup
- Add the Color Element
- In your Bubble editor, go to the Design tab.
- Search for the element called Color.
- Drag and drop it onto your page.
- Configure the Element Properties
- Adjust the element properties to define how you want to handle colors in your app (see below for properties details and Function Reference).
- Use the Color Action in Workflows
- Go to the Workflow tab in Bubble.
- Create or select an event where you want to manipulate colors.
- Add the action Color to your workflow and configure its parameters.
Plugin Element Properties
Color
Fields:
Title | Description | Type |
Color | The initial color value to process. Supports various formats such as HEX, RGB, RGBA, HSL, HSV, and color names (e.g. “red”, “blue”). | Text |
Function | Available options:
- Get Format,
- Get Original Input,
- Is Valid,
- Get Brightness,
- Is Light,
- Is Dark,
- Get Luminance,
- Get Alpha,
- Lighten,
- Brighten,
- Darken,
- Desaturate,
- Saturate,
- Analogous,
- Monochromatic,
- Triad,
- Tetrad,
- Complement,
- Random,
- Clone,
- To Hsv,
- To Hsv String,
- To Hsl,
- To Hsl String,
- To Hex,
- To Hex String,
- To Hex 8,
- To Hex 8 String,
- To Rgb,
- To Rgb String,
- To Percentage Rgb,
- To Percentage Rgb
- String, To Name,
- To Filter,
- To String | Dropdown |
Exposed states
Title | Description | Type |
Output | Returns the result of the color operation defined by the selected function. For instance, if the function is “To Rgb”, Output will contain the RGB representation of the color. | Text |
Plugin Actions
Color
Title | Description | Type |
Color | The input color value to analyze or transform. Accepts formats like HEX, RGB, RGBA, HSL, HSV, or color names. | Text |
Function | Available options:
- Get Format,
- Get Original Input,
- Is Valid,
- Get Brightness,
- Is Light,
- Is Dark,
- Get Luminance,
- Get Alpha,
- Lighten,
- Brighten,
- Darken,
- Desaturate,
- Saturate,
- Analogous,
- Monochromatic,
- Triad,
- Tetrad,
- Complement,
- Random,
- Clone | Dropdown |
Return Values:
Title | Description | Type |
Result | The output value resulting from the selected function. For example, it could be a transformed color value (e.g. lighter/darker color), a color format conversion (e.g. HEX to RGB), or a boolean indicating whether the color is valid or light/dark. | Text |
Function Reference
Below is a reference of all available color functions and what each of them does:
Function | Description |
Get Format | Returns the color format (e.g. HEX, RGB, etc). |
Get Original Input | Returns the raw input value of the color. |
Is Valid | Checks if the given color is valid. Returns true or false. |
Get Brightness | Returns a number representing the brightness of the color. |
Is Light | Returns true if the color is considered light. |
Is Dark | Returns true if the color is considered dark. |
Get Luminance | Returns the luminance value of the color. |
Get Alpha | Returns the alpha (transparency) value of the color. |
Lighten | Returns a lighter version of the color. |
Brighten | Increases the brightness without changing the hue. |
Darken | Returns a darker version of the color. |
Desaturate | Reduces the saturation of the color. |
Saturate | Increases the saturation of the color. |
Analogous | Returns an array of analogous color values. |
Monochromatic | Returns an array of monochromatic variations of the color. |
Triad | Returns a list of triadic color values. |
Tetrad | Returns a list of tetradic color values. |
Complement | Returns the complementary color. |
Random | Generates a random color. |
Clone | Returns a copy of the current color. |
To Hsv | Converts the color to HSV object format. |
To Hsv String | Converts the color to HSV string format. |
To Hsl | Converts the color to HSL object format. |
To Hsl String | Converts the color to HSL string format. |
To Hex | Converts the color to HEX format. |
To Hex String | Converts the color to a HEX string. |
To Hex 8 | Converts to 8-digit HEX format (includes alpha). |
To Hex 8 String | Converts to 8-digit HEX as a string. |
To Rgb | Converts the color to RGB object. |
To Rgb String | Converts the color to an RGB string. |
To Percentage Rgb | Converts to RGB percentage format. |
To Percentage Rgb String | Converts to RGB percentage string. |
To Name | Converts the color to a name (if it matches a named color). |
To Filter | Converts the color to a CSS filter string. |
To String | Returns the stringified version of the color object. |
