Description

A widget that provides an interface for selecting or modifying a color. It can optionally provide functionalities like a color sampler (eyedropper), color modes, and presets.

Note: This control is the color picker widget itself. You can use aColorPickerButton instead if you need a button that brings up aColorPicker in a popup.

Tutorials

• Tween Interpolation Demo

Properties

Methods

Theme Properties

Signals

color_changed(color:Color)🔗

Emitted when the color is changed.

preset_added(color:Color)🔗

Emitted when a preset is added.

preset_removed(color:Color)🔗

Emitted when a preset is removed.

Enumerations

enumColorModeType:🔗

ColorModeTypeMODE_RGB =0

Allows editing the color with Red/Green/Blue sliders in sRGB color space.

ColorModeTypeMODE_HSV =1

Allows editing the color with Hue/Saturation/Value sliders.

ColorModeTypeMODE_RAW =2

Deprecated: This is replaced byMODE_LINEAR.

ColorModeTypeMODE_LINEAR =2

Allows editing the color with Red/Green/Blue sliders in linear color space.

ColorModeTypeMODE_OKHSL =3

Allows editing the color with Hue/Saturation/Lightness sliders.

OKHSL is a new color space similar to HSL but that better match perception by leveraging the Oklab color space which is designed to be simple to use, while doing a good job at predicting perceived lightness, chroma and hue.

Okhsv and Okhsl color spaces

enumPickerShapeType:🔗

PickerShapeTypeSHAPE_HSV_RECTANGLE =0

HSV Color Model rectangle color space.

PickerShapeTypeSHAPE_HSV_WHEEL =1

HSV Color Model rectangle color space with a wheel.

PickerShapeTypeSHAPE_VHS_CIRCLE =2

HSV Color Model circle color space. Use Saturation as a radius.

PickerShapeTypeSHAPE_OKHSL_CIRCLE =3

HSL OK Color Model circle color space.

PickerShapeTypeSHAPE_NONE =4

The color space shape and the shape select button are hidden. Can't be selected from the shapes popup.

PickerShapeTypeSHAPE_OK_HS_RECTANGLE =5

OKHSL Color Model rectangle with constant lightness.

PickerShapeTypeSHAPE_OK_HL_RECTANGLE =6

OKHSL Color Model rectangle with constant saturation.

Property Descriptions

boolcan_add_swatches =true🔗

• voidset_can_add_swatches(value:bool)

• boolare_swatches_enabled()

Iftrue, it's possible to add presets under Swatches. Iffalse, the button to add presets is disabled.

Colorcolor =Color(1,1,1,1)🔗

• voidset_pick_color(value:Color)

• Colorget_pick_color()

The currently selected color.

ColorModeTypecolor_mode =0🔗

• voidset_color_mode(value:ColorModeType)

• ColorModeTypeget_color_mode()

The currently selected color mode.

boolcolor_modes_visible =true🔗

• voidset_modes_visible(value:bool)

• boolare_modes_visible()

Iftrue, the color mode buttons are visible.

booldeferred_mode =false🔗

• voidset_deferred_mode(value:bool)

• boolis_deferred_mode()

Iftrue, the color will apply only after the user releases the mouse button, otherwise it will apply immediately even in mouse motion event (which can cause performance issues).

booledit_alpha =true🔗

• voidset_edit_alpha(value:bool)

• boolis_editing_alpha()

Iftrue, shows an alpha channel slider (opacity).

booledit_intensity =true🔗

• voidset_edit_intensity(value:bool)

• boolis_editing_intensity()

Iftrue, shows an intensity slider. The intensity is applied as follows: multiply the color by2**intensity in linear RGB space, and then convert it back to sRGB.

boolhex_visible =true🔗

• voidset_hex_visible(value:bool)

• boolis_hex_visible()

Iftrue, the hex color code input field is visible.

PickerShapeTypepicker_shape =0🔗

• voidset_picker_shape(value:PickerShapeType)

• PickerShapeTypeget_picker_shape()

The shape of the color space view.

boolpresets_visible =true🔗

• voidset_presets_visible(value:bool)

• boolare_presets_visible()

Iftrue, the Swatches and Recent Colors presets are visible.

boolsampler_visible =true🔗

• voidset_sampler_visible(value:bool)

• boolis_sampler_visible()

Iftrue, the color sampler and color preview are visible.

boolsliders_visible =true🔗

• voidset_sliders_visible(value:bool)

• boolare_sliders_visible()

Iftrue, the color sliders are visible.

Method Descriptions

voidadd_preset(color:Color)🔗

Adds the given color to a list of color presets. The presets are displayed in the color picker and the user will be able to select them.

Note: The presets list is only forthis color picker.

voidadd_recent_preset(color:Color)🔗

Adds the given color to a list of color recent presets so that it can be picked later. Recent presets are the colors that were picked recently, a new preset is automatically created and added to recent presets when you pick a new color.

Note: The recent presets list is only forthis color picker.

voiderase_preset(color:Color)🔗

Removes the given color from the list of color presets of this color picker.

voiderase_recent_preset(color:Color)🔗

Removes the given color from the list of color recent presets of this color picker.

PackedColorArrayget_presets()const🔗

Returns the list of colors in the presets of the color picker.

PackedColorArrayget_recent_presets()const🔗

Returns the list of colors in the recent presets of the color picker.

Theme Property Descriptions

Colorfocused_not_editing_cursor_color =Color(1,1,1,0.275)🔗

Color of rectangle or circle drawn when a picker shape part is focused but not editable via keyboard or joypad. Displayedover the picker shape, so a partially transparent color should be used to ensure the picker shape remains visible.

intcenter_slider_grabbers =1🔗

Overrides theSlider.center_grabber theme property of the sliders.

inth_width =30🔗

The width of the hue selection slider.

intlabel_width =10🔗

The minimum width of the color labels next to sliders.

intmargin =4🔗

The margin around theColorPicker.

intsv_height =256🔗

The height of the saturation-value selection box.

intsv_width =256🔗

The width of the saturation-value selection box.

Texture2Dadd_preset🔗

The icon for the "Add Preset" button.

Texture2Dbar_arrow🔗

The texture for the arrow grabber.

Texture2Dcolor_hue🔗

Custom texture for the hue selection slider on the right.

Texture2Dcolor_script🔗

The icon for the button that switches color text to hexadecimal.

Texture2Dexpanded_arrow🔗

The icon for color preset drop down menu when expanded.

Texture2Dfolded_arrow🔗

The icon for color preset drop down menu when folded.

Texture2Dmenu_option🔗

The icon for color preset option menu.

Texture2Doverbright_indicator🔗

The indicator used to signalize that the color value is outside the 0-1 range.

Texture2Dpicker_cursor🔗

The image displayed over the color box/circle (depending on thepicker_shape), marking the currently selected color.

Texture2Dpicker_cursor_bg🔗

The fill image displayed behind the picker cursor.

Texture2Dsample_bg🔗

Background panel for the color preview box (visible when the color is translucent).

Texture2Dsample_revert🔗

The icon for the revert button (visible on the middle of the "old" color when it differs from the currently selected color). This icon is modulated with a dark color if the "old" color is bright enough, so the icon should be bright to ensure visibility in both scenarios.

Texture2Dscreen_picker🔗

The icon for the screen color picker button.

Texture2Dshape_circle🔗

The icon for circular picker shapes.

Texture2Dshape_rect🔗

The icon for rectangular picker shapes.

Texture2Dshape_rect_wheel🔗

The icon for rectangular wheel picker shapes.

StyleBoxpicker_focus_circle🔗

TheStyleBox used when the circle-shaped part of the picker is focused. Displayedover the picker shape, so a partially transparentStyleBox should be used to ensure the picker shape remains visible. AStyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign aStyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.

StyleBoxpicker_focus_rectangle🔗

TheStyleBox used when the rectangle-shaped part of the picker is focused. Displayedover the picker shape, so a partially transparentStyleBox should be used to ensure the picker shape remains visible. AStyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign aStyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.

StyleBoxsample_focus🔗

TheStyleBox used for the old color sample part when it is focused. Displayedover the sample, so a partially transparentStyleBox should be used to ensure the picker shape remains visible. AStyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign aStyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.