Add a color picker to your Bubble app by embedding an HTML color input element or installing a color picker plugin. Store the selected hex color value in a custom state or database field, and apply it dynamically to other elements using conditional formatting. This lets users choose brand colors, theme preferences, or any color-dependent setting within your app.
Adding a Color Picker Input to Your Bubble App
Color pickers let users select colors visually — useful for theme customization, product configuration, or any feature that involves user-chosen colors. Bubble does not have a built-in color picker element, but you can easily add one using an HTML element with a native color input or a community plugin. This tutorial covers both approaches.
Prerequisites
- A Bubble account with an app open in the editor
- Basic understanding of HTML elements and custom states in Bubble
Step-by-step guide
Add an HTML color input element to your page
Add an HTML color input element to your page
Go to the Design tab and click the '+' icon → search for 'HTML' → drag an HTML element onto your page. Size it to approximately 60x40 pixels. In the HTML content area, paste the color input code. This renders a native browser color picker that opens when clicked. The 'onchange' event sends the selected color to a Bubble element using JavaScript-to-Bubble communication.
1<input type="color" id="colorPicker" value="#3498db" style="width:100%; height:100%; border:none; cursor:pointer;" onchange="document.getElementById('colorValue').value = this.value; document.getElementById('colorValue').dispatchEvent(new Event('change'));">Expected result: A clickable color swatch appears on the page that opens the browser's native color picker when clicked.
Capture the selected color value in a Bubble input
Capture the selected color value in a Bubble input
Add an Input element near the HTML color picker. Give it the ID 'colorValue' in the element inspector (click the element → scroll to the ID attribute field). Set it to not be visible on page load if you want to hide it — it serves as a bridge between the JavaScript color picker and Bubble's data system. When the HTML color picker changes, the JavaScript writes the hex value to this hidden input. You can then read this input's value in workflows and dynamic expressions.
Pro tip: Alternatively, use the Toolbox plugin's 'JavaScript to Bubble' element for a cleaner integration without a hidden input field.
Expected result: The hidden input receives the hex color value (e.g., '#3498db') whenever the user picks a new color.
Store the selected color in a custom state or database
Store the selected color in a custom state or database
To use the color value elsewhere, create a custom state on the page called 'selected_color' (type: text). Add a workflow: 'When Input colorValue's value is changed → Set state of page → selected_color = Input colorValue's value.' To persist the color in the database (for example, as a user preference), add a 'Make changes to Current User' action: set a 'preferred_color' field (text) to Input colorValue's value.
Expected result: The selected hex color is stored either temporarily in a custom state or permanently in the database.
Apply the selected color dynamically to page elements
Apply the selected color dynamically to page elements
To show users a live preview of their chosen color, add conditionals on the elements you want to style. For example, select a Group element, go to the Conditional tab, and add: 'When page's selected_color is not empty → Background color = page's selected_color.' For text elements: 'When page's selected_color is not empty → Font color = page's selected_color.' The elements will update in real time as the user picks different colors.
Expected result: Page elements change their colors in real time as the user selects different colors from the picker.
Display the hex value and a color preview swatch
Display the hex value and a color preview swatch
Add a Text element that shows the current hex value: set its content to 'page's selected_color' (or a formatted version like 'Selected: #3498db'). Add a small Group element (30x30 pixels) next to it as a color swatch preview. On the Conditional tab of this group: 'When page's selected_color is not empty → Background color = page's selected_color.' This gives users both a visual and text representation of their selection.
Expected result: Users see the hex code and a matching color swatch that updates as they pick colors.
Complete working example
1COLOR PICKER IMPLEMENTATION2============================34HTML Element Content:5 <input type="color" id="colorPicker" value="#3498db"6 style="width:100%; height:100%; border:none; cursor:pointer;"7 onchange="document.getElementById('colorValue').value = this.value;8 document.getElementById('colorValue').dispatchEvent(new Event('change'));">910Hidden Input Element:11 ID: colorValue12 Visible on page load: No13 Purpose: Bridge between JS color picker and Bubble data1415Custom States:16 Page → selected_color (text, default: empty)1718Workflows:19 When Input colorValue's value is changed:20 Action 1: Set state of page → selected_color = Input colorValue's value21 Action 2 (optional): Make changes to Current User22 → preferred_color = Input colorValue's value2324Conditional Formatting:25 Group Preview Swatch:26 When page's selected_color is not empty27 → Background color = page's selected_color28 29 Text Hex Display:30 Content: page's selected_color31 32 Any Target Element:33 When page's selected_color is not empty34 → Background/Font color = page's selected_color3536Database (optional persistence):37 User Data Type → preferred_color (text)38 On page load: Set state selected_color = Current User's preferred_colorCommon mistakes when building a color picker in Bubble
Why it's a problem: Forgetting to set the ID attribute on the hidden input element
How to avoid: Click the input element in the Bubble editor, scroll to the ID attribute field in the inspector, and type 'colorValue' exactly as referenced in the JavaScript.
Why it's a problem: Trying to use the color value before the user has picked one
How to avoid: Set a default value for the custom state (e.g., '#3498db') or add an 'is not empty' check in your conditionals.
Why it's a problem: Storing the color without the hash symbol
How to avoid: Ensure the HTML input sends the full hex value including '#'. The native color input does this by default.
Best practices
- Use the native HTML color input for the best cross-browser compatibility
- Store color values with the '#' prefix (e.g., '#3498db') for consistency
- Add a default color value so elements are styled even before the user picks a color
- Save user-selected colors to the database for persistence across sessions
- Show both a visual swatch and the hex code so users can reference their exact selection
- Consider offering preset color swatches alongside the free picker for quick selection
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
How do I add a color picker to a Bubble.io app? I want users to pick a color and have it apply dynamically to page elements. Show me how to use an HTML color input, capture the value in Bubble, and apply it with conditional formatting.
Add a color picker to my page. Use an HTML color input element that lets users select a color, store the hex value in a custom state, and apply it as the background color of a preview swatch and a group element using conditionals.
Frequently asked questions
Is there a Bubble plugin for color pickers?
Yes. Search the Plugin Marketplace for 'color picker' — several community plugins offer color picker elements that integrate natively with Bubble without requiring HTML elements. The trade-off is less customization control.
Can I restrict the color picker to specific colors?
The native HTML color input allows any color. To restrict choices, create a set of color swatches (small colored groups) instead and let users click one to select it. Store preset colors in an Option Set.
How do I load a previously saved color when the page opens?
In a 'Page is loaded' workflow, set the custom state selected_color to Current User's preferred_color. Also update the HTML color input's default value using JavaScript or set the input value.
Does the color picker work on mobile devices?
Yes. Mobile browsers display their own native color picker interface when the user taps the HTML color input. The exact appearance varies by device and browser.
Can I use RGBA or HSL colors instead of hex?
The HTML color input returns hex values. To support RGBA (with transparency), you would need a more advanced JavaScript-based color picker library embedded in the HTML element, such as Pickr or Spectrum.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation