class: ColorPicker

[113:7] extends: Node, Control, Region

ColorPicker wraps the JavaFX ColorPicker control, a combo-box-style widget that opens a color chooser popup where users can select a color visually or enter a hex value. The selected value is a JavaFX Color object, and the control displays the chosen color as a swatch on its face. The style class color-picker is applied by default. An additional CSS property controls whether the selected color's name or hex value is shown as a text label on the button. The tables below list every CSS property available to ColorPicker, organized by the class level where each property is defined. Properties defined at a higher level are inherited by all subclasses below it.

CSS Pseudo-classes -- ColorPicker

Pseudo-class	Description
`editable`	Applies when the editable property is true.
`showing`	Applies when the color chooser popup is currently visible.
`armed`	Applies when the armed property is true (button pressed, pointer still over it).

CSS Properties -- ColorPicker

Property	Values	Default	Description
`-fx-color-label-visible`	`true \| false`	`true`	When true, the selected color name or hex value is shown as a label on the button face.

CSS Properties -- Control

Property	Values	Default	Description
`-fx-skin`	`<string>`	`null`	Fully qualified class name of the Skin to use for rendering this control.
`-fx-focus-traversable`	`true \| false`	`true`	When true, the control participates in focus traversal via the keyboard Tab key.

CSS Properties -- Region

Background fills

Property	Values	Default	Description
`-fx-background-color`	`<paint> [, <paint>]*`	`transparent`	One or more paint values for background fill layers, rendered back to front.
`-fx-background-insets`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`0 0 0 0`	Insets from the region edges for each background fill layer.
`-fx-background-radius`	`<size> [/ <size>]* [, ...]*`	`0 0 0 0`	Corner radii for each background fill layer.

Background images

Property	Values	Default	Description
`-fx-background-image`	`<uri> [, <uri>]*`	`null`	One or more image URIs for background image layers.
`-fx-background-position`	`<bg-position> [, ...]*`	`0% 0%`	Position of each background image within the region. Accepts keywords or size values.
`-fx-background-repeat`	`<repeat-style> [, ...]*`	`repeat repeat`	Tiling behavior for each background image. Values: repeat, no-repeat, round, space applied per axis.
`-fx-background-size`	`<bg-size> [, ...]*`	`auto auto`	Dimensions for each background image. Supports cover, contain, stretch, or explicit sizes.

Stroked borders

Property	Values	Default	Description
`-fx-border-color`	`<paint>` or `<t> <r> <b> <l>` [, ...]*	`null`	Paint colors for the border stroke layers.
`-fx-border-insets`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`null`	Insets from region edges for each border layer.
`-fx-border-radius`	`<size> [, ...]*`	`null`	Corner radii for border stroke layers.
`-fx-border-style`	`<border-style> [, ...]*`	`null`	Border line style (solid, dotted, dashed) plus phase and line cap/join options per layer.
`-fx-border-width`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`null`	Thickness of each border stroke layer, per side.

Border images

Property	Values	Default	Description
`-fx-border-image-source`	`<uri> [, <uri>]*`	`null`	Image URIs used to paint the border.
`-fx-border-image-insets`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`0 0 0 0`	Insets for each border image layer.
`-fx-border-image-repeat`	`<repeat-style> [, ...]*`	`repeat repeat`	Tiling behavior for each border image.
`-fx-border-image-slice`	`<size>` or `<t> <r> <b> <l>` [fill] [, ...]*	`100%`	Divides each border image into nine regions. Adding fill preserves the center region.
`-fx-border-image-width`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`1 1 1 1`	Width of each border image slice per side.

Other Region properties

Property	Values	Default	Description
`-fx-padding`	`<size>` or `<t> <r> <b> <l>`	`0 0 0 0`	Interior padding between the region border and its content.
`-fx-shape`	`<string>`	`null`	SVG path string that defines a custom clip shape for the region.
`-fx-scale-shape`	`true \| false`	`true`	When true, the shape is scaled to fit the region.
`-fx-position-shape`	`true \| false`	`true`	When true, the shape is centered within the region.
`-fx-snap-to-pixel`	`true \| false`	`true`	When true, positions and sizes are rounded to whole pixel boundaries.
`-fx-min-width`	`<size>`	`-1`	Minimum width. -1 uses the computed minimum.
`-fx-pref-width`	`<size>`	`-1`	Preferred width. -1 uses the computed preferred.
`-fx-max-width`	`<size>`	`-1`	Maximum width. -1 uses the computed maximum.
`-fx-min-height`	`<size>`	`-1`	Minimum height. -1 uses the computed minimum.
`-fx-pref-height`	`<size>`	`-1`	Preferred height. -1 uses the computed preferred.
`-fx-max-height`	`<size>`	`-1`	Maximum height. -1 uses the computed maximum.

CSS Properties -- Node

Property	Values	Default	Description
`-fx-blend-mode`	`add \| blue \| color-burn \| color-dodge \| darken \| difference \| exclusion \| green \| hard-light \| lighten \| multiply \| overlay \| red \| screen \| soft-light \| src-atop \| src-in \| src-out \| src-over`	`null`	Blend mode used when compositing this node with nodes beneath it.
`-fx-cursor`	`null \| crosshair \| default \| hand \| move \| e-resize \| h-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| v-resize \| text \| wait \| <url>`	`null` (inherits)	Mouse cursor shape shown when the pointer is over this node. Inherits from parent by default.
`-fx-effect`	`<effect>`	`null`	A visual effect (e.g. DropShadow, InnerShadow) applied to the rendered node.
`-fx-focus-traversable`	`true \| false`	`false`	Whether this node participates in focus traversal. Overridden to `true` by Control.
`-fx-view-order`	`<number>`	`0`	Adjusts rendering and hit-test order within the parent without changing the scene graph order.
`-fx-opacity`	`<number> [0.0 - 1.0]`	`1`	Opacity of the node. 0 is fully transparent, 1 is fully opaque.
`-fx-rotate`	`<number>`	`0`	Rotation angle in degrees applied around the node's center point. Positive values are clockwise.
`-fx-scale-x`	`<number>`	`1`	Scale factor along the X axis about the node's center.
`-fx-scale-y`	`<number>`	`1`	Scale factor along the Y axis about the node's center.
`-fx-scale-z`	`<number>`	`1`	Scale factor along the Z axis about the node's center.
`-fx-translate-x`	`<number>`	`0`	Translation offset along the X axis in pixels.
`-fx-translate-y`	`<number>`	`0`	Translation offset along the Y axis in pixels.
`-fx-translate-z`	`<number>`	`0`	Translation offset along the Z axis in pixels.
`visibility`	`visible \| hidden \| collapse \| inherit`	`visible`	Controls whether the node is rendered and participates in layout. `collapse` removes it from layout; `hidden` keeps the space.
`-fx-managed`	`true \| false`	`true`	When false, the parent layout does not manage this node's position or size.

Methods

ColorPicker (object ColorVal = null)

Constructor takes an optional default color value to apply to the color picker.
- @p ColorVal is an optional Color object to set.
- @r this object
setValue (object ColorVal)

Sets the provided color value.
- @p ColorVal is a Color object to set.
- @r this object
getValue ()

Gets the current selected color object.
- @r A hex formatted string with the color value.
onChange (callback OnChange)

Sets the on change handler with the provided callback function to call on change. The callback takes a single argument with the event.
- @p OnChange is a callback to call on change.
- @r this object