How to set color hex code opacity in Bubble.io

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble tutorial video we share a quick color opacity trick at that came up in a Bubble Coaching call. Learn how you can make your hex code colors semi-transparent in this video.

and icons. As a quick recap, what I'm doing here is I'm storing an icon as a expression. Let me show you.

Using Font Awesome Library in Bubble


So here's my dashboard and I'm storing an icon as a text expression. I've taken this from the
library which is the built-in icon pack in Bubble. And I'm expressing it through a text label element just like this by using the BB code, square brackets, FA, close square brackets. And then the text label for the icon.

Color and Transparency with Hex Code


What I want to draw your attention to though here is that I've got a color for the icon and then I've got a semi-transparent color or a reduced opacity color for the background color. And you can do that using hex codes. And this is what I found out with the
client is that hex code has got six digits to it. But you can add two more digits to the end and that sets a transparency.

Implementing Hex Opacity with Bubble


And so I just go with hex opacity table and I found this guy's website. And effectively if I want 20% opacity, I add 33 to the end. And so that's allowed me in data, again going to dashboard, here's my dashboard icon color and here is it with 33 added to the end. I've gone through and I've done that on all of my colors and that results in me having a design like this.

Final Thoughts on Hex Code and Transparency


So quite a niche aspect, quite a niche thing, but I thought this was quite a cool implementation of something that I covered in the previous video. And if you like our previous videos and if you like this one, please like and subscribe. And also we've got even more videos than you can find anywhere else, not even on our YouTube channel. We have more videos at planetlokode.com. It's really well worth your time getting a membership there if you are