Color Picker¶

The Color Picker is a floating, draggable widget available throughout all Xocoatl's tools panels.

Opening the Color Picker¶

From the Tools dock — open Tools from the plugin toolbar, then click the colour icon in the top bar of the dock to show the Color Picker window.
From the Timeline Animator — click a colour swatch in the Properties panel (next to any Color3 property like BackgroundColor3 or TextColor3).
From the Rich Text editor — click the colour or highlight buttons.
From Color Presets — click a swatch to apply that colour, or save your current picker value as a new preset.

Controls¶

Control	Description
Hue-Saturation square	Click or drag to pick a colour
Brightness slider	Adjust brightness independently
Hex input	Type a hex code (`#RRGGBB`)
R / G / B inputs	Type exact 0–255 values
Transparency slider	Set the alpha/transparency (0 = fully opaque, 1 = invisible)
Colour preview swatch	Shows the currently selected colour at a glance
Confirm	Apply the selected colour
Cancel	Close without applying

Dragging¶

The Color Picker window is fully draggable. Click and drag the title bar to move it anywhere on screen. It remembers its last position for the session.

Colour Presets¶

The right panel shows your saved colour presets, organised into palettes (folders).

The presets panel has two views, toggled by the folder icon button in the top-left of the nav bar:

Palette browser — a scrollable list of all your palettes. Each row shows the palette name, up to three colour pill swatches taken from the first presets in that palette, and a count of how many presets it contains. Click a row to open that palette.
Preset grid / list — shows all the presets in the currently selected palette. The nav bar title shows the active palette name; click the folder icon to go back to the palette browser.

The grid/list toggle button (top-right of the nav bar) switches between a dense grid view and a tall list view. In list view the preset name is shown directly on the swatch. In grid view the name appears as a tooltip on hover.

Gradient swatches — a left-click selects the gradient preset (for Apply gradient) and does not open the Gradient Editor by itself. If the Gradient Editor is already open (for example from the timeline), that click loads the preset into the editor and syncs the main picker to the first stop. Open the editor with Gradient editor… above Cancel / Confirm, or right‑click the swatch and choose Edit preset.

Creating and managing palettes¶

In the palette browser view, click the + button in the top-right to create a new palette. You will be prompted to name it.

Right-click a palette row to get options:

Rename — opens a modal prompt to rename the palette.
Delete — removes the palette and all its presets.

Creating and managing presets¶

In the preset view, use the buttons at the bottom of the panel:

Button	Action
+	Save the current picker colour as a new preset. You will be prompted to name it.
Duplicate	Duplicate the selected preset.
Delete	Remove the selected preset.

Right-click any preset swatch to rename, Edit preset, or delete it.

Edit preset — loads that preset into the picker (and opens the Gradient Editor for gradient presets). The swatch shows an edit icon instead of the usual checkmark. The main Cancel / Confirm buttons become Cancel edit / Confirm edit: they do not close the Color Picker. Confirm edit saves your changes to that preset; Cancel edit restores the picker (and gradient editor, if any) to how it was before you started the edit. Choosing another preset while editing cancels the current edit and applies the new preset. Switching to a different palette also cancels an in-progress edit.

Apply & copy from Studio selection¶

The bottom of the preset panel has two rows of icon buttons (same idea as Tools → Color Presets):

Apply row (top) — writes the current picker colour (and transparency) from the active swatch to your Studio selection: Background, Text, or Image colour, and Apply gradient when a gradient preset is selected (same behaviour as before). Each icon appears only when it applies (solid buttons when selection supports that property; gradient when a gradient chip is selected). Changes are undoable (ChangeHistory).
Copy row (below) — reads from the selection into the picker:

Button	What it copies
BG	`BackgroundColor3` of the selected element
Text	`TextColor3` of the selected element
Image	`ImageColor3` of the selected element

The copy row also has the Delete / Duplicate / Save preset actions on the right.

With multi-selection, each apply/copy icon is shown if any selected instance supports that property. Apply updates every applicable selected instance; copy still reads from the first applicable selected element. The Gradient editor line and Apply gradient icon follow the same idea: multiple UIGradients in the selection are all considered for live preview and labels. In the Gradient Editor, per-stop transparency from the picker is written to UIGradient.Transparency as a NumberSequence alongside Color (RGB only on the colour sequence).

Used inside the Timeline Animator¶

When editing a Color3 property (e.g. BackgroundColor3, TextColor3, ImageColor3) in the Properties panel, the sub-editor shows:

A coloured swatch square — click to open the Color Picker.
A "Pick Color" button — same action.
R / G / B number fields below — for precise numeric input without the picker.

Changes made via the picker are written to the clone and a keyframe is created at the current scrubber time.