- Edited
This is something easy to implement, but kind of convoluted to figure out. I went digging because the ColorPicker's default focus_mode settings don't allow it to behave the way I'd expect for a videogame.
First, I learned that the ColorPickerButton instances a whole tree of nodes as if it was a scene. In order to change anything, you have to find the right child in each part of the tree -- I just did that using the "Remote" function in the editor's Scene menu, so if you're reading this, you don't have to. :)
It works well to connect the button's picker_created() signal to a script. It is emitted just one time when the button is first pressed, and it keeps the customized ColorPicker after that. Here is a GDScript template to access the relevant nodes you might like to customize (I've used quote blocks because the "code" markup stubbornly refuses to cooperate; there's only one level of indentation anyway):
func _on_ColorPickerButton_picker_created():
var picker = $ColorPickerButton.get_child(0).get_child(0)
picker.get_child(0).get_child(0) # Visual saturation/value selector box
picker.get_child(0).get_child(1) # Visual hue slider
picker.get_child(1).get_child(0) # Selected color
picker.get_child(1).get_child(1) # Eyedropper
picker.get_child(3) # Divider below selected color (if hiding all above)
picker.get_child(4).get_child(0).get_child(1) # Red/Hue slider
picker.get_child(4).get_child(0).get_child(2) # Red/Hue spinbox
picker.get_child(4).get_child(1).get_child(1) # Green/Saturation slider
picker.get_child(4).get_child(1).get_child(2) # Green/Saturation spinbox
picker.get_child(4).get_child(2).get_child(1) # Blue/Value slider
picker.get_child(4).get_child(2).get_child(2) # Blue/Value spinbox
picker.get_child(4).get_child(3) # Alpha row (hidden by default)
picker.get_child(4).get_child(4).get_child(0) # HSV toggle
picker.get_child(4).get_child(4).get_child(1) # "Raw" toggle
picker.get_child(4).get_child(4).get_child(2) # Hex '#' label (why focus_mode == 2??)
picker.get_child(4).get_child(4).get_child(3) # Hex LineEdit
picker.get_child(5) # Divider to presets (if hiding the preset function)
picker.get_child(6) # Preset colors (all of them)
picker.get_child(7) # Add preset button
And here is an example that enables the player to select a color without having to reach for a mouse or keyboard, by switching focus_mode settings. It is more like selecting a color in most videogames I play that have RGB/HSV selectors:
func _on_ColorPickerButton_picker_created():
var picker = $ColorPickerButton.get_child(0).get_child(0)
picker.get_child(1).get_child(1).set_focus_mode(1) # Eye dropper is a mouse tool
# Allow sliders to acquire focus and reserve the SpinBox's LineEdit (child 0) for a mouse
picker.get_child(4).get_child(0).get_child(1).set_focus_mode(2) # Red/Hue slider
picker.get_child(4).get_child(0).get_child(2).get_child(0).set_focus_mode(1) # Red/Hue spinbox
picker.get_child(4).get_child(1).get_child(1).set_focus_mode(2) # Green/Sat slider
picker.get_child(4).get_child(1).get_child(2).get_child(0).set_focus_mode(1) # Green/Sat spinbox
picker.get_child(4).get_child(2).get_child(1).set_focus_mode(2) # Blue/Value slider
picker.get_child(4).get_child(2).get_child(2).get_child(0).set_focus_mode(1) # Blue/Value spinbox
picker.get_child(4).get_child(4).get_child(1).hide() # Raw toggle; not a conventional feature
picker.get_child(4).get_child(4).get_child(2).set_focus_mode(0) # Skip the hex '#' label!
picker.get_child(4).get_child(4).get_child(3).set_focus_mode(1) # Hex LineEdit