Applying opacity dynamically for colors

[ihsanzainal84]

Just sharing something I only just found out. More of a silly “Why didn’t I try it” kind of discovery. You can apply opacity to colors dynamically by adding the opacity code to a hex color.

Example:
#002E45B2 - B2 is the opacity code

You can use any color picker like Pickr to get color codes with opacity.

Works dynamically so if you apply colors dynamically it works during runtime. Feel so dumb for not realizing this earlier.

[Newed]

Yeah, you can use an Option Set with “opacity” (alpha) codes to create any combination with any hex code.

[J805]

I think I have done something like this with numbers:

Opacity reference:
• 00 = 0% (fully transparent)
• 50 ≈ 31%
• 80 ≈ 50%
• FF = 100% (fully opaque)

[sudsy]

@ihsanzainal84

You can apply opacity to colors dynamically by adding the opacity code to a hex color.

Bubble recognizes more than just hex codes for color. For transparency, the rgba format is a bit more intuitive since the transparency (alpha) can be specified as a decimal fraction between 0 and 1. (Although the working example is no longer accessible, the following post and screenshot are still informative.)

[Colorama] Here's how to dynamically manipulate colors

Just wanted to share something that might not be widely known… Most of us have typed or copied/pasted hex codes into color fields in the Bubble editor. But did you know that most color fields also accept dynamic expressions which evaluate to a text (string) representing a color? The text expression can be in one of at least 3 formats - hex codes, rgb, or rgba. Following is the color yellow in each format: #FFFF00 rgb(255,255,0) rgba(255,255,0,0) The “a” stands for “alpha channel”. It repres…

EDIT

[Newed]

Like @J805 said, you can use the following codes applied to hex colors to set transparency.

• 100% — FF
• 99% — FC
• 98% — FA
• 97% — F7
• 96% — F5
• 95% — F2
• 94% — F0
• 93% — ED
• 92% — EB
• 91% — E8
• 90% — E6
• 89% — E3
• 88% — E0
• 87% — DE
• 86% — DB
• 85% — D9
• 84% — D6
• 83% — D4
• 82% — D1
• 81% — CF
• 80% — CC
• 79% — C9
• 78% — C7
• 77% — C4
• 76% — C2
• 75% — BF
• 74% — BD
• 73% — BA
• 72% — B8
• 71% — B5
• 70% — B3
• 69% — B0
• 68% — AD
• 67% — AB
• 66% — A8
• 65% — A6
• 64% — A3
• 63% — A1
• 62% — 9E
• 61% — 9C
• 60% — 99
• 59% — 96
• 58% — 94
• 57% — 91
• 56% — 8F
• 55% — 8C
• 54% — 8A
• 53% — 87
• 52% — 85
• 51% — 82
• 50% — 80
• 49% — 7D
• 48% — 7A
• 47% — 78
• 46% — 75
• 45% — 73
• 44% — 70
• 43% — 6E
• 42% — 6B
• 41% — 69
• 40% — 66
• 39% — 63
• 38% — 61
• 37% — 5E
• 36% — 5C
• 35% — 59
• 34% — 57
• 33% — 54
• 32% — 52
• 31% — 4F
• 30% — 4D
• 29% — 4A
• 28% — 47
• 27% — 45
• 26% — 42
• 25% — 40
• 24% — 3D
• 23% — 3B
• 22% — 38
• 21% — 36
• 20% — 33
• 19% — 30
• 18% — 2E
• 17% — 2B
• 16% — 29
• 15% — 26
• 14% — 24
• 13% — 21
• 12% — 1F
• 11% — 1C
• 10% — 1A
• 9% — 17
• 8% — 14
• 7% — 12
• 6% — 0F
• 5% — 0D
• 4% — 0A
• 3% — 08
• 2% — 05
• 1% — 03
• 0% — 00

[carlovsk.edits]

Imagine having to register all of this in an Option Set? lol

I found a much cleaner solution: just use the toolbox expression element.

I created this expression, and in the variable I pass the dynamic value I want (from 0 to 100), and it returns the value in hex code:

Here’s the code:

(() => {
const pct = VALUE;
const v = Math.round(255 * pct / 100);
return v.toString(16).padStart(2, '0').toUpperCase();
})()

[Newed]

Obviously, you don’t need to add all 100 levels, especially since the actual visual difference between 89% and 90%, for example, is almost imperceptible.

You can use multiples of 5% or 10%. This will be enough in most cases.

In this case, it’s much easier to reference an option set that is available throughout your app than to create expressions here and there across the app using the toolbox (possibly conditional ones, if you need different opacities in different scenarios).

Even if you use a reusable element or something similar, it will still be more laborious and less maintainable than the option set approach.

Code solves many problems, allows you to expand/abstract many things, but you know, it’s not always necessary.

Additionally, you can search your entire app using the App Search Tool to find all the places where a specific opacity from the option set is applied to (rarely necessary, but who knows?).

[carlovsk.edits]

Perfect, my friend! I agree with you. If I were actually going to do this in a job, the option set with multiples of 10 would probably work perfectly…

I wanted to bring up an option in code that could help other people too.

In the end, it all depends on what you want to do… But there’s always more than one way to do it.