---
title: "5 Different Ways To Visualize A Color Picker Control in Xamarin.Forms"
published_at: "2019-05-16T11:00:47+00:00"
modified_at: "2026-01-09T08:02:59+00:00"
url: "https://www.syncfusion.com/blogs/post/5-ways-to-create-color-picker-in-xamarin-forms"
excerpt: "Introduction Nowadays, a UI for picking a color plays a vital role in some mobile applications. A color picker presents a unique UI challenge to adapting to the compact screens of mobile devices. So, Syncfusion Xamarin.Forms controls like Chips, Radial..."
taxonomy_category:
  - "Desktop"
  - "Development"
  - "Syncfusion"
  - "UI"
  - "Xamarin"
taxonomy_post_tag:
  - "chips"
  - "color picker"
  - "picker"
  - "radial menu"
  - "Range Slider"
  - "segmented control"
  - "Xamarin.Forms"
---

# 5 Different Ways To Visualize A Color Picker Control in Xamarin.Forms

[Selva Ganapathy Kathiresan](https://www.syncfusion.com/blogs/author/selva-ganapathy-k)

![Syncfusion Xamarin.Forms Color Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2019/05/thumbnail_2x.png)


## Introduction

Nowadays, a UI for picking a color plays a vital role in some mobile applications. A color picker presents a unique UI challenge to adapting to the compact screens of mobile devices. So,[Syncfusion Xamarin.Forms controls](https://www.syncfusion.com/xamarin-ui-controls/)
 like [Chips](https://www.syncfusion.com/xamarin-ui-controls/chips)
, [Radial Menu](https://www.syncfusion.com/xamarin-ui-controls/radial-menu)
, [Picker](https://www.syncfusion.com/xamarin-ui-controls/picker)
, [Segmented Control](https://www.syncfusion.com/xamarin-ui-controls/segmented-control)
, and [Range Slider](https://www.syncfusion.com/xamarin-ui-controls/range-slider)
 will help us to implement various color picker UIs easily.

## Xamarin.Forms Chips as a color picker

The Xamarin.Forms [Chips](https://www.syncfusion.com/xamarin-ui-controls/chips)
 control will present colors as multiple circles. It arranges multiple color chips in a flex layout. They can be wrapped and grouped to make selection easy.

![Xamarin.Forms Chips as Xamarin.Forms Color Picker](https://blog.syncfusion.com/wp-content/uploads/2019/05/chips-300x51.jpg)

*Xamarin.Forms Chips as Color Picker*

The following code illustrates the Xamarin.Forms [Chips](https://www.syncfusion.com/xamarin-ui-controls/Chips)
 control populated with color values bound as background colors with customized corners.

```
<sfbuttons:SfChipGroup  Type="Choice" 
                        ChipBorderWidth="1" 
                        SelectedItem="{Binding SelectedItem}"
                        ItemsSource="{Binding Colors, Converter={StaticResource ColorsToChips}}"> 
           <sfbuttons:SfChipGroup.ChipLayout>
                     <FlexLayout HorizontalOptions="Start" 
                                 VerticalOptions="Center" 
                                 Direction="Row" 
                                 Wrap="Wrap"
                                 JustifyContent="Start" 
                                 AlignContent="Start" 
                                 AlignItems="Start"/> 
           </sfbuttons:SfChipGroup.ChipLayout> 
</sfbuttons:SfChipGroup>
```

## Xamarin.Forms Picker Control as a color picker

The Xamarin.Forms [Picker](https://www.syncfusion.com/xamarin-ui-controls/picker)
 control is one of the most common UIs for color pickers. Users select a color using its name. You can implement this color picker by populating the Xamarin.Forms color values.

![Xamarin.Forms Picker as Xamarin.Forms Color Picker](https://blog.syncfusion.com/wp-content/uploads/2019/05/Picker-300x210.jpg)

*Xamarin.Forms Picker as Color Picker*

The following code illustrates the Xamarin.Forms [Picker](https://www.syncfusion.com/xamarin-ui-controls/picker)
 control populated with a color name as a string value.

```
<sfpicker:SfPicker HeaderText="Selected Color"
                   SelectedItem="{Binding SelectedItem}"
                   ItemsSource="{Binding Colors}"/>
```

## Xamarin.Forms Radial Menu as a color picker

The Xamarin.Forms [Radial Menu](https://www.syncfusion.com/xamarin-ui-controls/radial-menu)
 provides an elegant color picker UI. This UI can fit into any compact mobile screen. The hierarchy of menu items allows you to navigate from a primary color to pick from its shades in the next level. Populating a primary color in first-level radial menus and populating its shades as submenus will look like the following UI.

![Xamarin.Forms Radial Menu as Color Picker](https://blog.syncfusion.com/wp-content/uploads/2019/05/Radial-Menu-300x154.jpg)

*Xamarin.Forms Radial Menu as Color Picker*

The following code illustrates the Xamarin.Forms [Radial Menu](https://www.syncfusion.com/xamarin-ui-controls/radial-menu)
 control populated with primary colors with their shades as subitems.

```
<sfradialmenu:SfRadialMenu  CenterButtonBackgroundColor="#383838" >
	<sfradialmenu:SfRadialMenu.Items>
		<sfradialmenu:SfRadialMenuItem BackgroundColor="#FF0000">
			<sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF0000" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF1E1E" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF3C3C" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF5A5A" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF7878" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF9696" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFB4B4" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFD2D2" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFF0F0" /> </sfradialmenu:SfRadialMenuItem.Items>
		</sfradialmenu:SfRadialMenuItem>
		<sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF00">
			<sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF00" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF1E" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF3C" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF5A" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFF78" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFFB4" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFFD2" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFFFF0" /> </sfradialmenu:SfRadialMenuItem.Items>
		</sfradialmenu:SfRadialMenuItem>
		<sfradialmenu:SfRadialMenuItem BackgroundColor="#00FF00">
			<sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#00FF00" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#1EFF1E" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#3CFF3C" />  <sfradialmenu:SfRadialMenuItem BackgroundColor="#78FF78" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#96FF96" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#B4FFB4" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#D2FFD2" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#F0FFF0" /> </sfradialmenu:SfRadialMenuItem.Items>
		</sfradialmenu:SfRadialMenuItem>
		<sfradialmenu:SfRadialMenuItem BackgroundColor="#00FFFF">
			<sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#00FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#1EFFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#3CFFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#78FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#96FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#B4FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#D2FFFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#F0FFFF" /> </sfradialmenu:SfRadialMenuItem.Items>
		</sfradialmenu:SfRadialMenuItem>
		<sfradialmenu:SfRadialMenuItem BackgroundColor="#0000FF">
			<sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#0000FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#1E1EFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#3C3CFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#7878FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#9696FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#B4B4FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#D2D2FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#F0F0FF" /> </sfradialmenu:SfRadialMenuItem.Items> 
		</sfradialmenu:SfRadialMenuItem>
		<sfradialmenu:SfRadialMenuItem BackgroundColor="#FF00FF">
			<sfradialmenu:SfRadialMenuItem.Items> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF00FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF1EFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF3CFF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF78FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FF96FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFB4FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFD2FF" /> <sfradialmenu:SfRadialMenuItem BackgroundColor="#FFF0FF" /> </sfradialmenu:SfRadialMenuItem.Items>
		</sfradialmenu:SfRadialMenuItem>
	</sfradialmenu:SfRadialMenu.Items>
</sfradialmenu:SfRadialMenu>
```

## Xamarin.Forms Range Slider as a color picker

The Xamarin.Forms [Range Slider](https://www.syncfusion.com/xamarin-ui-controls/range-slider)
 helps the user pick a color by defining the RGB value. Three range slider controls represent the RGB color code and the selection is restricted to between 0 and 255.

![Xamarin.Forms Range Slider as Color Picker](https://blog.syncfusion.com/wp-content/uploads/2019/05/Range-Slider-300x217.jpg)

*Xamarin.Forms Range Slider as Color Picker*

The following code illustrates how three Xamarin.Forms [Range Slider](https://www.syncfusion.com/xamarin-ui-controls/range-slider)
 controls made the previous UI.

```
<ContentView.Resources>
        <Style TargetType="sfrangeslider:SfRangeSlider">
            <Setter Property="Orientation" Value="Horizontal"/>
            <Setter Property="ShowValueLabel" Value="False"/>
            <Setter Property="ShowRange" Value="False"/>
            <Setter Property="TrackSelectionThickness" Value="2"/>
            <Setter Property="TrackThickness" Value="1"/>
            <Setter Property="TickFrequency" Value="255"/>
            <Setter Property="StepFrequency" Value="1"/>
            <Setter Property="TickPlacement" Value="None"/>
            <Setter Property="ThumbSize" Value="20"/>
            <Setter Property="Minimum" Value="0"/>
            <Setter Property="Maximum" Value="255"/>
        </Style>
</ContentView.Resources>

<sfrangeslider:SfRangeSlider  Value="{Binding RValue, Mode=TwoWay}"
                              TrackColor="#77FF0000"
                              KnobColor="#FFFF0000"
                              TrackSelectionColor="#CCFF0000"/>

<sfrangeslider:SfRangeSlider  Value="{Binding GValue, Mode=TwoWay}"
                              TrackColor="#7700FF00"
                              KnobColor="#FF00FF00"
                              TrackSelectionColor="#CC00FF00"/>

<sfrangeslider:SfRangeSlider  Value="{Binding BValue, Mode=TwoWay}"
                              TrackColor="#770000FF"
                              KnobColor="#FF0000FF"
                              TrackSelectionColor="#CC0000FF"/>
```

## Xamarin.Forms Segmented control as a color picker

The Xamarin.Forms [Segmented Control](https://www.syncfusion.com/xamarin-ui-controls/segmented-control)
 provides a linear set of circle tiles, each of which functions as a UI to pick a color. Even though it provides a similar UI to Xamarin.Forms Chips, but it provides selection animation.

![Xamarin.Forms Segmented Control as Color Picker](https://blog.syncfusion.com/wp-content/uploads/2019/05/segmented-control-300x47.jpg)

*Xamarin.Forms Segmented Control as Color Picker*

The following code illustrates the Xamarin.Forms [Segmented Control](https://www.syncfusion.com/xamarin-ui-controls/segmented-control)
 populated with color values and bound with segmented items such as a custom view color and customized corners.

```
<sfsegmentedcontrol:SfSegmentedControl BackgroundColor="{Binding SelectedColor}"
                                       SegmentHeight="40"
                                       SegmentWidth="40"
                                       SelectedItem="{Binding SelectedItem}"
                                       ItemsSource="{Binding ViewCollection}"
                                       SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                                       SegmentPadding="5">
      <sfsegmentedcontrol:SfSegmentedControl.SelectionIndicatorSettings>
            <sfsegmentedcontrol:SelectionIndicatorSettings Color="#FFFFFF"
                                                           Position="Border"
                                                           CornerRadius="20"/>
      </sfsegmentedcontrol:SfSegmentedControl.SelectionIndicatorSettings>
</sfsegmentedcontrol:SfSegmentedControl>
```

## Summary

In this blog post, we have walked through the [Syncfusion Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls/)
 controls used to create a variety of color picker UIs. The sample for this is available in this [GitHub location](https://github.com/SyncfusionExamples/syncfusion-xamarin-forms-color-picker-demo)
. We invite you to check out our [Xamarin.Forms controls](https://www.syncfusion.com/xamarin-ui-controls/)
. You can always [download our free evaluation](https://www.syncfusion.com/downloads/xamarin)
 to see all these controls in action. You can also explore our samples available on [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser)
 and [Microsoft store](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4)
. Learn about advanced features in [our documentation](https://help.syncfusion.com/xamarin/)
.

If you have any questions or require clarification about these controls, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
, or [Feedback Portal](https://www.syncfusion.com/feedback/xamarin-forms)
. We are happy to assist you!