How to set color hex code opacity in Bubble.io

Introduction to Dynamic Icons with Option Sets

In this Bubble tutorial video, I want to share with you a quick trick that I worked out with a Bubble coaching client a few days ago. This picks up from the last video we published, which was about Option sets and icons.

Storing Icons as Text Expressions

As a quick recap, what I'm doing here is storing an icon as an Expression. Let me show you. Here's my dashboard, and I'm storing an icon as a text expression. I've taken this from the Font Awesome version 3 version 4 library, in fact, and that allows me to store icons in option sets. You could, of course, store an image and use that as an icon or maybe an SVG, I'm not sure, but anyway, this is enabling me to use the Font Awesome library, which is the built-in icon pack in Bubble.

Using BBCode for Icon Display

I'm expressing it through a text Label element just like this by using the BBCode Square brackets FA close square brackets and then the text label for the icon. What I want to draw your attention to, though, 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.

Using Hex Codes for Opacity

You can do that using hex codes. This is what I found out with the Bubble coaching client. Your hex code has got six digits to it, but you can add two more digits to the end, and that sets a transparency. I just searched for "hex opacity table" and found this guy's website. Effectively, if I want 20% opacity, I add 33 to the end.

Implementing Opacity in Bubble.io

That's allowed me in Data again, go on to dashboard. Here's my dashboard icon color, and here it is 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.

Conclusion and Call to Action

So, it's 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. If you like our previous videos, and if you like this one, please like and subscribe. Also, we've got even more videos than you can find anywhere else, not even on our YouTube channel. We have more videos at planetnocode.com. It's really well worth your time getting a membership there if you are learning Bubble and joining our no code Bubble app builder community there. If there's anything else you'd like to see done with option sets or icons, please leave a comment below and like.