Class reference
ColorPicker
Inherits VBoxContainer
A widget that provides an interface for selecting or modifying a color.
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 a ColorPickerButton instead if you need a button that brings up a ColorPicker in a popup.
Properties
bool can_add_swatches = true
bool can_add_swatches = trueIf true, it's possible to add presets under Swatches. If false, the button to add presets is disabled.
Color color = Color(1, 1, 1, 1)
Color color = Color(1, 1, 1, 1)The currently selected color.
int color_mode = 0
int color_mode = 0The currently selected color mode.
bool color_modes_visible = true
bool color_modes_visible = trueIf true, the color mode buttons are visible.
bool deferred_mode = false
bool deferred_mode = falseIf 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).
bool display_old_color = false
bool display_old_color = falsebool edit_alpha = true
bool edit_alpha = trueIf true, shows an alpha channel slider (opacity).
bool edit_intensity = true
bool edit_intensity = trueIf true, shows an intensity slider. The intensity is applied as follows: multiply the color by 2 ** intensity in linear RGB space, and then convert it back to sRGB.
bool hex_visible = true
bool hex_visible = trueIf true, the hex color code input field is visible.
float intensity = 0.0
float intensity = 0.0The currently selected intensity. Note: set_intensity clamps the value in the range [-10.0, 10.0]
Color old_color = Color(0, 0, 0, 1)
Color old_color = Color(0, 0, 0, 1)The currently stored old color. See also display_old_color.
int picker_shape = 0
int picker_shape = 0The shape of the color space view.
bool presets_visible = true
bool presets_visible = trueIf true, the Swatches and Recent Colors presets are visible.
bool sampler_visible = true
bool sampler_visible = trueIf true, the color sampler and color preview are visible.
bool sliders_visible = true
bool sliders_visible = trueIf true, the color sliders are visible.
Methods
void add_preset(Color color)
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 for this color picker.
void add_recent_preset(Color color)
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 for this color picker.
void erase_preset(Color color)
Color color)Removes the given color from the list of color presets of this color picker.
void erase_recent_preset(Color color)
Color color)Removes the given color from the list of color recent presets of this color picker.
PackedColorArray get_presets() const
PackedColorArray get_presets() constReturns the list of colors in the presets of the color picker.
PackedColorArray get_recent_presets() const
PackedColorArray get_recent_presets() constReturns the list of colors in the recent presets of the color picker.
Signals
Constants
MODE_RGB = 0
Allows editing the color with Red/Green/Blue sliders in sRGB color space.
MODE_HSV = 1
Allows editing the color with Hue/Saturation/Value sliders.
MODE_RAW = 2
This is replaced by MODE_LINEAR.
MODE_LINEAR = 2
Allows editing the color with Red/Green/Blue sliders in linear color space.
MODE_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
SHAPE_HSV_RECTANGLE = 0
HSV Color Model rectangle color space.
SHAPE_HSV_WHEEL = 1
HSV Color Model rectangle color space with a wheel.
SHAPE_VHS_CIRCLE = 2
HSV Color Model circle color space. Use Saturation as a radius.
SHAPE_OKHSL_CIRCLE = 3
HSL OK Color Model circle color space.
SHAPE_NONE = 4
The color space shape and the shape select button are hidden. Can't be selected from the shapes popup.
SHAPE_OK_HS_RECTANGLE = 5
OKHSL Color Model rectangle with constant lightness.
SHAPE_OK_HL_RECTANGLE = 6
OKHSL Color Model rectangle with constant saturation.
Theme properties
Color focused_not_editing_cursor_color = Color(1, 1, 1, 0.275)
Color focused_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. Displayed over the picker shape, so a partially transparent color should be used to ensure the picker shape remains visible.
int center_slider_grabbers = 1
int center_slider_grabbers = 1Overrides the Slider.center_grabber theme property of the sliders.
int h_width = 30
int h_width = 30The width of the hue selection slider.
int label_width = 10
int label_width = 10The minimum width of the color labels next to sliders.
int margin = 4
int margin = 4The margin around the ColorPicker.
int sv_height = 256
int sv_height = 256The height of the saturation-value selection box.
int sv_width = 256
int sv_width = 256The width of the saturation-value selection box.
Texture2D add_preset
Texture2D add_presetThe icon for the "Add Preset" button.
Texture2D bar_arrow
Texture2D bar_arrowThe texture for the arrow grabber.
Texture2D color_hue
Texture2D color_hueCustom texture for the hue selection slider on the right.
Texture2D color_script
Texture2D color_scriptThe icon for the button that switches color text to hexadecimal.
Texture2D expanded_arrow
Texture2D expanded_arrowThe icon for color preset drop down menu when expanded.
Texture2D folded_arrow
Texture2D folded_arrowThe icon for color preset drop down menu when folded.
Texture2D menu_option
Texture2D menu_optionThe icon for color preset option menu.
Texture2D overbright_indicator
Texture2D overbright_indicatorThe indicator used to signalize that the color value is outside the 0-1 range.
Texture2D picker_cursor
Texture2D picker_cursorThe image displayed over the color box/circle (depending on the picker_shape), marking the currently selected color.
Texture2D picker_cursor_bg
Texture2D picker_cursor_bgThe fill image displayed behind the picker cursor.
Texture2D sample_bg
Texture2D sample_bgBackground panel for the color preview box (visible when the color is translucent).
Texture2D sample_revert
Texture2D sample_revertThe 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.
Texture2D screen_picker
Texture2D screen_pickerThe icon for the screen color picker button.
Texture2D shape_circle
Texture2D shape_circleThe icon for circular picker shapes.
Texture2D shape_rect
Texture2D shape_rectThe icon for rectangular picker shapes.
Texture2D shape_rect_wheel
Texture2D shape_rect_wheelThe icon for rectangular wheel picker shapes.
Texture2D wheel_picker_cursor
Texture2D wheel_picker_cursorThe image displayed over the color wheel (depending on the picker_shape being SHAPE_HSV_WHEEL), marking the currently selected hue. This icon is rotated from the right side of the wheel.
StyleBox picker_focus_circle
StyleBox picker_focus_circleThe StyleBox used when the circle-shaped part of the picker is focused. Displayed over the picker shape, so a partially transparent StyleBox should be used to ensure the picker shape remains visible. A StyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a StyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.
StyleBox picker_focus_rectangle
StyleBox picker_focus_rectangleThe StyleBox used when the rectangle-shaped part of the picker is focused. Displayed over the picker shape, so a partially transparent StyleBox should be used to ensure the picker shape remains visible. A StyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a StyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.
StyleBox sample_focus
StyleBox sample_focusThe StyleBox used for the old color sample part when it is focused. Displayed over the sample, so a partially transparent StyleBox should be used to ensure the picker shape remains visible. A StyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a StyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.