ColorPicker

Color selection with palette grid, hex entry, and preview swatch.

Overview

ColorPicker extends Control and provides an interactive color selection experience within the terminal. The control displays a 16-color palette grid arranged in 2 rows of 8 columns, a preview swatch showing the currently selected color, and a hex value display. Users navigate the palette with arrow keys and press Enter to select a color, or type hex digits (0–9, A–F) directly for precise color entry. The hex input buffer is shown in real time and committed on Enter. Backspace removes the last hex digit, and Escape cancels the current hex input, reverting to the palette selection.

Basic Example

<StackPanel Orientation="Vertical">
  <TextBlock Text="Pick a color:" />
  <ColorPicker />
</StackPanel>

Properties

Property	Type	Default	Description
SelectedColor	Color	White	The currently selected color value.
FocusColor	Color	Cyan	Border color when the control has keyboard focus.
HoverColor	Color	Yellow	Border color when the mouse hovers over the control.
Width	Size	Auto	Explicit width of the control.
Height	Size	Auto	Explicit height of the control.

Events

Event	Type	Description
SelectedColorChanged	EventHandler<Color>	Raised when the selected color changes, either through palette navigation or hex entry.

Examples

Basic Color Picker

<StackPanel Orientation="Vertical">
  <TextBlock Text="Theme color:" />
  <ColorPicker />
</StackPanel>

Pre-Set Color

<StackPanel Orientation="Vertical">
  <TextBlock Text="Background color:" />
  <ColorPicker SelectedColor="Blue"
               FocusColor="Green" />
</StackPanel>

With Data Binding

<StackPanel Orientation="Vertical">
  <TextBlock Text="Accent color:" />
  <ColorPicker SelectedColor="{Binding AccentColor, Mode=TwoWay}" />
  <TextBlock Text="Preview:"
             Foreground="{Binding AccentColor}" />
</StackPanel>

Keyboard Shortcuts

Key	Action
Left Arrow	Move to the previous color in the palette grid.
Right Arrow	Move to the next color in the palette grid.
Up Arrow	Move to the color above in the palette grid.
Down Arrow	Move to the color below in the palette grid.
Enter / Space	Select the currently highlighted palette color.
0–9, A–F	Direct hex entry — appends to the hex input buffer.
Backspace	Delete the last hex digit from the input buffer.
Escape	Cancel the current hex input and return to palette selection.

Key Concepts

ColorPicker extends Control and is focusable by default, supporting both keyboard palette navigation and direct hex entry.
The 16-color palette is arranged in a 2×8 grid showing the standard terminal colors (Black, Red, Green, Yellow, Blue, Magenta, Cyan, White and their bright variants).
A preview swatch next to the palette renders a filled block in the currently selected color, giving immediate visual feedback.
Hex entry mode activates automatically when you type a hex digit (0–9, A–F). The buffer is displayed as #RRGGBB and committed on Enter.
The SelectedColorChanged event fires whenever the color changes, whether by palette selection or hex commit.
Use SelectedColor="{Binding ...}" with Mode=TwoWay for two-way data binding to a view model property.