Class ColorSwatch
A visual element that displays a color or gradient with customizable appearance.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class ColorSwatch : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, INotifyValueChanged<Gradient>, ISizeableElementRemarks
The ColorSwatch component is a versatile visual element designed to display colors and gradients in your UI. It supports both single colors and complex gradients, making it ideal for color pickers, palettes, and visual indicators.
The component features a transparent checkerboard background to better visualize colors with alpha values, and supports various sizes and shapes to fit different design requirements.
For the best visual experience, ensure the ColorSwatch has adequate space to render properly, as it automatically adjusts its internal render texture based on the available space and device's scale factor.
Examples
Basic Usage Example — Creating a basic color swatch with UXML.
<ColorSwatch size="M" round="true" orientation="Horizontal" value="Fixed:[0,#FF0000];[1,#0000FF]+[0,1];[1,1]" />Create a color swatch programmatically — Creating a color swatch with gradient in code.
var swatch = new ColorSwatch();
swatch.size = Size.M;
swatch.round = true;
var gradient = new Gradient();
gradient.mode = GradientMode.Fixed;
gradient.SetKeys(
new[] {
new GradientColorKey(Color.red, 0),
new GradientColorKey(Color.blue, 0.5f),
new GradientColorKey(Color.green, 1)
},
new[] {
new GradientAlphaKey(1, 0),
new GradientAlphaKey(1, 1)
}
);
swatch.value = gradient;
Color Palette Example — Creating a simple color palette with multiple swatches.
var container = new VisualElement();
container.style.flexDirection = FlexDirection.Row;
container.style.flexWrap = Wrap.Wrap;
var colors = new[] { Color.red, Color.green, Color.blue, Color.yellow };
foreach (var color in colors)
{
var swatch = new ColorSwatch();
swatch.size = Size.S;
swatch.round = true;
swatch.color = color;
swatch.style.margin = 5;
container.Add(swatch);
}
Constructors
ColorSwatch()
Default Constructor.
Declaration
public ColorSwatch()Fields
imageUssClassName
The ColorSwatch image styling class.
Declaration
public const string imageUssClassName = "appui-colorswatch__image"Field Value
| Type | Description |
|---|---|
| string |
roundUssClassName
The ColorSwatch round styling class.
Declaration
public const string roundUssClassName = "appui-colorswatch--round"Field Value
| Type | Description |
|---|---|
| string |
sizeUssClassName
The ColorSwatch size styling class.
Declaration
public const string sizeUssClassName = "appui-colorswatch--size-"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The ColorSwatch main styling class.
Declaration
public const string ussClassName = "appui-colorswatch"Field Value
| Type | Description |
|---|---|
| string |
variantUssClassName
The ColorSwatch variant styling class.
Declaration
public const string variantUssClassName = "appui-colorswatch--"Field Value
| Type | Description |
|---|---|
| string |
Properties
color
The single color of the ColorSwatch. Setting this property will overwrite the current gradient value to contain only the given single color value. The property's getter always return the first item of the gradient.
Declaration
[CreateProperty]
public Color color { get; set; }Property Value
| Type | Description |
|---|---|
| Color |
orientation
The orientation of the ColorSwatch.
Declaration
[CreateProperty]
[UxmlAttribute]
public Direction orientation { get; set; }Property Value
| Type | Description |
|---|---|
| Direction |
round
Round variant of the ColorSwatch.
Declaration
[CreateProperty]
[UxmlAttribute]
public bool round { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
size
The size of the ColorSwatch element.
Declaration
[CreateProperty]
[UxmlAttribute]
public Size size { get; set; }Property Value
| Type | Description |
|---|---|
| Size |
value
The color entry list.
Declaration
[CreateProperty]
[UxmlAttribute]
public Gradient value { get; set; }Property Value
| Type | Description |
|---|---|
| Gradient |
Methods
GetOrientationUssClassName(Direction)
Declaration
public static string GetOrientationUssClassName(Direction enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| Direction | enumValue |
Returns
| Type | Description |
|---|---|
| string |
GetSizeUssClassName(Size)
Declaration
public static string GetSizeUssClassName(Size enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| Size | enumValue |
Returns
| Type | Description |
|---|---|
| string |
Refresh()
Force the refresh of the visual element.
Declaration
public void Refresh()SetValueWithoutNotify(Gradient)
Set the color entry list value, without being notified of any changes.
Declaration
public void SetValueWithoutNotify(Gradient newValue)Parameters
| Type | Name | Description |
|---|---|---|
| Gradient | newValue | The new color entry list. |