Inheritance #

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 a ColorPickerButton instead if you need a button that brings up a ColorPicker in a popup.

Members #

`var can_add_swatches: bool = true`#

If true, it's possible to add presets under Swatches. If false, the button to add presets is disabled.

`var color: Color = Color(1, 1, 1, 1)`#

The currently selected color.

`var color_mode = MODE_RGB`#

The currently selected color mode. See ColorModeType.

`var color_modes_visible: bool = true`#

If true, the color mode buttons are visible.

`var deferred_mode: bool = false`#

If true, 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).

`var edit_alpha: bool = true`#

If true, shows an alpha channel slider (opacity).

`var hex_visible: bool = true`#

If true, the hex color code input field is visible.

`var picker_shape = SHAPE_HSV_RECTANGLE`#

The shape of the color space view. See PickerShapeType.

`var presets_visible: bool = true`#

If true, the Swatches and Recent Colors presets are visible.

`var sampler_visible: bool = true`#

If true, the color sampler and color preview are visible.

`var sliders_visible: bool = true`#

If true, the color sliders are visible.

Methods #

`func add_preset(color: Color) -> void`#

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 for this color picker.

`func add_recent_preset(color: Color) -> void`#

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 for this color picker.

`func erase_preset(color: Color) -> void`#

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

`func erase_recent_preset(color: Color) -> void`#

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

`const func get_presets() -> PackedColorArray`#

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

`const func get_recent_presets() -> PackedColorArray`#

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

Annotations #

Constants #

`const MODE_RGB = 0 enum ColorModeType`#

Allows editing the color with Red/Green/Blue sliders.

`const MODE_HSV = 1 enum ColorModeType`#

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

`const MODE_RAW = 2 enum ColorModeType`#

Allows the color R, G, B component values to go beyond 1.0, which can be used for certain special operations that require it (like tinting without darkening or rendering sprites in HDR).

`const MODE_OKHSL = 3 enum ColorModeType`#

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

`const SHAPE_HSV_RECTANGLE = 0 enum PickerShapeType`#

HSV Color Model rectangle color space.

`const SHAPE_HSV_WHEEL = 1 enum PickerShapeType`#

HSV Color Model rectangle color space with a wheel.

`const SHAPE_VHS_CIRCLE = 2 enum PickerShapeType`#

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

`const SHAPE_OKHSL_CIRCLE = 3 enum PickerShapeType`#

HSL OK Color Model circle color space.

`const SHAPE_NONE = 4 enum PickerShapeType`#

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

Constructors #

Enums #

ColorModeType#

enum ColorModeType {
	MODE_RGB = 0,
	MODE_HSV = 1,
	MODE_RAW = 2,
	MODE_OKHSL = 3,
}

PickerShapeType#

enum PickerShapeType {
	SHAPE_HSV_RECTANGLE = 0,
	SHAPE_HSV_WHEEL = 1,
	SHAPE_VHS_CIRCLE = 2,
	SHAPE_OKHSL_CIRCLE = 3,
	SHAPE_NONE = 4,
}

Operators #

Signals #

`signal color_changed(color: Color)`#

Emitted when the color is changed.

`signal preset_added(color: Color)`#

Emitted when a preset is added.

`signal preset_removed(color: Color)`#

Emitted when a preset is removed.

Theme Items #

`self["theme_override_constants/center_slider_grabbers"] = 1 as int`#

Overrides the Slider.center_grabber theme property of the sliders.

`self["theme_override_constants/h_width"] = 30 as int`#

The width of the hue selection slider.

`self["theme_override_constants/label_width"] = 10 as int`#

The minimum width of the color labels next to sliders.

`self["theme_override_constants/margin"] = 4 as int`#

The margin around the ColorPicker.

`self["theme_override_constants/sv_height"] = 256 as int`#

The height of the saturation-value selection box.

`self["theme_override_constants/sv_width"] = 256 as int`#

The width of the saturation-value selection box.

`self["theme_override_icons/add_preset"] = icon as Texture2D`#

The icon for the "Add Preset" button.

`self["theme_override_icons/bar_arrow"] = icon as Texture2D`#

The texture for the arrow grabber.

`self["theme_override_icons/color_hue"] = icon as Texture2D`#

Custom texture for the hue selection slider on the right.

`self["theme_override_icons/expanded_arrow"] = icon as Texture2D`#

The icon for color preset drop down menu when expanded.

`self["theme_override_icons/folded_arrow"] = icon as Texture2D`#

The icon for color preset drop down menu when folded.

`self["theme_override_icons/menu_option"] = icon as Texture2D`#

The icon for color preset option menu.

`self["theme_override_icons/overbright_indicator"] = icon as Texture2D`#

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

`self["theme_override_icons/picker_cursor"] = icon as Texture2D`#

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

`self["theme_override_icons/picker_cursor_bg"] = icon as Texture2D`#

The fill image displayed behind the picker cursor.

`self["theme_override_icons/sample_bg"] = icon as Texture2D`#

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

`self["theme_override_icons/sample_revert"] = icon as Texture2D`#

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.

`self["theme_override_icons/screen_picker"] = icon as Texture2D`#

The icon for the screen color picker button.

`self["theme_override_icons/shape_circle"] = icon as Texture2D`#

The icon for circular picker shapes.

`self["theme_override_icons/shape_rect"] = icon as Texture2D`#

The icon for rectangular picker shapes.

`self["theme_override_icons/shape_rect_wheel"] = icon as Texture2D`#

The icon for rectangular wheel picker shapes.

Inheritance #

ColorPicker #

Members #

var can_add_swatches: bool = true#

var color: Color = Color(1, 1, 1, 1)#

var color_mode = MODE_RGB#

var color_modes_visible: bool = true#

var deferred_mode: bool = false#

var edit_alpha: bool = true#

var hex_visible: bool = true#

var picker_shape = SHAPE_HSV_RECTANGLE#

var presets_visible: bool = true#

var sampler_visible: bool = true#

var sliders_visible: bool = true#

Methods #

func add_preset(color: Color) -> void#

func add_recent_preset(color: Color) -> void#

func erase_preset(color: Color) -> void#

func erase_recent_preset(color: Color) -> void#

const func get_presets() -> PackedColorArray#

const func get_recent_presets() -> PackedColorArray#

Annotations #

Constants #

const MODE_RGB = 0 enum ColorModeType#

const MODE_HSV = 1 enum ColorModeType#

const MODE_RAW = 2 enum ColorModeType#

const MODE_OKHSL = 3 enum ColorModeType#

const SHAPE_HSV_RECTANGLE = 0 enum PickerShapeType#

const SHAPE_HSV_WHEEL = 1 enum PickerShapeType#

const SHAPE_VHS_CIRCLE = 2 enum PickerShapeType#

const SHAPE_OKHSL_CIRCLE = 3 enum PickerShapeType#

const SHAPE_NONE = 4 enum PickerShapeType#

Constructors #

Enums #

ColorModeType#

PickerShapeType#

Operators #

Signals #

signal color_changed(color: Color)#

signal preset_added(color: Color)#

signal preset_removed(color: Color)#

Theme Items #

self["theme_override_constants/center_slider_grabbers"] = 1 as int#

self["theme_override_constants/h_width"] = 30 as int#

self["theme_override_constants/label_width"] = 10 as int#

self["theme_override_constants/margin"] = 4 as int#

self["theme_override_constants/sv_height"] = 256 as int#

self["theme_override_constants/sv_width"] = 256 as int#

self["theme_override_icons/add_preset"] = icon as Texture2D#

self["theme_override_icons/bar_arrow"] = icon as Texture2D#

self["theme_override_icons/color_hue"] = icon as Texture2D#

self["theme_override_icons/expanded_arrow"] = icon as Texture2D#

self["theme_override_icons/folded_arrow"] = icon as Texture2D#

self["theme_override_icons/menu_option"] = icon as Texture2D#

self["theme_override_icons/overbright_indicator"] = icon as Texture2D#

self["theme_override_icons/picker_cursor"] = icon as Texture2D#

self["theme_override_icons/picker_cursor_bg"] = icon as Texture2D#

self["theme_override_icons/sample_bg"] = icon as Texture2D#

self["theme_override_icons/sample_revert"] = icon as Texture2D#

self["theme_override_icons/screen_picker"] = icon as Texture2D#

self["theme_override_icons/shape_circle"] = icon as Texture2D#

self["theme_override_icons/shape_rect"] = icon as Texture2D#

self["theme_override_icons/shape_rect_wheel"] = icon as Texture2D#

Tutorials #