#ColorPicker

A ColorPicker is a BaseField<Color>. It has a saturation/brightness square or a color wheel, a hue bar, an alpha bar, a preview, a hex input, RGBA inputs (0 to 255) and HSV inputs (H 0 to 360, S and V 0 to 100). Parts says which of them show.

<UIToolbox.ColorPicker label="Theme" value="#FF6B35FF" presets="#FF6B35,#004E89,#009639" />
<UIToolbox.ColorPicker show-alpha="false" recent-count="0" />
<UIToolbox.ColorPicker label="Accent" compact="true" eyedropper="false" />
<UIToolbox.ColorPicker shape="Wheel" harmony="Triadic" />
<UIToolbox.ColorPicker parts="Area, Bars" />

• A drag in the square, the wheel or a bar changes the value on each move, as a Slider does. Committed comes one time, at the release: use it for work that must not run on each move, such as a save.
• The area and each bar take the focus; the marker has the accent color then. The arrow keys, or the stick or D-pad of a gamepad, move the value by KEY_STEP. Committed comes one time, when the focus leaves. A move past the edge of the area or the bar moves the focus on, so a gamepad can leave it.
• A color goes to the recent row when a drag ends, an input is edited, or a swatch is clicked. A color already in the row moves to the front.
• A swatch takes the focus. Enter, Space or the Submit button of a gamepad picks its color, as a click does.
• The picker keeps the hue and saturation apart from the value. A gray keeps its hue and black keeps its saturation, so a move back to a bright color does not reset them.
• The hex input also takes hex without #. A text that is not a color is ignored, and the input shows the value again.
• The inputs commit on Enter or when they lose focus. Their own change events stop in the picker; only ChangeEvent<Color> leaves it.
• The eyedropper reads the rendered frame with ElementImage, so it works in Play mode on runtime panels only; StartEyedropper returns false elsewhere. The pick keeps the alpha of the value and adds the color to the recent row. The click goes to nothing else. Another mouse button or Escape cancels.
• While the eyedropper waits for the click, the preview shows the color under the pointer and follows each move. PickPreview gives that color, or null when the picker is not picking. The value changes only on the click.
• In compact mode, a pick outside the popup also closes the popup.

#Parts

Parts is a set of flags. A part that is not in the set does not show and takes no space. In UXML, write the names with commas; in C#, join them with |.

<!-- Only the square and the hue bar -->
<UIToolbox.ColorPicker parts="Area, Bars" show-alpha="false" />
<!-- A swatch in the field; its popup has only the hex input -->
<UIToolbox.ColorPicker parts="Hex" compact="true" />

picker.Parts = ColorPickerParts.Area | ColorPickerParts.Bars | ColorPickerParts.Hex;
picker.Parts &= ~ColorPickerParts.Recent;   // takes one part away

• ShowAlpha, Eyedropper and Compact work as before, together with Parts: the alpha bar needs Bars and ShowAlpha, the A input needs Rgb and ShowAlpha, and the Pick button needs Preview and Eyedropper.
• The preset row also needs Presets with a color, the recent row a recent color, and the harmony row a Harmony.
• Parts changes only what shows. The picker still records the recent colors without the Recent part; RecentCount 0 turns that off.

#Wheel and harmonies

With shape="Wheel", the area is a disc: the hue is on the angle (red at the right, then against the clock) and the saturation is on the radius, with white in the center. The bar next to it is the brightness. A drag, the keys and a gamepad work as in the square; a drag that leaves the disc stays on its edge.

Harmony gives the colors that go with the value. Each has the saturation, the brightness and the alpha of the value, and a hue at a fixed angle from it:

The wheel shows a small dot at each harmony color, and the Harmonies part is a row with a swatch for the value and each harmony color. A click on a swatch, or Enter on it, makes that color the value. The row also shows with the square.

<UIToolbox.ColorPicker name="paint" shape="Wheel" harmony="Triadic" value="#E4572E" />

var picker = root.Q<ColorPicker>("paint");
picker.RegisterValueChangedCallback(evt =>
{
    // The value first, then the harmony colors
    IReadOnlyList<Color> colors = picker.HarmonyColors;
    body.style.backgroundColor = colors[0];
    trim.style.backgroundColor = colors[1];
    glow.style.backgroundColor = colors[2];
});

// The same colors without a picker
Color[] triad = ColorHarmonies.Get(Color.red, ColorHarmony.Triadic);   // red, green, blue
float[] hues = ColorHarmonies.Hues(0.5f, ColorHarmony.Complementary);  // 0.5, 0

• HarmonyColors changes with the value and with Harmony only, so there is no event of its own: read it in the change event of the picker, and after you set Harmony.
• The picker uses its kept hue, so the harmony colors of a gray keep their places on the wheel. ColorHarmonies.Get sees only the color: for a gray, each harmony color is the same gray.

#Sizes

The picker takes the width that the layout or its style gives it. With all parts it needs 358 px (338 px without the alpha bar) for the area and the inputs side by side. In a narrower picker the inputs go under the area, and the area fills the width and stays square. There are no size classes: set a width.

<UIToolbox.ColorPicker style="width: 260px;" />

For a bigger area in a wide picker, set both sizes of the area in USS. The bars follow its height.

.big-picker .tb-color-picker__sv,
.big-picker .tb-color-picker__wheel {
    width: 220px;
    height: 220px;
}

#Styling

The square, the wheel, the bars and the preview are drawn in code; the markers, inputs and swatches are elements.