How to Calculate New Color

[ken1]

I have a color that is user defined.

I want to display this color as a lighter percentage. For example, if the color is #cc00ff and I want the color that is equvalent to 5% transparency (with a white background), the color will be #fae6ff.

I got those values from HTML Color Picker.

I can’t just use transparency because I need the background color of my object to be solid, so I need the solid color that looks the same as 5% transparency on a white background.

How can I calculate this based on a user-selected color?

Thanks!

[jonah.deleseleuc]

Hey there,

I’ve found myself in this predicament before. Do you know about the difference between HEX and RGBA standards?

HEX is a 6 digit code you are familiar with (for example, #000000 is black)

RGBA is (red, green, blue, alpha) => (255, 255, 255, 1) makes white. The alpha channel (A, the last number) is what allows you to control transparency.

Unfortunately, HEX doesn’t support the alpha channel directly this way. Bubble uses a HEX + transparency selector (X%) color picker and unfortunately the transparency selector doesn’t support dynamic data.

What you can do to resolve your issue:

• Choose colors your users can use and make an option set. Create a predefined gradient of colors by creating attributes (for each color you can have several gradient options).
• You can play with the element opacity to mimic the alpha channel. If you go this wrote, make sure you use a background element in an align to parent container that sits behind the content. Otherwise, the opacity will affect the visibility of not just the color

In my view these are the most vanilla solutions possible. I hope bubble allows RGBA inputs one day

Have a good one,

Jonah

[ken1]

I figured this out. I am using a Run Javascript to calculate the new color and theToolbox Javascript2Bubble element to return the data and set the new color as necessary.

Here is the JS code I ended up with (your app may need different specifics, but the basic idea is here). Both This ColorPicker's Color and Parent group's Area's unique id are dynamic values from Bubble:

// Function to convert hex to RGB
function hexToRgb(hex) {
    // Remove # if present
    hex = hex.replace('#', '');
    
    // Parse the hex values
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    
    return {r, g, b};
}

// Function to convert RGB to hex
function rgbToHex(r, g, b) {
    return '#' + [r, g, b].map(x => {
        const hex = Math.round(x).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    }).join('');
}

// Function to blend with white background at variable opacity
function blendWithWhite(color, opacity) {
    const white = {r: 255, g: 255, b: 255};
    return {
        r: color.r * opacity + white.r * (1 - opacity),
        g: color.g * opacity + white.g * (1 - opacity),
        b: color.b * opacity + white.b * (1 - opacity)
    };
}

// Get the original hex color from properties
const originalHex = "This ColorPicker's Color";

const areaUniqueId = "Parent group's Area's unique id";

// Convert to RGB
const originalRgb = hexToRgb(originalHex);

// Blend with white at 5% opacity
const blendedColor = blendWithWhite(originalRgb, 0.05);

// Convert back to hex
const finalHex = rgbToHex(blendedColor.r, blendedColor.g, blendedColor.b);

// Pass the finalHex value to Bubble
bubble_fn_setActionGroupColor(
{ 
output1: finalHex, 
output2: areaUniqueId,
output3: originalHex
}  );