Bubble.io Color Picker, RGBA and Hex Color
In this Bubble tutorial video we demonstrate how you can use a color picker to allow your Bubble app users to set their own colors through your Bubble app.
Unlock the power of color: Learn how to add a dynamic color picker to your Bubble app and let users customize their experience!
Master RGBA and HEX: Dive into the world of color pickers and understand how to manipulate colors like a pro in your Bubble projects.
From hex codes to RGBA: Discover how to implement a versatile color selection tool that gives your users full control over app aesthetics.
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
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.