Colors in Xamarin.Forms

2021-04-12

The Color structure lets you specify colors as Red-Green-Blue (RGB) values, Hue-Saturation-Luminosity (HSL) values, Hue-Saturation-Value (HSV) values, or with a color name. An Alpha channel is also available to indicate transparency.

Color objects can be created with the Color constructors, which can be used to specify a gray shade, an RGB value, or an RGB value with transparency. In all cases, arguments are double values ranging from 0 to 1.

You can also use static methods to create Color objects:

Color.FromRgb for double RGB values from 0 to 1.
Color.FromRgb for integer RGB values from 0 to 255.
Color.FromRgba for double RGB values with transparency.
Color.FromRgba for integer RGB values with transparency.
Color.FromHsla for double HSL values with transparency.
Color.FromHsv for double HSV values from 0 to 1.
Color.FromHsv for integer HSV values from 0 to 255.
Color.FromHsva for double HSV values with transparency.
Color.FromHsva for integer HSV values with transparency.
Color.FromUint for a uint value calculated as (B + 256 * (G + 256 * (R + 256 * A))).
Color.FromHex for a string format of hexadecimal digits in the form "#AARRGGBB" or "#RRGGBB" or "#ARGB" or "#RGB", where each letter corresponds to a hexadecimal digit for the alpha, red, green, and blue channels.

Once created, a Color object is immutable. The characteristics of the color can be obtained from the following properties:

R, which represents the red channel of the color.
G, which represents the green channel of the color.
B, which represents the blue channel of the color.
A, which represents the alpha channel of the color.
Hue, which represents the hue channel of the color.
Saturation, which represents the saturation channel of the color.
Luminosity, which represents the luminosity channel of the color.

These properties are all double values ranging from 0 to 1.

Named colors

The Color structure also defines 240 public static read-only fields for common colors, such as AliceBlue.

Color.Accent

The Color.Accent value results in a platform-specific (and sometimes user-selectable) color that is visible on either a dark or light background.

Color.Default

The Color.Default value defines a Color with all channels set to -1, and is intended to enforce the platform's color scheme. Consequently, it has a different meaning in different contexts on different platforms. By default the platform color schemes are:

iOS: dark text on a light background.
Android: dark text on a light background.
Windows: dark text on a light background.

Color.Transparent

The Color.Transparent value defines a Color with all channels set to zero.

Modify a color

Several instance methods allow modifying an existing color to create a new color:

AddLuminosity returns a Color by modifying the luminosity by the supplied delta.
MultiplyAlpha returns a Color by modifying the alpha, multiplying it by the supplied alpha value.
ToHex returns a hexadecimal string representation of a Color.
WithHue returns a Color, replacing the hue with the value supplied.
WithLuminosity returns a Color, replacing the luminosity with the value supplied.
WithSaturation returns a Color, replacing the saturation with the value supplied.

Implicit conversions

Implicit conversion between the Xamarin.Forms.Color and System.Drawing.Color types can be performed:

Xamarin.Forms.Color xfColor = Xamarin.Forms.Color.FromRgb(0, 72, 255);
System.Drawing.Color sdColor = System.Drawing.Color.FromArgb(38, 127, 0);

// Implicity convert from a Xamarin.Forms.Color to a System.Drawing.Color
System.Drawing.Color sdColor2 = xfColor;

// Implicitly convert from a System.Drawing.Color to a Xamarin.Forms.Color
Xamarin.Forms.Color xfColor2 = sdColor;

Examples

In XAML, colors are typically referenced using their named values, or with their Hex representations:

<Label Text="Sea color"
       TextColor="Aqua" />
<Label Text="RGB"
       TextColor="#00FF00" />
<Label Text="Alpha plus RGB"
       TextColor="#CC00FF00" />
<Label Text="Tiny RGB"
       TextColor="#0F0" />
<Label Text="Tiny Alpha plus RGB"
       TextColor="#C0F0" />

Note

When using XAML compilation, color names are case insensitive and therefore can be written in lowercase. For more information about XAML compilation, see XAML Compilation.

In C#, colors are typically referenced using their named values, or with their static methods:

Label red    = new Label { Text = "Red",    TextColor = Color.Red };
Label orange = new Label { Text = "Orange", TextColor = Color.FromHex("FF6A00") };
Label yellow = new Label { Text = "Yellow", TextColor = Color.FromHsla(0.167, 1.0, 0.5, 1.0) };
Label green  = new Label { Text = "Green",  TextColor = Color.FromRgb (38, 127, 0) };
Label blue   = new Label { Text = "Blue",   TextColor = Color.FromRgba(0, 38, 255, 255) };
Label indigo = new Label { Text = "Indigo", TextColor = Color.FromRgb (0, 72, 255) };
Label violet = new Label { Text = "Violet", TextColor = Color.FromHsla(0.82, 1, 0.25, 1) };

The following example uses the OnPlatform markup extension to selectively set the color of an ActivityIndicator:

<ActivityIndicator Color="{OnPlatform iOS=Black, Default=Default}"
                   IsRunning="True" />

The equivalent C# code is:

ActivityIndicator activityIndicator = new ActivityIndicator
{
    Color = Device.RuntimePlatform == Device.iOS ? Color.Black : Color.Default,
    IsRunning = true
};

Share via