Inputs

These are the suggested input parameters for the reusable component, based on the demo configuration UI.

• DefaultColor (Text): Initial color value to load in the picker (e.g., #FF2300). Must match the DefaultFormat.
• Width (Text): CSS width of the color picker container (e.g., 360px). Accepts any valid CSS size.
• DefaultFormat (Text/Static Entity): Default output format selected in the format selector (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB, LCH).

Feature toggles (Boolean inputs):

• ShowAlpha: Enables the alpha (opacity) slider and A input.
• ShowEyeDropper: Shows the browser/screen eyedropper button to pick a color from the screen.
• ShowPresets: Displays the presets row with predefined swatches (e.g., red, orange, yellow, etc.).
• ShowShades: Displays the “Shades” section for the current color.
• ShowTints: Displays the “Tints” section for the current color.
• ShowFormatSelector: Shows the tabs or dropdown to switch between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB, LCH.
• ShowColorWheel: Shows the hue wheel control.
• ShowGradientBox: Shows the 2D gradient area for saturation/value selection.
• HideClipboard: When true, hides the “Copy color value” / clipboard controls.
• HideColorInputsRGB: When true, hides numeric RGB(A) inputs (R, G, B, and alpha where applicable).
• HideColorValueDisplay: When true, hides the read-only color value text field above the picker.
• ShowColorPickerFromScreen: When true, shows a dedicated “Pick color from screen” trigger.

Outputs and events

These are the recommended output structures for consumers of the component.

• OnColorChange: Triggered whenever the user changes the color (via wheel, gradient box, inputs, presets, shades, tints, or eyedropper). Expose SelectedColor and SelectedFormat as parameters so parent screens can react (e.g., live preview).