NWD Color Picker (HEX/RGB/HSL) v0.9.0 Pending review

Text displayed in the input while it has no value.

Color of the placeholder text.

Format of the value and of the text shown in the input.

• hexreturns the color as a hex code. With transparency enabled it has 8 digits, which Bubble's own color fields do not read.
• rgbreturns the color as rgb() or rgba().
• hslreturns the color as hsl() or hsla().

Which parts the input shows: compact is the color swatch alone, standard adds the color code next to it, and full adds the opacity field as well. Enabling transparency inside the panel is a separate setting.

• compactthe color swatch alone, filling the whole input.
• standardthe swatch next to the color code.
• fullthe swatch, the color code and the opacity field.

Corner radius of the input swatch, in pixels. Use 0 for a square swatch, and a value equal to or greater than half its size for a circle. It is independent of the element's native roundness, and applies in both layouts. The preset swatches and the swatch inside the panel are not affected.

Outline drawn over the swatch, always on all four sides so it stays visible against any background. Line is a thin outline, shadow is a drop shadow under the swatch, and veil is an inner relief shaded from top to bottom. The tone of line and veil follows the chosen color: dark over light colors, light over dark ones.

• linea thin outline around the swatch.
• shadowa drop shadow under the swatch.
• veilan inner relief, shaded from top to bottom.

Shows the color code on hover, over the input swatch and over each preset.

Time (in milliseconds) before the tooltip appears after hover.

Color applied on load and on reset (hex, rgb or hsl).

Adds the opacity slider.

Shows the selected color inside the panel, in a field that switches between hex, rgb and hsl with each click, next to a button that copies it. The format chosen here changes only what the panel shows, never the value the input publishes.

Turns the color preview inside the panel into an eyedropper, to pick a color from anywhere on the screen. Only Chrome and Edge support it; elsewhere the preview stays a preview.

Preferred or forced opening direction of the floating panel relative to the input.

• auto-topopens above the input, and flips below when there is not enough room.
• auto-bottomopens below the input, and flips above when there is not enough room.
• topalways opens above the input.
• bottomalways opens below the input.

Opening animation of the floating panel.

• nonethe panel simply appears.
• dropfalls into place from above.
• elasticovershoots slightly and settles.
• expandgrows from the edge of the input.
• fadefades in.
• popscales up quickly from the centre.
• slideslides in from the resolved direction.
• zoomzooms in from a smaller size.

Background color of the floating panel.

Sets the border color of the floating panel.

Intensity of the glassmorphism effect on the floating panel.

• nonesolid panel background.
• subtlebarely visible blur behind the panel.
• lightlight blur.
• mediumbalanced blur, the most common choice.
• strongheavy blur.
• intensemaximum blur, for panels over busy backgrounds.

Color of the divider line above the presets. Leave it empty to follow the panel background.

Shows the preset swatches inside the panel. Turning it off hides them even when the list is filled.

Title shown above the preset colors. Leave it empty to show the presets without a title.

Color of the title above the preset colors. Leave it empty to follow the element's font color.

Colors shown as quick picks in the panel. One color per line, and it accepts a dynamic list, so the palette can come from your data.

Disables the component, preventing any interaction.

Input background color when disabled.

Input border color when disabled.

Input font color when disabled.

Marks the field as required and enables input validation.

Input background color when invalid (required with no value).

Input border color when invalid (required with no value).

Input background color when focused.

Input border color when focused.

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

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

Selected color in the chosen format. Empty when no color is selected.

Selected color as hex (#RRGGBB or #RRGGBBAA).

Selected color as rgba().

Selected color as hsla(), always with the alpha channel.

Selected color as oklch(), for custom CSS. Bubble's own color fields do not read this format; use value (rgba) for those.

Red channel of the selected color, from 0 to 255.

Green channel of the selected color, from 0 to 255.

Blue channel of the selected color, from 0 to 255.

Hue of the selected color, from 0 to 360.

Saturation of the selected color, from 0 to 100.

Lightness of the selected color, from 0 to 100.

Opacity from 0 to 1.

Black or white, whichever reads better on top of the selected color. Transparency is ignored, because what shows through is the background behind the element.

Yes when the selected color is dark enough to need light text on top of it. Empty color reads as not dark.

True when the component is not disabled.

True when the input is marked as required.

True when the field is not required, or when it is required and has a valid value.

True while the input has focus.

Triggered when a different color is confirmed: closing the panel, picking a preset or resetting.