NWD Color Picker (Lightweight) v1.6.0

Newed UIBreaking changes

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.

No data collected This plugin does not collect user data.

Live demoGet plugin

Why use this?

Built for what Bubble does not cover.

Bubble has no native color input. The usual workaround is a text field where someone types a hex code, which works until the first typo, and the alternative is carrying a whole picker interface for what is, most of the time, a single swatch.

Key features 6

The Dialog People Already Know

Opens the color picker the operating system provides, the same one they use everywhere else on their computer.

Nothing to Load

No library and no floating panel: the element is a native input, so it is ready the moment the page is.

A Default, or None at All

The starting color takes a dynamic expression, and left empty the input really starts with no color.

Sized and Styled by Bubble

Border, border radius and shadow come from the element's own style panel, and the color fills whatever box you give it.

Accessible Experience

Fully operable from the keyboard and announced to screen readers, with motion preferences respected.

Workflow Ready

Everything the input knows is available to your workflows, and every change is an event you can react to.

In detail

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 use 4

  1. 01
    Insert the element on the page

    Place NWD Color Picker (Lightweight) wherever the color should be picked. The swatch fills the whole element, so sizing the element is sizing the color.

    Border, border radius and shadow are the element's own, in Bubble's style panel. The plugin draws no frame of its own, which is what keeps a white color visible on a white page: give the element a border or a shadow and the swatch reads against any background.

  2. 02
    Set the starting color

    Default value accepts hex (#rrggbb or #rgb) and rgb/rgba, and takes a dynamic expression, so the color of the record being edited can open the input already on it.

    Leave it empty and the input starts with no color at all: it shows diagonal stripes and publishes an empty value, until someone picks one. It is the same thing an empty field in your database means, carried to the screen instead of turned into black.

  3. 03
    Decide the disabled behavior

    This input is disabled? blocks the interaction, and Input opacity (disabled) says how faded it looks while blocked.

  4. 04
    Read the result in your workflows

    The value state carries the chosen color as hex, and the value changed event fires once per confirmed color. Reset, Focus and Set value drive the input from any workflow.

DEFAULT DATA 1

Default value

text

Color applied on load and on reset. Accepts hex (#rrggbb or #rgb) and rgb/rgba. Leave it empty and the input starts with no color at all: it shows diagonal stripes and the value state stays empty until someone picks one.

defaultrgba(77,190,255,1)

optional

Accepts hex with 3 or 6 digits and rgb/rgba. A value the browser cannot read is ignored instead of clearing the color, and an empty value starts the input with no color.

INPUT BEHAVIOR 2

Disabled state

This input is disabled?

yes/no

Disables the component, preventing any interaction.

defaultno

Input opacity (disabled)

number

Opacity applied to the swatch when disabled, from 0 to 1.

default0.5

ACCESSIBILITY 2

Accessible label

text

Name read by screen readers. When empty, uses the visible label.

defaultno default

optional

Accessible description

text

Hint read by screen readers after the name. Empty for none.

defaultno default

optional

States 3

Values the element exposes for the rest of the page to read.

value

text

Selected color as hex (#rrggbb). Never empty: the system dialog always holds a color.

is clickable

yes/no

True when the component is not disabled.

is focused

yes/no

True while the input has focus.

Events 1

Where a workflow can start.

value changed

event

Triggered when a different color is confirmed in the system dialog, and on reset. It does not fire while the color is being dragged inside the dialog.

Actions 3

What a workflow can tell the element to do.

Reset no params

Restores the default value.

Focus no params

Focuses the input and opens the system color dialog. The dialog only opens when the action runs inside a user gesture, such as a button click with no asynchronous step before it; otherwise the input keeps the focus and Enter or Space opens it. Does nothing while the element is disabled.

Set value 2 params

Sets the color from a workflow. A color the browser cannot read is ignored.

Apply even when disabled?

yes/no

Yes applies the value even while the element is disabled. No makes the action do nothing in that state.

defaultno default

Value

text

New color, as hex (#rrggbb or #rgb) or rgb/rgba. Leave it empty to clear the color: the input goes back to showing no color and the value state becomes empty. A color the browser cannot read does nothing.

defaultno default

optional

FAQ 7

Which picker opens when someone clicks it?

The one the operating system provides. It looks different on Windows, macOS, Android and iOS, and that is the point: people already know it, and nothing extra is downloaded to show it. If the picker must look the same everywhere and live inside the page, that is the NWD Color Picker (HEX/RGB/HSL).

What is the difference between this and NWD Color Picker (HEX/RGB/HSL)?

This one is deliberately small: the system dialog, a default value, an empty state and the chosen color as hex. The full one draws its own panel inside the page, with transparency, typed colors in any CSS format, presets, an eyedropper and the color in five formats at once. Same family, two different jobs.

Can the value be empty?

Yes. Leave Default value empty and the input starts with no color: diagonal stripes on the swatch and an empty value in your workflows. Picking a color leaves that state, the Set value action with an empty value returns to it, and Reset returns to it too when the default is empty. The system dialog itself always holds a color, so what it opens on is black, but black is never published as a choice nobody made.

Does it support transparency?

No. The browser's color input has no alpha channel, so the color is always fully opaque. Transparency is in the full picker.

When exactly does the value changed event fire?

When the person confirms a color in the dialog, and on reset. It does not fire while the color is being dragged inside the dialog, so a workflow attached to it runs once per choice rather than hundreds of times. The value state does follow the drag, for anything that should react live.

Why doesn't the Focus action always open the dialog?

Browsers only open the system dialog inside a gesture from the person. Triggered straight from a button click, Focus opens it; placed after an asynchronous step, such as a database action, the browser refuses and the input simply keeps the focus, where Enter or Space opens it.

Can I predefine styles and reuse them across multiple inputs?

Yes. The visual properties support Bubble's predefined styles, so a look can be saved once and applied to every input in the app. A few sizing fields are deliberately not dynamic, and that is what lets them travel inside the style instead of being set one input at a time.

Breaking changes 1

1.4.0 2026-10-14

The plugin was renamed and its contract was brought in line with the rest of the Newed UI library. Apps installed before this version keep working visually, but the workflows that read the element need one pass.

  • The plugin is now called NWD Color Picker (Lightweight). It was Colorizer Color Picker.Nothing to do. The element you already placed is the same one, under a new name in the element tree.
  • The exposed state Color was renamed to value.Open every workflow, condition and text that read the old state and point it at value. Bubble shows an issue for each one it cannot resolve.
  • The event Color is changed was renamed to value changed.Reattach the workflows that were triggered by the old event. They stop running silently, without an issue, so check the ones that drove saves or page updates.
  • The field Initial color became Default value, and it now takes a dynamic expression instead of a fixed color from the editor.Open the element and set the color again. A value configured before this version may come back empty, and empty now means the input starts with no color at all.
  • The event now fires once, when the color is confirmed, instead of firing while the color is being dragged inside the dialog.Nothing to do in most apps, and it is usually an improvement. Only look if a workflow of yours depended on running continuously during the drag.

Newed UI - Component Library

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.

Because every component is built from scratch instead of wrapping a native element, they share the same look across the library and render the same way in every browser.