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 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.

Color Picker Plugin

So 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. And there's a number of different color pickers available. I think I'm just gonna go for probably this one by Zeroqode, Air Color Picker. And then if I go back onto design and now search for the air color picker I'm going to 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 loads of different settings that you can customize on here including presets, you might want to use option sets to have a list of preset colors. 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 take that out.

Hex Color & RGBA

So 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 look, I can change it and select... Oh, and now it changes to a hex code. Maybe by default it gives an RGB A. That's another way if you're writing pure CSS you can express in an RGB or an RGB A. The last, 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. But let's put this into an example of just how easy it is to customize colors in your Bubble App, or rather let your users customize colors in your Bubble App.

Changing a group's background color with a color picker

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 in 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. So if you're learning Bubble and you found this video useful we would really appreciate a like and subscribe. Also if learning Bubble the 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