Color Picker Input is a native mobile color selection component for Bubble apps. It lets users choose a color visually, adjust hue and opacity, type or paste a color value, save reusable color swatches, and publish the selected value back to Bubble workflows. The plugin is built for Bubble mobile/native apps and does not require unsupported external libraries. It uses Bubble-provided React and React Native only, making it suitable for mobile app screens, settings pages, profile customization, theme editors, admin tools, branding flows, and any feature where users need to select or manage colors.

The main color output is published as hex. At full opacity, the plugin returns a standard 6-digit hex value such as #0f9f6e. When opacity is reduced, it returns an 8-digit hex value such as #0f9f6e66, so transparency is still included while keeping the output in hex format.
The input also supports multiple color formats. Users can enter hex, RGB, RGBA, HSL, or HSLA values, and the plugin converts supported inputs into hex automatically. This makes the component flexible for users who paste colors from design tools, CSS, style guides, or existing app themes.

Key Features
- Native mobile color picker input for Bubble apps
- Visual saturation/lightness color plane
- Hue selector
- Opacity selector
- Hex-first color output
- Supports #hex, rgb(), rgba(), hsl(), and hsla() input formats
- Converts supported color inputs back to hex
- Uses 8-digit hex when opacity is below 100%
- Saved color swatches
- Clean compact UI
- Published Bubble states for workflows
- Workflow actions for setting, resetting, saving, and adjusting colors
- Events for color changes, saved colors, invalid input, and close interactions

Published States
- color_code: selected color as hex, using #RRGGBB or #RRGGBBAA
- hex_color: selected color as standard 6-digit hex
- rgba_color: selected color as RGBA text
- hsla_color: selected color as HSLA text
- opacity: current opacity from 0 to 100
- hue: current hue value
- saturation: current saturation value
- lightness: current lightness value
- is_valid_color: whether the current color input is valid
- last_error_message: latest validation or runtime message

Workflow Actions
- Set color: sets the picker to a supplied color value
- Reset color: restores the picker to the initial color and opacity
- Set opacity: changes opacity from a workflow
- Save current color: adds the current color to saved swatches

Events
- color changed: triggered when the selected color or opacity changes
- color saved: triggered when the current color is saved
- invalid color entered: triggered when the user enters an unsupported color value
- closed: triggered when the close interaction is used, if enabled

Demo page link: https://codara.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Color%20Picker%20Input

Live editor link: https://bubble.io/page?id=codara&test_plugin=1780737150847x330642719416516600_current&tab=Design&name=Color+Picker+Input&type=page&elements=bTGrh