Algorithmia Color Tool

1. Generate Color Palettes: Extract and suggest colors from images or generate palettes based on predefined colors using the “Get Color Palette” data call.

2. Convert RGB to Hex: Easily transform RGB color values into their corresponding hexadecimal format for versatile color manipulation.

3. Authorization Headers: Configure separate authorization headers for development and production environments for secure API integration.

4. Seamless Integration: Works effortlessly with Algorithmia’s API to deliver powerful color processing capabilities.

• Open your Bubble Editor.

• From the left panel, go to the Plugins tab.

• Click the Add Plugins button.

• In the search bar, type Algorithmia Color Tool.

• Locate the Algorithmia Color Tool plugin by Zeroqode and click Install (or Buy if it’s a paid plan).

• After installation, it will appear under Installed plugins.

• Open the Plugins tab

• Click Algorithmia Color Tool

• In the plugin settings, locate the API Key field

• Enter your key in the following format:

• Simple YOUR_API_KEY_HERE

The word Simple must come before the API key for authentication to work correctly.

• Select the page (or the parent group containing the palette UI).

• Add a custom state:



• Name: palette
• Type: text
• List: yes (if displaying multiple colors)

• Select the Get Palette button.

• Create a workflow:
• When Button Get Palette is clicked



• Value:
Get Color Palette’s result



• Set state → palette
(map the returned HEX color values as text)

The plugin returns colors ordered by dominance — the most prominent colors appear first.

• Bind text elements (e.g. “Parent group’s text”) to the palette custom state.

• Optionally:
• Use repeating groups to show multiple colors
• Apply each HEX value as a background color for preview boxes
• Copy colors for use in themes or style

• Click Preview in the Bubble editor to run your app.

• Trigger the Get Palette action (for example, by clicking a button).

• Confirm that:
• The image is successfully analyzed
• A color palette is returned
• The extracted colors display correctly or are saved to your custom state or database

• Test with different image URLs to ensure consistent results.

• Verify the workflow on both desktop and mobile layouts.

If no colors appear, double-check that the image URL is publicly accessible and starts with http:// or https://.

json
{
  "main_color": "undefined",
  "palette": {
    "palette item 1": "undefined"
  },
  "metadata content_type": "text",
  "metadata duration": "number"
}

• main_color – The most dominant color detected in the image.

• palette – A list of additional dominant colors extracted from the image.

• metadata content_type – The detected content type of the processed image.

• metadata duration – The processing time taken to analyze the image.

json
{
  "hex value": "text",
  "hex clean": "text",
  "rgb fraction r": "number",
  "rgb fraction g": "number",
  "rgb fraction b": "number",
  "rgb r": "number",
  "rgb g": "number",
  "rgb b": "number",
  "rgb value": "text",
  "hsl fraction h": "number",
  "hsl fraction s": "number",
  "hsl fraction l": "number",
  "hsl h": "number",
  "hsl s": "number",
  "hsl l": "number",
  "hsl value": "text",
  "hsv fraction h": "number",
  "hsv fraction s": "number",
  "hsv fraction v": "number",
  "hsv value": "text",
  "hsv h": "number",
  "hsv s": "number",
  "hsv v": "number",
  "name value": "text",
  "name closest_named_hex": "text",
  "name exact_match_name": "yes/no",
  "name distance": "number",
  "cmyk fraction c": "number",
  "cmyk fraction m": "number",
  "cmyk fraction y": "number",
  "cmyk fraction k": "number",
  "cmyk value": "text",
  "cmyk c": "number",
  "cmyk m": "number",
  "cmyk y": "number",
  "cmyk k": "number",
  "XYZ fraction X": "number",
  "XYZ fraction Y": "number",
  "XYZ fraction Z": "number",
  "XYZ value": "text",
  "XYZ X": "number",
  "XYZ Y": "number",
  "XYZ Z": "number",
  "image bare": "text",
  "image named": "text",
  "contrast value": "text",
  "_links self href": "text"
}

• hex value / hex clean – The resulting HEX color code.

• rgb / hsl / hsv / cmyk / XYZ – Color representations across multiple color models.

• name value – Closest named color match (if available).

• contrast value – Suggested contrast value for accessibility considerations.

json
{
  "main_color": "undefined",
  "palette": {
    "palette item 1": "undefined"
  },
  "metadata content_type": "text",
  "metadata duration": "number"
}

• main_color – The most dominant color detected in the image.

• palette – A list of additional dominant colors extracted from the image.

• metadata content_type – The detected content type of the processed image.

• metadata duration – The time taken to process and analyze the image.

json
{
  "hex value": "text",
  "hex clean": "text",
  "rgb fraction r": "number",
  "rgb fraction g": "number",
  "rgb fraction b": "number",
  "rgb r": "number",
  "rgb g": "number",
  "rgb b": "number",
  "rgb value": "text",
  "hsl fraction h": "number",
  "hsl fraction s": "number",
  "hsl fraction l": "number",
  "hsl h": "number",
  "hsl s": "number",
  "hsl l": "number",
  "hsl value": "text",
  "hsv fraction h": "number",
  "hsv fraction s": "number",
  "hsv fraction v": "number",
  "hsv value": "text",
  "hsv h": "number",
  "hsv s": "number",
  "hsv v": "number",
  "name value": "text",
  "name closest_named_hex": "text",
  "name exact_match_name": "yes/no",
  "name distance": "number",
  "cmyk fraction c": "number",
  "cmyk fraction m": "number",
  "cmyk fraction y": "number",
  "cmyk fraction k": "number",
  "cmyk value": "text",
  "cmyk c": "number",
  "cmyk m": "number",
  "cmyk y": "number",
  "cmyk k": "number",
  "XYZ fraction X": "number",
  "XYZ fraction Y": "number",
  "XYZ fraction Z": "number",
  "XYZ value": "text",
  "XYZ X": "number",
  "XYZ Y": "number",
  "XYZ Z": "number",
  "image bare": "text",
  "image named": "text",
  "contrast value": "text",
  "_links self href": "text"
}

• hex value / hex clean – The converted HEX color code.

• rgb / hsl / hsv / cmyk / XYZ – Color representations across multiple color models.

• name value – The closest named color match (if available).

• contrast value – Suggested contrast value for accessibility considerations.

• Automatically generating brand or theme colors

• Extracting dominant colors from images

• Creating dynamic UI styles based on images

• Bubble Plugin Page Update (GIF).

• fixed action 'Get Palette'.

• Marketing update (minor change).

• Minor update (Marketing update).

• Minor update (Marketing update).

• Minor update (Marketing update).

• Minor update .

• Updated demo/service links.

• Updated description.

• updated description.

• updated description.

• minor updates.

• updated description.

• Updated Text to Make Calls Easier to Understand.

• Added More Colors Options to Convert .

• Added RGB to HEX API call.

• Updated Call Types.

• Updated Description.

• First Plugin Submit.