NWD Color Picker (HEX/RGB/HSL) is the color input Bubble was always missing. Built as a native-like input, it brings a full color panel, transparency, presets, an eyedropper and typed colors together in one polished component, and it can publish a truly empty value when no color is chosen. Fully customizable through 30+ properties, giving you complete control over every visual and behavioral detail.
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. Look for other Newed plugins in the marketplace.






Key Features

Complete Color Control
✅ Saturation and brightness area, hue slider, and transparency slider
✅ HEX, RGB, or HSL output, with HEX, RGBA, HSLA and OKLCH always exposed as states
✅ Type any CSS color directly in the input: named colors, hex with 3, 4, 6 or 8 digits, rgb, hsl and hwb
✅ Modern CSS formats too: lab, lch, oklab, oklch, color() in any color space, and color-mix()
✅ The chosen output format does not restrict what can be typed, and a value that is not a color is ignored instead of clearing the color
✅ Eyedropper to pick any color from anywhere on the screen, on Chromium browsers
✅ Preset colors for quick picks, with an optional title above them
✅ Publishes an empty value, so an optional color field can really stay empty

Fully Customizable
✅ 30+ properties for complete visual and behavioral control
✅ Three input layouts: a compact swatch filling the whole input, the swatch with the color code, or both with the opacity field
✅ Swatch corner radius and relief, from a square chip to a circle
✅ Floating panel with animation types, smart positioning and modern glass effects
✅ Fully customizable input states: disabled, required, invalid and focused
✅ Seamless integration with native Bubble styles while preserving a consistent appearance across browsers and matching your app design

Smooth User Experience
✅ Custom tooltip showing the color code, with a configurable delay
✅ Smooth animation types with smart directional positioning that adapts beautifully to any screen
✅ Works with mouse, touch, and pen
✅ Keyboard ready with Tab, Enter, Space, Escape, and the arrow keys on the color area and sliders
✅ Screen reader ready with an accessible label and description, and reduced motion support
✅ Handles disabled, required, and invalid states with customizable styling that integrates with Bubble styles
✅ Consistent experience across browsers and devices

Workflow Friendly
✅ The color in five formats at once: the chosen one, HEX, RGBA, HSLA and OKLCH
✅ Red, green, blue, hue, saturation, lightness and alpha exposed as separate numbers, ready for math and generated palettes
✅ A contrast color and an is dark state, so text over the chosen color stays readable without writing a single condition
✅ All relevant states exposed, including is clickable, is required, is valid, and is focused
✅ Default value available to your workflows even while the element is hidden
✅ Reset action with flexible behavior that integrates with native Bubble actions (Reset a group/popup) or custom workflows
✅ Focus action that can be triggered from anywhere for total control over workflow and accessibility
✅ Set value action that can be triggered from anywhere, with control over how it behaves when the input is disabled
✅ Value changed event for seamless Bubble integration

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



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.