Class ColorPicker

A color selection component that allows users to pick colors using various input methods including color wheel, RGB sliders, HSV sliders, and hex input.

Inheritance
object
CallbackEventHandler
Focusable
VisualElement
ColorPicker
Implements
Inherited Members
VisualElement.Focus()
VisualElement.Overlaps(Rect)
VisualElement.ToString()
VisualElement.TryGetBinding(BindingId, out Binding)
VisualElement.TryGetDataSourceContext(BindingId, out DataSourceContext)
VisualElement.TryGetLastBindingToUIResult(in BindingId, out BindingResult)
VisualElement.TryGetLastBindingToSourceResult(in BindingId, out BindingResult)
VisualElement.GetFirstOfType<T>()
VisualElement.GetFirstAncestorOfType<T>()
VisualElement.canGrabFocus
VisualElement.focusController
VisualElement.cacheAsBitmap
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, CallbackOptions)
CallbackEventHandler.NotifyPropertyChanged(in BindingId)
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class ColorPicker : VisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, INotifyValueChanged<Color>
Remarks

The ColorPicker is a versatile component that provides multiple ways for users to select and manipulate colors. It combines several color selection tools into a single cohesive interface:

  • A color wheel for intuitive hue selection
  • A saturation-value square for fine-tuning color brightness and intensity
  • RGB sliders for precise color adjustments
  • HSV sliders for alternative color space manipulation
  • Hex color input for direct color code entry
  • Optional alpha channel control for transparency adjustment

The component supports both mouse/touch interaction and keyboard navigation, making it accessible across different input methods.

Examples

Basic ColorPicker with all features enabled — UXML: Creating a fully featured ColorPicker.

<ColorPicker show-alpha="true" show-toolbar="true" show-hex="true" />

Creating and configuring a ColorPicker programmatically — C#: Creating and handling color changes.

var colorPicker = new ColorPicker();
colorPicker.showAlpha = true;
colorPicker.showToolbar = true;
colorPicker.showHex = true;
colorPicker.value = Color.blue;

// Register for color change events
colorPicker.RegisterValueChangedCallback(evt => {
Debug.Log($"Color changed from  to ");
});

Minimal ColorPicker for simple RGB color selection — UXML: Creating a minimal ColorPicker.

<ColorPicker show-alpha="false" show-toolbar="false" show-hex="false" />

Constructors

ColorPicker()

Default constructor.

Declaration
public ColorPicker()

Fields

alphaSliderUssClassName

The Alpha slider styling class.

Declaration
public const string alphaSliderUssClassName = "appui-colorpicker__alphaslider"
Field Value
Type Description
string

blueChannelSliderUssClassName

The RGB blue slider styling class.

Declaration
public const string blueChannelSliderUssClassName = "appui-colorpicker__blue-channel-slider"
Field Value
Type Description
string

brightnessSliderUssClassName

The brightness slider styling class.

Declaration
public const string brightnessSliderUssClassName = "appui-colorpicker__brightness-slider"
Field Value
Type Description
string

channelLabelUssClassName

The channel label styling class.

Declaration
public const string channelLabelUssClassName = "appui-colorpicker__channel-label"
Field Value
Type Description
string

channelRowUssClassName

The channel row styling class.

Declaration
public const string channelRowUssClassName = "appui-colorpicker__channel-row"
Field Value
Type Description
string

channelsContainerUssClassName

The Channels container styling class.

Declaration
public const string channelsContainerUssClassName = "appui-colorpicker__channels-container"
Field Value
Type Description
string

channelsDropdownUssClassName

The channels dropdown styling class.

Declaration
public const string channelsDropdownUssClassName = "appui-colorpicker__channels-dropdown"
Field Value
Type Description
string

greenChannelSliderUssClassName

The RGB green slider styling class.

Declaration
public const string greenChannelSliderUssClassName = "appui-colorpicker__green-channel-slider"
Field Value
Type Description
string

hdrUssClassName

The HDR styling class.

Declaration
public const string hdrUssClassName = "appui-colorpicker--hdr"
Field Value
Type Description
string

hexFieldUssClassName

The hex field styling class.

Declaration
public const string hexFieldUssClassName = "appui-colorpicker__hex-field"
Field Value
Type Description
string

hueSliderUssClassName

The hue slider styling class.

Declaration
public const string hueSliderUssClassName = "appui-colorpicker__hue-slider"
Field Value
Type Description
string

redChannelSliderUssClassName

The RGB red slider styling class.

Declaration
public const string redChannelSliderUssClassName = "appui-colorpicker__red-channel-slider"
Field Value
Type Description
string

saturationSliderUssClassName

The saturation slider styling class.

Declaration
public const string saturationSliderUssClassName = "appui-colorpicker__saturation-slider"
Field Value
Type Description
string

svSquareUssClassName

The SV square styling class.

Declaration
public const string svSquareUssClassName = "appui-colorpicker__svsquare"
Field Value
Type Description
string

toolbarUssClassName

The ColorPicker toolbar styling class.

Declaration
public const string toolbarUssClassName = "appui-colorpicker__colortoolbar"
Field Value
Type Description
string

ussClassName

The ColorPicker main styling class.

Declaration
public const string ussClassName = "appui-colorpicker"
Field Value
Type Description
string

wheelContainerUssClassName

The WheelContainer styling class.

Declaration
public const string wheelContainerUssClassName = "appui-colorpicker__wheelcontainer"
Field Value
Type Description
string

wheelUssClassName

The ColorWheel styling class.

Declaration
public const string wheelUssClassName = "appui-colorpicker__wheel"
Field Value
Type Description
string

Properties

contentContainer

The content container of the ColorPicker. This is null as the ColorPicker does not have a content container.

Declaration
public override VisualElement contentContainer { get; }
Property Value
Type Description
VisualElement
Overrides

hdr

Determines if the ColorPicker should display colors in HDR.

Declaration
[CreateProperty]
[UxmlAttribute]
public bool hdr { get; set; }
Property Value
Type Description
bool

previousValue

The previous color value. This color will be displayed in the toolbar.

Declaration
[CreateProperty]
[UxmlAttribute]
public Color previousValue { get; set; }
Property Value
Type Description
Color

showAlpha

Determines if the ColorPicker should display the alpha slider.

Declaration
[CreateProperty]
[UxmlAttribute]
public bool showAlpha { get; set; }
Property Value
Type Description
bool

showHex

Determines if the ColorPicker should display the hex field.

Declaration
[CreateProperty]
[UxmlAttribute]
public bool showHex { get; set; }
Property Value
Type Description
bool

showToolbar

Determines if the ColorPicker should display the toolbar.

Declaration
[CreateProperty]
[UxmlAttribute]
public bool showToolbar { get; set; }
Property Value
Type Description
bool

value

The current color value.

Declaration
[CreateProperty]
[UxmlAttribute]
public Color value { get; set; }
Property Value
Type Description
Color

Methods

OnEyeDropperClicked(EventBase)

Callback for when the eye dropper button is clicked. Starts the eye dropper tool.

Declaration
public void OnEyeDropperClicked(EventBase evt)
Parameters
Type Name Description
EventBase evt

The event that triggered the callback.

SetValueWithoutNotify(Color)

Sets the value without notifying the value changed callback.

Declaration
public void SetValueWithoutNotify(Color newValue)
Parameters
Type Name Description
Color newValue

The new color value.

Events

eyeDropperDismissed

Event triggered when the eye dropper tool is dismissed.

Declaration
public event Action<ColorPicker> eyeDropperDismissed
Event Type
Type Description
Action<ColorPicker>

eyeDropperShown

Event triggered when the eye dropper tool is shown.

Declaration
public event Action<ColorPicker> eyeDropperShown
Event Type
Type Description
Action<ColorPicker>

Implements

Extension Methods