Class ColorWheel
A customizable color wheel component for intuitive color selection in Unity UI applications.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class ColorWheel : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, IInputElement<float>, IValidatableElement<float>, INotifyValueChanging<float>, INotifyValueChanged<float>Remarks
The ColorWheel is an interactive component that enables users to select colors through a circular interface. It provides a natural and intuitive way to choose colors by rotating around the color spectrum.
The component visualizes colors in a circular arrangement, with a draggable thumb that users can move to select different hues. The selected color is displayed in a swatch within the thumb indicator.
In addition to hue selection through rotation, the ColorWheel supports customization of saturation, brightness, and opacity. It also features a configurable checkerboard background pattern to better visualize transparency.
The inner radius should be kept between 0 and 0.5 (exclusive) to maintain proper wheel visualization and interaction.
Examples
Basic ColorWheel Setup
Basic UXML setup for a color wheel with default settings.
<ColorWheel value="0.0" saturation="1.0" brightness="1.0" opacity="1.0" style="width: 200px; height: 200px;"/>Custom ColorWheel with Modified Properties
UXML setup for a color wheel with custom properties.
<ColorWheel
value="0.33"
saturation="0.8"
brightness="0.9"
opacity="0.9"
inner-radius="0.3"
checker-size="8"
style="width: 300px; height: 300px;"/>Code Example: Creating and Configuring a ColorWheel
Creating a ColorWheel in code with event handling.
var colorWheel = new ColorWheel
{
style = { width = 250, height = 250 },
value = 0.5f, // Start at cyan
saturation = 0.9f,
brightness = 1.0f,
opacity = 0.95f,
innerRadius = 0.35f
};
colorWheel.RegisterValueChangedCallback(evt =>
{
Debug.Log($"Color changed to: ");
});
parentElement.Add(colorWheel);
Constructors
ColorWheel()
Default constructor.
Declaration
public ColorWheel()Fields
imageUssClassName
The ColorWheel image styling class.
Declaration
public const string imageUssClassName = "appui-colorwheel__image"Field Value
| Type | Description |
|---|---|
| string |
thumbSwatchUssClassName
The ColorWheel thumb swatch styling class.
Declaration
public const string thumbSwatchUssClassName = "appui-colorwheel__thumbswatch"Field Value
| Type | Description |
|---|---|
| string |
thumbUssClassName
The ColorWheel thumb styling class.
Declaration
public const string thumbUssClassName = "appui-colorwheel__thumb"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The ColorWheel main styling class.
Declaration
public const string ussClassName = "appui-colorwheel"Field Value
| Type | Description |
|---|---|
| string |
Properties
brightness
The brightness of the color wheel.
Declaration
[CreateProperty]
[UxmlAttribute]
[Range(0, 1)]
public float brightness { get; set; }Property Value
| Type | Description |
|---|---|
| float |
checkerColor1
The first color of the checkerboard pattern.
Declaration
[CreateProperty]
[UxmlAttribute]
public Color checkerColor1 { get; set; }Property Value
| Type | Description |
|---|---|
| Color |
checkerColor2
The second color of the checkerboard pattern.
Declaration
[CreateProperty]
[UxmlAttribute]
public Color checkerColor2 { get; set; }Property Value
| Type | Description |
|---|---|
| Color |
checkerSize
The size of the checkerboard pattern.
Declaration
[CreateProperty]
[UxmlAttribute]
[Min(0)]
public int checkerSize { get; set; }Property Value
| Type | Description |
|---|---|
| int |
incrementFactor
The factor by which the value is incremented when interacting with the wheel from the keyboard.
Declaration
[CreateProperty]
[UxmlAttribute]
[Min(1E-05)]
public float incrementFactor { get; set; }Property Value
| Type | Description |
|---|---|
| float |
innerRadius
The inner radius of the color wheel.
Declaration
[CreateProperty]
[UxmlAttribute]
[Range(0, 0.49999)]
public float innerRadius { get; set; }Property Value
| Type | Description |
|---|---|
| float |
invalid
The ColorWheel invalid state.
Declaration
[CreateProperty]
[UxmlAttribute]
public bool invalid { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
opacity
The opacity of the color wheel. Note that a checkerboard pattern is always drawn behind the color wheel.
Declaration
[CreateProperty]
[UxmlAttribute]
[Range(0, 1)]
public float opacity { get; set; }Property Value
| Type | Description |
|---|---|
| float |
saturation
The saturation of the color wheel.
Declaration
[CreateProperty]
[UxmlAttribute]
[Range(0, 1)]
public float saturation { get; set; }Property Value
| Type | Description |
|---|---|
| float |
selectedColor
The currently selected color.
Declaration
[CreateProperty(ReadOnly = true)]
public Color selectedColor { get; }Property Value
| Type | Description |
|---|---|
| Color |
validateValue
The ColorWheel validation function.
Declaration
[CreateProperty]
public Func<float, bool> validateValue { get; set; }Property Value
| Type | Description |
|---|---|
| Func<float, bool> |
value
The hue value of the color wheel.
Declaration
[CreateProperty]
[UxmlAttribute]
public float value { get; set; }Property Value
| Type | Description |
|---|---|
| float |
Methods
SetValueWithoutNotify(float)
Sets the value without sending any event.
Declaration
public void SetValueWithoutNotify(float newValue)Parameters
| Type | Name | Description |
|---|---|---|
| float | newValue | The new value to set. |