Bubble.io Color Picker, RGBA and Hex Color

Introduction to Color Pickers in Web Design

For web designers, when they think of colors, they're most likely thinking in terms of hex codes, just like this one here. This representing the dark purple color above. Let's choose a green and you'll see how the hex code changes to now a hex code that represents the green. In this Bubble tutorial, I'm going to show you how you can add in a color picker to your Bubble app, which would allow your users to change the color or set a color of things in your database. Let me show you how.

Adding a Color Picker Plugin to Your Bubble App

I'm going to go back into my Bubble app and I have a blank page here and I'm going to go into plugins, add plugin and search for color. There's a number of different color pickers available. I think I'm just going to go for probably this one by Zeroqode, air color picker. Then if I go back onto design and now search for the air color picker, I'm add it to my page and you can see it looks like a standard bit of UI that you'd expect to open up a color palette and there's a lot of different settings that you can customize on here, including presets. You might use option sets to have a list of preset colors.

Using the Color Picker and Displaying Color Values

By clicking on it, I get a palette here that I can change and hit select and now that holds the hex color value. Let me show you how we can check that out. I'm going to add a text label in and now if I refer to the color picker value and then click preview again, it's actually giving me an RGBA red, green, blue, alpha value. They've updated this plugin since I last used it but I can change it and select. Oh and now it changes to a hex code. Maybe by default it gives an RGBA. That's another way if you're writing pure CSS, you can express in an RGB or an RGBA. The A standing for alpha, that's slightly opacity value. It's from 0 to 1 so 0.5 is going to represent half opacity or 50% transparent, however you look at it.

Practical Application: Customizing Colors in Your Bubble App

But let's put this into an example of just how easy it is to customize colors in your Bubble up or rather let your users customize colors in your Bubble up. So I've got a group here and I want to set the background color and I can make this dynamic and so I could draw on the value of my database that I've set by saving the output of the color picker but just for this illustration I'm going to link it straight to the color picker. Go preview, let's make it a red, blue, there you go. That's how you do it.

Conclusion and Further Learning Resources

So if you're learning Bubble and you found this video useful we would really appreciate a like and subscribe. Also if learning Bubble is a thing, if you're really into it then you should check out our website planetnocode.com because we've got Bubble tutorials covering a whole host of topics including AI, databases, privacy rules, all of the essentials, planetnocode.com, become a member and you can access hundreds of our tutorial videos right away. So that's it, planetnocode.com