ColorPicker

ColorPicker provides a customizable, general-purpose control for selecting colors in an RGB or HSV color space. You can use ColorPicker as-is, or build a custom color picker from the related primitive components.

ColorPicker includes a family of related components. Each primitive component can be used on its own, or mixed and matched with the others to compose a custom color picker.

Color picker components

• ColorSpectrum (primitive): Two-dimensional spectrum for color selection.
• ColorSlider (primitive): Slider with a background that represents a single color component.
• ColorPreviewer (primitive): Shows a preview color with optional accent colors.
• ColorView: Presents a color for user editing using a spectrum, palette and component sliders.
• ColorPicker: Presents a color for user editing using a spectrum, palette and component sliders within a dropdown. Editing is available when the dropdown flyout is open. Otherwise, only the preview color is shown.

When to use

This control is intended to act as a direct color selection interface with options for developer customization. Typically, it is configured either as a canvas-type ColorView control or a compact ColorPicker dropdown.

For apps with more special-purpose needs, each control and primitive component can be independently customized to create a new color picker, without needing to work with complex rendering and color logic.

Your usage options for this control are:

1. Use ColorView or ColorPicker as-is, directly in your app.
2. Customize ColorView or ColorPicker using the included properties. (e.g., To disable component sliders, show different palettes, hide tabs, etc.)
3. Create a new color picker using novel combinations of the provided primitive components.
4. Re-template the components to create a brand-new, fully customized color picker.

How to implement ColorPicker in your app

Avalonia is used in some resource-constrained environments, such as embedded devices. For this and other reasons, certain larger controls, such as ColorPicker, are not included with the main Avalonia NuGet packages.

To add ColorPicker to your app:

1. Add the Avalonia.Controls.ColorPicker package to your project.
2. In App.axaml, add control themes and styles for the color picker controls:
   • Fluent theme: <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Fluent/Fluent.xaml" />
   • Simple theme: <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Simple/Simple.xaml" />

note

This step is not required for some theme packages, such as FluentAvalonia, which include all controls by default.

Color palettes

The following predefined color palettes are provided with Avalonia.Controls.ColorPicker, which implement the IColorPalette interface. Instances of these palettes may be set to the Palette property of a ColorView or ColorPicker.

Palette	Value and description
	FluentColorPalette Contains the Fluent color palette found in Windows 10 and later. This is the default color palette.
	FlatColorPalette Contains the full Flat UI color palette.
	FlatHalfColorPalette Contains half of the Flat UI color palette, intended for better usability on mobile devices.
	MaterialColorPalette Contains most of the Material design color palette. The A100-A700 shades of each color, as well as black and white, are excluded.
	MaterialHalfColorPalette Contains half of the Material design color palette, intended for better usability on mobile devices.
	SixteenColorPalette Contains the standard sixteen color palette from the HTML 4.01 specification.

See also

• ColorView control
• ColorPicker API reference
• ColorPicker.cs source code on GitHub
• Color palettes source code on GitHub