HEX-RGB Color Converter

Part 1: A Quick Look at Color Codes

Before we build, let's quickly clarify what we're working with. As a designer, you've likely encountered both HEX and RGB color codes.

• RGB (Red, Green, Blue): This format defines a color by specifying the intensity of red, green, and blue, each on a scale from 0 to 255. For example, rgb(255, 0, 0) is pure, bright red.
• HEX (Hexadecimal): This is a six-digit code, prefixed with a #, that represents the same RGB values. It's essentially three pairs of two-digit hexadecimal numbers for Red, Green, and Blue (#RRGGBB).

The relationship between them is direct, as a hexadecimal number can represent any number from 0 to 255 using just two digits (00 to FF).

Converting between these formats involves translating decimal numbers (0-255) to hexadecimal numbers (00-FF) and back. While you could theoretically build this logic using dozens of complex conditionals in Bubble, it's not a practical approach. This is where we introduce a more elegant solution.

Part 2: Extending Bubble with Plugins

One of Bubble's most powerful features is its extensibility through plugins. Think of them like the plugins you've used in WordPress; they are packages of pre-built elements, actions, or API connections that you can add to your application to instantly gain new features without writing any code.

For our color converter, we can use a plugin that already has the conversion logic built-in. We'll use a free and popular one called "The Color API".

Your first step is to install it:

1. In your Bubble editor, navigate to the Plugins tab on the left-hand menu.
2. Click the + Add plugins button.
3. In the search bar, type "The Color API".
4. Find the plugin by Renato Asse and click Install.

That's it. The plugin is now installed, and its features are available in your Workflow tab.

Part 3: Building the HEX-to-RGB Converter

Let's start by converting from HEX to RGB.

1. Interface Setup
On a new page, set up a simple interface:

• An Input element for the user to enter the HEX code. Let's name it Input HEX.
• A Button with the text "Convert".
• Three Text elements to display the results. Label them "R:", "G:", and "B:" respectively, and place a separate text element next to each to hold the numerical value.

2. Custom States for Results
To hold the three separate RGB values after the conversion, we'll use custom states, just as we have in previous lessons.

1. Select the main page element itself (e.g., color_converter).
2. Click the 'i' icon in the property editor to open the Element Inspector.
3. Create three new custom states:
   • R_value (type: number)
   • G_value (type: number)
   • B_value (type: number)

3. The Workflow
Now, let's wire up the "Convert" button.

1. Select the button and start a new workflow.
2. Click to add an action. Navigate to Plugins > The Color API - HEX to RGB.
3. This action requires one piece of information: the hex code. For its value, dynamically select Input HEX's value. It's a good practice to also add :trimmed to remove any accidental spaces the user might have typed.
4. Now we need to save the results. Add three new actions: Element Actions > Set state.
   • Action 2: Set state color_converter's R_value to Result of step 1 (HEX to RGB)'s r.
   • Action 3: Set state color_converter's G_value to Result of step 1 (HEX to RGB)'s g.
   • Action 4: Set state color_converter's B_value to Result of step 1 (HEX to RGB)'s b.

4. Displaying the Data
Finally, go back to the Design tab. Click on the text elements you created to display the R, G, and B values. For their content, set them to display the value of their corresponding custom state:

• Text for R value: color_converter's R_value
• Text for G value: color_converter's G_value
• Text for B value: color_converter's B_value

Preview the page. Enter a HEX code (e.g., #1ABC9C) and click convert. The R, G, and B values should appear instantly!

Part 4: Building the RGB-to-HEX Converter

Now, let's build the reverse functionality. You can do this on the same page to create a complete tool.

1. Interface Setup
Add the following elements to your page:

• Three Input elements for R, G, and B values. Set their Content format to Integer. Name them Input R, Input G, and Input B.
• A Button with the text "Convert to HEX".
• A Text element to display the resulting HEX code.

2. The Workflow

1. Start a workflow from the "Convert to HEX" button.
2. Add an action: Plugins > The Color API - RGB to HEX.
3. This action requires three parameters. Configure them using the values from your new input fields:
   • r: Input R's value
   • g: Input G's value
   • b: Input B's value
4. To display the result, we can use another custom state. Go back to your page's custom states and add one called HEX_value (type: text).
5. Back in the workflow, add a Set state action. Set the state color_converter's HEX_value to Result of step 1 (RGB to HEX)'s hex value.

3. Display the Result
Connect your output text element to the custom state color_converter's HEX_value.

Now, test the other direction. Enter 26, 188, and 156 into the R, G, and B inputs. The HEX code #1ABC9C should appear.

Your Task: Create a Live Color Preview (10 minutes)

A great feature for a color converter is a preview swatch that shows the actual color. Let's add that.

1. Add a Preview Element: Add a Group element to your page. Give it a fixed size, like 100x100 pixels. Let's call it Group Color Preview.
2. Set the Background Color: By default, its background will be a solid color or none at all. We want to change this dynamically.
3. Use the HEX Input: Select Group Color Preview, go to the Appearance tab, and find the Background color property. Instead of picking a static color, set up a dynamic expression: Input HEX's value.
   • Test It: Preview your app. As you type a valid HEX code into Input HEX, the background of the group should change in real-time. Bubble automatically recognizes valid HEX codes for color properties.
4. Use the RGB Inputs: Making the preview work from the RGB inputs is slightly more complex. Bubble's color property also accepts the rgb(r,g,b) or rgba(r,g,b,a) format.
   • Go to the Conditional tab of Group Color Preview.
   • Create a new condition: When Input R's value is not empty and Input G's value is not empty and Input B's value is not empty.
   • Select the property to change: Background color.
   • For the value, you need to construct the rgb() string yourself. Build this dynamic expression: rgb(Input R's value,Input G's value,Input B's value).
   • Note: You must literally type rgb( and the commas and ) as plain text into the expression builder, inserting the dynamic input values in between.

With this in place, your color preview will update from either the HEX input or the RGB inputs, creating a much more interactive and useful tool.

Conclusion

Excellent work today. You've not only built a practical color converter but have also unlocked one of Bubble's most important features: the plugin system. This ability to instantly add powerful, pre-built functionality is key to building complex applications quickly and efficiently.

Here are your key takeaways:

• Plugins are essential for extending Bubble's native capabilities.
• The plugin marketplace offers thousands of tools for everything from APIs to visual effects.
• Plugin actions work just like regular workflow actions, often taking inputs and producing results that you can use in subsequent steps.
• Combining plugin actions with custom states is a powerful pattern for processing data and displaying the results on your page.

This lesson concludes our module on building native no-code tools. You've created a character counter, a case converter, a unit converter, and now a color converter. In the next module, we'll shift our focus from building the tools themselves to building the platform around them. We'll start with User Authentication, allowing users to sign up, log in, and have their own personalized experience on your site.