NWD Color Picker (Lightweight) is the color input Bubble never had, in its smallest possible form. It exposes the color dialog the operating system already provides, the same one people use everywhere else on their computer, so there is no panel to load and no library to ship.
This plugin is part of Newed UI - Component Library, a growing library of advanced, highly customizable components for Bubble, inspired by a personal component library originally built for React. Each component is built from scratch, carefully designed, and tested in real applications to deliver the level of control, polish, and reliability that native Bubble elements often don’t provide. See more plugins on the GCS Studios contributor page.






Key Features

The System Dialog, Exposed to Bubble
✅ Opens the color picker the operating system already provides, familiar to every person who has ever changed a color on their own computer
✅ No external library and no floating panel to download: the element is a native input, so it is there the moment the page is
✅ Mouse, touch and pen, with the keyboard behavior the browser gives it, on every platform

Really Optional Color
✅ Leave the default empty and the input starts with no color at all, showing diagonal stripes instead of a color nobody chose
✅ The value state is empty while that lasts, so an optional color field in your database can really stay empty
✅ Picking a color leaves that state, and the Set value action with an empty value returns to it

Simple by Design
✅ A default color that accepts hex and rgb and takes a dynamic expression, so it can come straight from the record being edited
✅ Border, border radius and shadow come from the element's own style panel, with no duplicate styling fields to learn
✅ Disabled state with an opacity of your own
✅ Accessible label and description read by screen readers
✅ The swatch fills the element, so sizing it is sizing the color

Workflow Friendly
✅ The chosen color exposed as hex, and empty while no color has been chosen
✅ Is clickable and is focused exposed for your conditions
✅ Reset action that integrates with the native Bubble actions (Reset relevant inputs, Reset a group/popup) or your own workflows
✅ Focus action that focuses the input and opens the system dialog when it runs inside a click
✅ Set value action that also clears the color, with control over how it behaves when the input is disabled
✅ Value changed event that fires once per confirmed color, and not while the color is being dragged inside the dialog

Reliable & Production-Ready
✅ Built with lightweight CSS and JavaScript for fast, reliable performance
✅ Designed around practical use cases and real Bubble development needs
✅ Tested in real-world applications before being released publicly
✅ Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer

Need More Than This?
✅ This one is deliberately small: the system dialog, the chosen color and the states your workflows need, and nothing else
✅ For a full color panel, transparency, typed colors in any CSS format, presets and an eyedropper, see NWD Color Picker (HEX/RGB/HSL)



How to test this plugin almost for free?
Subscribe and test it for a few days to see if the plugin meets your needs. Subscriptions are billed prorated, so if you cancel after a short period, you'll only pay for the days used.

Explore Our Other Plugins
Check out our complete collection of plugins, including elements, inputs, client-side actions, server-side actions, and APIs. Built to extend native capabilities or introduce new features, based on real-world applications.



Get in Touch
We'd love to hear from you! If you need help, have any questions about our plugins, want to provide feedback, or suggest a feature, please contact us directly.