Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI
Tags: winui, csharp, dotnet, desktop
Published: 2021-09-02 11:31:37

---
title: Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI
published: true
date: 2021-09-02 11:06:18 UTC
tags: winui, csharp, dotnet, desktop
canonical_url: https://www.syncfusion.com/blogs/post/pick-colors-like-a-boss-using-syncfusion-color-controls-in-winui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1vlessox3pzrf5hwhrv.png
---

The Syncfusion [WinUI toolkit](https://www.syncfusion.com/winui-controls "Link to Syncfusion WinUI controls") includes feature-rich controls like [DataGrid](https://www.syncfusion.com/winui-controls/datagrid "Link to WinUI DataGrid"), [Charts](https://www.syncfusion.com/winui-controls/charts "Link to WinUI Charts"), and [TreeView](https://www.syncfusion.com/winui-controls/treeview "Link to WinUI TreeView"),  that embody a Fluent design for building modern and seamless Windows apps. In this blog, let’s see how to select solid, linear gradient, and radial gradient colors using these four distinct color controls in our WinUI suite:

- [ColorPalette](https://www.syncfusion.com/winui-controls/color-palette "Link to WinUI ColorPalette"): A rich visual interface for solid color selection. It supports standard colors and various theme colors.
- [ColorPicker](https://www.syncfusion.com/winui-controls/color-picker "Link to WinUI ColorPicker"): Pick a solid or gradient color and fine-tune it with a precise color. The control supports various color specifications like RGB (red green blue), HSV (hue saturation value), and hex codes.
- [DropDown ColorPalette](https://www.syncfusion.com/winui-controls/dropdown-color-palette "Link to WinUI DropDown ColorPalette"): This control hosts the WinUI ColorPalette as its flyout. You can customize the ColorPalette by attaching it as a flyout.
- [DropDown ColorPicker](https://www.syncfusion.com/winui-controls/dropdown-color-picker "Link to WinUI DropDown ColorPicker"): Similarly, the WinUI DropDown ColorPicker contains the WinUI ColorPicker as its flyout.

**Note:** As the ColorPalette and ColorPicker controls occupy a lot of space, they are hosted inside a dropdown to form the two latter controls in WinUI (DropDown ColorPalette and Picker).

## WinUI DropDown ColorPalette

Let’s see how to add the WinUI DropDown ColorPalette control to your application:

1. First, create a[ WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Link to Create a new project that uses the Windows App SDK documentation").
2. Then, download and install the [Syncfusion.Editors.WinUI](https://www.nuget.org/packages/Syncfusion.Editors.WinUI "Link to the Syncfusion.Editors.WinUI NuGet Package") NuGet package in your project.
3. Import the control namespace **Syncfusion.UI.Xaml.Editors** in the XAML page.
4. Finally, initialize the WinUI DropDown ColorPalette control like in the following code example.
```html
<Window
    x:Class="ExploringColorControls.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_UG_Check"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
    xmlns:editor="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d">
     <Grid>
        <editor:SfDropDownColorPalette HorizontalAlignment="Center" VerticalAlignment="Center"
                                                                    x:Name="sfDropDownColorPalette"
                                                                    />
    </Grid>
</Window>
```

![WinUI DropDown ColorPalette](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette.png)<figcaption>WinUI DropDown ColorPalette</figcaption>

**Note:** In the WinUI DropDown ColorPalette:

- By default, the black color will be attached as a flyout, and you can [customize the flyout color](https://help.syncfusion.com/winui/color-palette/ui-customization#setting-default-color "Link to Setting default color in WinUI DrapDown ColorPalette documentation").
- You can get the currently selected brush using the [SelectedBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPalette.html#Syncfusion_UI_Xaml_Editors_SfColorPalette_SelectedBrush "Link to the SelectedBrush property of WinUI DrapDown ColorPalette") property.
- When the selected color is changed, then the [SelectedBrushChanged](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPalette.html#Syncfusion_UI_Xaml_Editors_SfColorPalette_SelectedBrushChanged "Link to the SelectedBrushChanged property of WinUI DrapDown ColorPalette") event will be triggered.

### Customizing the ColorPalette in the Dropdown

You can customize the ColorPalette control hosted inside the dropdown of the WinUI DropDown ColorPalette using the [AttachedFlyout](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.primitives.flyoutbase.attachedflyout?view=winrt-19041 "Link to FlyoutBase.AttachedFlyout Attached Property of WinUI DrapDown ColorPalette") and [DropDownFlyout](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownFlyout.html#properties "Link to the properties of DropDownFlyout class of WinUI DrapDown ColorPalette") properties.

Refer to the following code example.

```html
<editor:SfDropDownColorPalette HorizontalAlignment="Center" VerticalAlignment=" Center "
                                                            x:Name="sfDropDownColorPalette" 
                                                            >
    <FlyoutBase.AttachedFlyout>
       <editor:DropDownFlyout >
          <editor:SfColorPalette x:Name="colorPalette" ActivePalette="GreenYellow" />
       </editor:DropDownFlyout>
    </FlyoutBase.AttachedFlyout>
</editor:SfDropDownColorPalette>
```

![Customized Palette in WinUI DropDown ColorPalette](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Customized-Palette-in-WinUI-DropDown-ColorPalette.png)<figcaption>Customized Palette in WinUI DropDown ColorPalette</figcaption>

### Theme Colors

The ColorPalette has a variety of base theme colors shaded from light to dark.

You can change the displayed theme color palette using the [ActivePalette](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPalette.html#Syncfusion_UI_Xaml_Editors_SfColorPalette_ActivePalette "Link to the ActivePalette property of WinUI ColorPalatte") property. By default, the value of the **ActivePalette** property is Office.

Refer to the following code example.

```html
<editor:SfColorPalette x:Name="colorPalette" ActivePalette="GreenYellow" />
```

![WinUI DropDown ColorPalette Theme Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Theme-Colors.png)<figcaption>WinUI DropDown ColorPalette Theme Colors</figcaption>

You can also add your own set of theme colors in the ColorPalette control using the [PaletteColors](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPalette.html#Syncfusion_UI_Xaml_Editors_SfColorPalette_PaletteColors "Link to the PaletteColors property WinUI ColorPalette") property and [ColorModel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.ColorModel.html "Link to the Class ColorModel of WinUI ColorPalette") class. The [ColorPaletteModel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.ColorPaletteModel.html "Link to the Class ColorPaletteModel of WinUI ColorPalette") class allows you to customize the header and show or hide the custom theme color shades.

Refer to the following code example.

```html
<editors:SfColorPalette Name="colorPalette">
    <editors:SfColorPalette.PaletteColors>
        <editors:ColorPaletteModel ShowColors="True" 
                                   ShowColorShades="True"
                                   Header="Custom Theme Colors" >
            <editors:ColorPaletteModel.Colors>
                <editors:ColorCollection>
                    <editors:ColorModel Color="#FF11EBF8" Tooltip="Custom Aqua" />
                    <editors:ColorModel Color="#FFF80FA6" Tooltip="Custom Deep Pink" />
                    <editors:ColorModel Color="#FF8BA7C2" Tooltip="Custom Dark Gray" />
                    <editors:ColorModel Color="#F53CDF07" Tooltip="Custom Lime Green" />
                    <editors:ColorModel Color="#C2929545" Tooltip="Custom Olive Drab" />
                    <editors:ColorModel Color="#2E956145" Tooltip="Custom Sienna" />
                    <editors:ColorModel Color="#78458E95" Tooltip="Custom Steel Blue" />
                    <editors:ColorModel Color="#8B8220E4" Tooltip="Custom Blue Violet" />
                    <editors:ColorModel Color="#FF352722" Tooltip="Custom Dark Slate Gray" />
                    <editors:ColorModel Color="#FF318B86" Tooltip="Custom Sea Green" />
                </editors:ColorCollection>
            </editors:ColorPaletteModel.Colors>
        </editors:ColorPaletteModel>
    </editors:SfColorPalette.PaletteColors>
</editors:SfColorPalette>
```

![WinUI DropDown Color Palette: Custom Theme Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Custom-Theme-Colors.png)<figcaption>WinUI DropDown ColorPalette: Custom Theme Colors</figcaption>

Also, you can easily show or hide the base theme colors and their variants in the ColorPalette using the [ShowColors](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.ColorPaletteModel.html#Syncfusion_UI_Xaml_Editors_ColorPaletteModel_ShowColors "Link to the ShowColors property of WinUI ColorPalette") and [ShowColorShades](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.ColorPaletteModel.html#Syncfusion_UI_Xaml_Editors_ColorPaletteModel_ShowColorShades "Link to the ShowColorShades property of WinUI ColorPalette") properties in the **ColorPaletteModel** class. To hide all the theme colors in the ColorPalette, set the value of both the **ShowColors** and **ShowColorShades** properties to false.

Refer to the following screenshot.

![WinUI DropDown Color Palette Displaying Only Standard Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-displaying-only-Standard-Colors.png)  ![WinUI DropDown Color Palette Displaying Themes Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Displaying-Themes-Colors.png)  ![WinUI DropDown Color Palette Displaying Themes Colors With Shades](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Displaying-Themes-Colors-With-Shades.png) 

Customizing the WinUI DropDown ColorPalette’s Theme Colors visible Mode

### Standard Colors

The ColorPalette supports a variety of standard colors. The colors’ shades are hidden by default.

Refer to the following code example.

```html
<editor:SfDropDownColorPalette HorizontalAlignment="Center" VerticalAlignment=" Center "
                                                     x:Name="sfDropDownColorPalette" 
                                                      >
   <FlyoutBase.AttachedFlyout>
      <editor:DropDownFlyout >
         <editor:SfColorPalette x:Name="colorPalette" />
       </editor:DropDownFlyout>
    </FlyoutBase.AttachedFlyout>
</editor:SfDropDownColorPalette>
```

![WinUI DropDown ColorPalette: Standard Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Standard-Color-palette.png)<figcaption>WinUI DropDown ColorPalette: Standard Colors</figcaption>

Like in the theme colors, you can also add your own set of standard colors in the ColorPalette control using the [StandardColors](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPalette.html#Syncfusion_UI_Xaml_Editors_SfColorPalette_StandardColors "Link to the StandardColors property v") property and [ColorModel](https://help.syncfusion.com/cr/winUI/Syncfusion.UI.Xaml.Editors.ColorModel.html "Link to the Class ColorModel of WinUI ColorPalette") class. The [StandardPaletteModel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.StandardPaletteModel.html "Link to the Class StandardPaletteModel of WinUI ColorPalette") class allows you to customize the header and show or hide the custom standard colors and their shades.

Refer to the following code example.

```html
<editors:SfColorPalette Name="colorPalette">
    <editors:SfColorPalette.StandardColors>
        <editors:StandardPaletteModel ShowColors="True" 
                                      ShowColorShades="True"
                                      Header="Custom Standard Colors" >
            <editors:StandardPaletteModel.Colors>
                <editors:ColorCollection>
                    <editors:ColorModel Color = "Blue" Tooltip = "Custom Blue" />
                    <editors:ColorModel Color = "Orchid" Tooltip = "Custom Orchid" />
                    <editors:ColorModel Color = "Gray" Tooltip = "Custom Gray" />
                    <editors:ColorModel Color = "Gold" Tooltip = "Custom Gold" />
                    <editors:ColorModel Color = "SandyBrown" Tooltip = "Custom SandyBrown" />
                    <editors:ColorModel Color = "Pink" Tooltip = "Custom Pink" />
                    <editors:ColorModel Color = "Violet" Tooltip = "Custom Violet" />
                    <editors:ColorModel Color = "Yellow" Tooltip = "Custom Yellow" />
                    <editors:ColorModel Color = "Orange" Tooltip = "Custom Orange" />
                    <editors:ColorModel Color = "Red" Tooltip = "Custom Red" />
                </editors:ColorCollection>
            </editors:StandardPaletteModel.Colors>
        </editors:StandardPaletteModel>
    </editors:SfColorPalette.StandardColors>
</editors:SfColorPalette>
```

![Customizing the Standard Colors of WinUI DropDown Color Palette](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Customizing-the-Standard-Colors-of-WinUI-DropDown-Color-Palette.png)<figcaption>Customizing the Standard Colors of WinUI DropDown ColorPalette</figcaption>

You can show or hide the standard colors and their variants using the [ShowColors](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.ColorPaletteModel.html#Syncfusion_UI_Xaml_Editors_ColorPaletteModel_ShowColors "Link to the ShowColors property of of WinUI ColorPalette") and [ShowColorShades](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.ColorPaletteModel.html#Syncfusion_UI_Xaml_Editors_ColorPaletteModel_ShowColorShades "Link to the ShowColorShades property of WinUI ColorPalette") properties in the **StandardPaletteModel**. To hide all the standard colors in the ColorPalette, set the value of both the **ShowColors** and **ShowColorShades** properties to false.

![Hiding the Standard Color Palette in WinUI DropDown ColorPalette](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Hiding-Standard-Color-Palette-in-WinUI-DropDown-Color-Palette.png)<figcaption>Hiding the Standard Color Palette in WinUI DropDown ColorPalette</figcaption>

### More Colors

If you want to choose a color that is not available in the theme and standard palette, click the **More Colors**  button. Then, select a color from the color spectrum and click **OK**. You can show or hide the More Colors button using the [ShowMoreColorsButton](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPalette.html#Syncfusion_UI_Xaml_Editors_SfColorPalette_ShowMoreColorsButton "Link to the ShowMoreColorsButton property of WinUI ColorPalette") property.

![WinUI DropDown Color Palette With More Colors Button](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-With-More-Colors-Button.png) ![More Colors Editor Window In WinUI DropDown Color Palette](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/More-Colors-Editor-Window-In-WinUI-DropDown-Color-Palette.png) 

Choosing Colors from the WinUI DropDown ColorPalette: More Colors Window

### Recent Colors

If you want to choose a color recently selected from the More Colors dialog, use the Recent Colors panel.

![WinUI DropDown ColorPalette Showing Recent Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Showing-Recent-Colors.png)<figcaption>WinUI DropDown ColorPalette Showing Recent Colors</figcaption>

### No Color

You can reset the selected color back to transparent by using the **No Color** button. You can show or hide the No Color button using the [ShowNoColorButton](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPalette.html#Syncfusion_UI_Xaml_Editors_SfColorPalette_ShowNoColorButton "Link to the ShowNoColorButton property of WinUI ColorPalette") property. By default, the value of the **ShowNoColorButton** property is false.

![WinUI DropDown ColorPalette Displaying No Color Button](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Displaying-No-Color-Button.png)<figcaption>WinUI DropDown ColorPalette Displaying No Color Button</figcaption>

### Customize Content

Also, you can customize a selected color button using the [ContentTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfDropDownBase.html#Syncfusion_UI_Xaml_Editors_SfDropDownBase_ContentTemplate "Link to the ContentTemplate property of WinUI ColorPalette") property.

```html
<editors:SfDropDownColorPalette>
 
    <!--Custom UI for Selected color button-->
    <editors:SfDropDownColorPalette.ContentTemplate>
        <DataTemplate>
            <StackPanel Height="30" 
                        Orientation="Vertical">
                <Path Data="…Path Data…" 
                      Stretch="Uniform"
                      Fill="Black" 
                      Width="20" Height="20" 
                      RenderTransformOrigin="0.5,0.5"/>
                <Border Margin="5" 
                        Background="{Binding}"
                        Grid.Row="1"
                        Width="25"
                        Height="7">
                </Border>
            </StackPanel>
        </DataTemplate>
    </editors:SfDropDownColorPalette.ContentTemplate> 
</editors:SfDropDownColorPalette>
```

![WinUI DropDown ColorPalette Header Customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Palette-Header-Customization.png)<figcaption>WinUI DropDown ColorPalette Header Customization</figcaption>

## DropDown ColorPicker

Let’s see how to add the WinUI DropDown ColorPicker control to your application:

1. First, create a [WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Link to Create a new project that uses the Windows App SDK documentation").
2. Then, download and install the [Syncfusion.Editors.WinUI](https://www.nuget.org/packages/Syncfusion.Editors.WinUI "Link to the Syncfusion.Editors.WinUI NuGet Package") NuGet package in the project.
3. Import the control namespace **Syncfusion.UI.Xaml.Editors** in your XAML page.
4. Finally, initialize the WinUI DropDown ColorPicker control like in the following code example.
```html
<Window
    x:Class="ExploringColorControls.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_UG_Check"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d">
    <Grid>
        <editors:SfDropDownColorPicker HorizontalAlignment="Center" VerticalAlignment="Center"
                                                                    x:Name="dropdownColorPicker" />
    </Grid>
</Window>
```

![WinUI DropDown ColorPicker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Picker.png)<figcaption>WinUI DropDown ColorPicker</figcaption>

**Note:** In the WinUI DropDown ColorPicker control:

- A default ColorPicker will be created and attached as a flyout.
- You can get the currently selected brush using the [SelectedBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_SelectedBrush "Link to the SelectedBrush property of WinUI DropDown ColorPicker") property.
- When the selected color is changed, the [SelectedBrushChanged](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_SelectedBrushChanged "Link to the SelectedBrushChanged property of WinUI DropDown ColorPicker") event will be triggered.

### Customizing the ColorPicker in the Dropdown

You can customize the ColorPicker control displayed in the dropdown using the [AttachedFlyout](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.primitives.flyoutbase.attachedflyout?view=winrt-19041 "Link to FlyoutBase.AttachedFlyout Attached Property") and [DropDownFlyout](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownFlyout.html#properties "Link to properties of the DropDownFlyout class of WinUI DropDown ColorPicker") properties.

Refer to the following code example.

```html
<editors:SfDropDownColorPicker Name="sfDropDownColorPicker">
    <FlyoutBase.AttachedFlyout>
        <editors:DropDownFlyout>
            <editors:SfColorPicker BrushTypeOptions="LinearGradientBrush"
                                   Width="250" />
        </editors:DropDownFlyout>
    </FlyoutBase.AttachedFlyout>        
</editors:SfDropDownColorPicker>
```

### Switch among Solid, Linear, and Radial Gradient Editors

The ColorPicker allows you to select a solid, linear, or radial gradient bush using interactive editors. You can also restrict choosing a particular brush type using the [BrushTypeOptions](https://help.syncfusion.com/cr/winUI/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_BrushTypeOptions "Link to the BrushTypeOptions property of WinUI DropDown ColorPicker") property.

![Switch among Solid, Linear and Radial Gradient Editors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Switch-Between-Solid-Linear-and-Radial-Gradient-Editors.gif)<figcaption>Switch among Solid, Linear, and Radial Gradient Editors</figcaption>

### Solid Color Brush

By default, the value of the [SelectedBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_SelectedBrush "Link to the SelectedBrush property of WinUI DropDown ColorPicker") property is **SolidColorBrush**. You can also choose a color using the spectrum, slider, number box, or hexadecimal editors.

```html
<editors:SfColorPicker x:Name="colorPicker"
                        SelectedBrush="Yellow"/>
```

#### Input Options and Their Visibility

There are various input options available to choose a precise color. You can show or hide them using the following properties:

- [ColorChannelInputOptions](https://help.syncfusion.com/cr/winUI/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_ColorChannelInputOptions "Link to the ColorChannelInputOptions class of WinUI DropDown ColorPicker") – Slider and number box inputs.
- [IsHexInputVisible](https://help.syncfusion.com/cr/winUI/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_IsHexInputVisible "Link to the IsHexInputVisible class of WinUI DropDown ColorPicker") – Hexadecimal input.
- [AlphaInputOptions](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_AlphaInputOptions "Link to the AlphaInputOptions property of WinUI DropDown ColorPicker") – Alpha input.

**Note:** By default, the Spectrum editor is always visible, you cannot hide it.

![Color Picker Editor Window With Various Input Options](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Color-Picker-Editor-Window-With-Various-Input-Options.png)<figcaption>ColorPicker Editor Window With Various Input Options</figcaption>

#### Color Channels

The ColorPicker supports four color channels: [RGB](https://en.wikipedia.org/wiki/RGB_color_model "Link to the Wikipedia page for RGB color model"), [HSV](https://en.wikipedia.org/wiki/HSL_and_HSV "Link to the Wikipedia page for HSL and HSV"), [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV "Link to the Wikipedia page for HSL and HSV"), [CMYK](https://en.wikipedia.org/wiki/CMYK_color_model "Link to the Wikipedia page for CMYK color model"). You can limit the color channels using the [ColorChannelOptions](https://help.syncfusion.com/cr/winUI/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_ColorChannelOptions "Link to the ColorChannelOptions class of WinUI DropDown ColorPicker") property. The end user can change a color channel interactively, using the editor combo box.

Refer to the following .gif image.

![Color Channel Editor Window](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Color-Channel-Editor-Window.gif)<figcaption>Color Channel Editor Window</figcaption>

### Gradient Brush

You can choose a linear or radial gradient brush using the **SelectedBrush** property. For more details, refer to the [LinearGraidentBrush](https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.media.lineargradientbrush?view=winui-3.0 "Link to the LinearGradientBrush Class documentation of WinUI DropDown ColorPicker") and [RadialGradientBrush](https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.media.radialgradientbrush?view=winui-3.0 "Link to the RadialGradientBrush Class documentation of WinUI DropDown ColorPicker") documentation.

Refer to the following code example.

**Linear gradient:**

```html
<editors:SfColorPicker>
    <editors:SfColorPicker.SelectedBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </editors:SfColorPicker.SelectedBrush>
</editors:SfColorPicker>
```

**Radial gradient:**

```html
<editors:SfColorPicker>
    <editors:SfColorPicker.SelectedBrush>
        <RadialGradientBrush>
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </RadialGradientBrush>
    </editors:SfColorPicker.SelectedBrush>
</editors:SfColorPicker>
```

#### Edit Gradient Stops

The WinUI DropDown ColorPicker allows you to add gradient stop and change its color interactively like in the following .gif image.

![Editing Gradient Stops in WinUI DropDown ColorPicer](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Edit-Gradient-Stops.gif)<figcaption>Editing Gradient Stops in WinUI DropDown ColorPicker</figcaption>

#### Edit Gradient Direction

The linear and radial gradient editors support both simple and advanced editing modes. You can switch between the modes using the [AxisInputOption](https://help.syncfusion.com/cr/winUI/Syncfusion.UI.Xaml.Editors.SfColorPicker.html#Syncfusion_UI_Xaml_Editors_SfColorPicker_AxisInputOption "Link to the AxisInputOption property of WinUI DropDown ColorPicker") property.

In the Simple editor, you can change the linear gradient angle to anywhere between 0 and 365 degrees.

![Simple Editor for Linear Gradient](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Simple-Editor-for-Linear-Gradient.png)<figcaption>Simple Editor for Linear Gradient</figcaption>

In the advanced editor, you can fine-tune the linear gradient direction using the start and end points.

![Advanced Editor for Linear Gradient](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Advanced-Editor-for-Linear-Gradient.jpg)<figcaption>Advanced Editor for Linear Gradient</figcaption>

You can change the radial gradient direction using the Direction dropdown in the simple editor.

![Simple Editor for Radial Gradient](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Simple-Editor-for-Radial-Gradient.png)<figcaption>Simple Editor for Radial Gradient</figcaption>

Like for the linear gradient, you can also fine-tune the radial gradient direction using the start and end points in the advanced editor.

![Advanced Editor for Radial Gradient](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Advanced-Editor-for-Radial-Gradient.jpg)<figcaption>Advanced Editor for Radial Gradient</figcaption>

### Customize Content

Also, you can customize the selected color button using the [ContentTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfDropDownBase.html#Syncfusion_UI_Xaml_Editors_SfDropDownBase_ContentTemplate "Link to the ContentTemplate property of WinUI DropDown ColorPicker") property.

```html
<editors:SfDropDownColorPicker DropDownMode="Split"                   
                               Name="sfDropDownColorPicker">
    <!--Custom UI for Selected color button-->
    <editors:SfDropDownColorPicker.ContentTemplate>
        <DataTemplate>
            <StackPanel Height="30" 
                        Orientation="Vertical">
                <Path Data=".…PathData…." 
                      Stretch="Uniform"                          
                      Fill="Black" 
                      Width="20" Height="18" 
                      RenderTransformOrigin="0.5,0.5"/>
                <Border Margin="5" 
                        Background="{Binding}"
                        Grid.Row="1"
                        Width="25"
                        Height="8">
                </Border>
            </StackPanel>
        </DataTemplate>
    </editors:SfDropDownColorPicker.ContentTemplate>
</editors:SfDropDownColorPicker>
```

![WinUI DropDown ColorPicker Header Customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/WinUI-DropDown-Color-Picker-Header-Customization.png)<figcaption>WinUI DropDown ColorPicker Header Customization</figcaption>

## Conclusion

Thanks for reading! In this blog post, we have explored the marvelous features of the WinUI [ColorPicker](https://www.syncfusion.com/winui-controls/color-picker "Link to WinUI ColorPicker"), [ColorPalette](https://www.syncfusion.com/winui-controls/color-palette "Link to WinUI ColorPalette"), [DropDown ColorPalette](https://www.syncfusion.com/winui-controls/dropdown-color-palette "Link to WinUI DropDown ColorPalette"), and [DropDown ColorPicker](https://www.syncfusion.com/winui-controls/dropdown-color-picker "Link to WinUI DropDown ColorPicker") controls. You can also download examples for the color controls in WinUI from this [GitHub](https://github.com/syncfusion/winui-demos/tree/master/editor "Link to WinUI demos on GitHub")repository.

So, try them out and design your application with appealing color patterns.

For existing customers, the newest version of Essential Studio is available for download from the [license and downloads page](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio"). If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out these new features.

You can also contact us through [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"), or the [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [API Improvements in WinUI 3 Charts: 2021 Volume 2](https://dev.to/sureshmohan/api-improvements-in-winui-3-charts-2021-volume-2-2h8l-temp-slug-7074914 "Link to API Improvements in WinUI 3 Charts: 2021 Volume 2 blog")
- [Everything You Need to Know About the WinUI 3 Range Slider](https://dev.to/karthickramasamy08/everything-you-need-to-know-about-the-winui-3-range-slider-6le-temp-slug-6280309 "Link to Everything You Need to Know About the WinUI 3 Range Slider blog")
- [What’s New in 2021 Volume 2: WinUI](https://dev.to/karthickramasamy08/what-s-new-in-2021-volume-2-winui-181a-temp-slug-5831882 "Link to What’s New in 2021 Volume 2: WinUI blog")
- [Introducing the New WinUI NumberBox Control](https://dev.to/sureshmohan/introducing-the-new-winui-numberbox-control-2k8c-temp-slug-2572256 "Link to Introducing the New WinUI NumberBox Control blog")