Unlocking Design Potential: A Guide on How to Utilize HubSpot's Color Field in Hubl
HubSpot provides a Color tag at your disposal, accessible through HubL or within custom modules. Color fields are supported in both themes and modules.

By default, the opacity input of a color field is hidden for email modules, as some email clients don’t respect opacity rules. You can reveal the opacity field for email modules by setting show_opacity to true.
Color tag for Templates.
The color tag initiates a color picker within the page editor UI, producing a HEX color value for template integration. It’s important to highlight that this module is exclusively applicable to templates and cannot be utilized in CSS files.
Hubl
{% color "color" %}
{% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}
Output
#000000
Parameter: color
Type: String
Description: Default HEX color value for the color picker.

If you opt to employ this tag in a <style> or inline CSS, remember to include the no_wrapper=True parameter to eliminate the <span> wrapper.
Color field for Modules.

This field enables users to choose a color within the module from the editor and effortlessly apply it to various elements such as backgrounds, fonts, buttons, and more. Now its available in both Fields and Style Fields sections of a module items
Upon copying the snippet, you’ll receive both the color in RGB format and the opacity expressed as a percentage.
Here’s an example:
{{ module.style.icon_color.color }}
{{ module.style.icon_color.opacity }}
The provided text “#ffffff 100” appears to represent a color code (hexadecimal for white) and a percentage. If you’re looking for a rephrased version, you might consider:
“Color code: #ffffff (white) with a transparency level of 100%.”
Output an RGBA value.
If you prefer to employ an RGBA color, utilize the convert_rgb HubL filter on the color and divide the opacity by 100. For example:
rgba({{ module.color_field.color|convert_rgb }}, {{ module.color_field.opacity/100 }})

Outputs the following:
rgba(255, 255, 255, 1.0)