# Advanced ColorPicker Mode

## Content



By default, the [C1ColorPicker](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1ColorPicker.html) control will open with the **Advanced** tab available when the control's drop-down arrow is clicked. The **Basic** tab appears by default, but the **Advanced** view can be selected by clicking the **Advanced** at the bottom of the control. The **Advanced** view appears similar to the following image:

![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/advanced_x0020_colorpicker_x0020_mode_files/image001.png)

The **Advanced** tab includes the following options/sections:

*   **Color Field/Picked Color**: The **Color Field** lets you choose a tone in a color's range. The **Picked Color** indicates the currently selected color. Move the **Color Slider** to pick a general color family and then fine tune the color selection in the **Color Field**.
    
*   **Color Slider**: This slider lets you choose from the color spectrum. Move the **Color Slider** to pick a general color and then fine tune the color selection in the **Color Field**.
    
*   **Transparency Slider**: This slider lets you lets you set the color's transparency. You can choose to make the color opaque or partially or completely transparent. Move the Transparency Slider to pick a transparency and note that the number in the **Transparency Value** box changes as well. This slider is only visible when the [C1ColorPicker.ShowAlphaChannel](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1ColorPicker.ShowAlphaChannel.html) property is set to True (default)
    
*   **Color Preview**: Preview the color you are currently choosing. Once you are satisfied with the color choice, click the **OK** button to close the drop-down box and set the color as the **Selected Color**.
    
*   **Transparency Value**: This box lets you set the color's transparency. You can set the **Transparency** to a number between 0, which is completely transparent, and 255, which is completely opaque (default). When the **C1ColorPicker.ShowAlphaChannel** property is set to **False** this box appears grayed out.
    
*   **RGB Color**: These three numeric boxes let you choose a color using the Red Green Blue (RGB) color model.
    
*   **HSL Color**: These three numeric boxes let you choose a color using the Hue Saturation Lightness (HSL) color model.
    
*   **Hexadecimal Color**: If eight digits are visible, the first two digits represent the color's transparency ranging from FF (opaque) to 00 (transparent) and the last six digits represent standard hexadecimal color selection. Note that if the **C1ColorPicker.ShowAlphaChannel**<br /> property is set to False, only the last six digits will be visible (no transparency value). For more information about hexadecimal color selection, see w3school
    
*   **OK Button**: Once you are satisfied with the color choice, click the **OK** button to close the drop-down box and set the color as the **Selected Color**.
    
*   **Selected Color**: The currently selected color will appear in the color picker's window.
    
*   **Drop-Down Arrow**: Click the drop-down arrow to open the **C1ColorPicker** control's window. See [Drop-Down Direction](/componentone/docs/wpf/online-extended/ColorPicker/ColorPickerFeatures/DropDownDirection) for information about setting where the drop-down window appears.
    
*   **Advanced Tab**: Click the Advanced tab to choose a custom color at run time. Click the Basic tab to view pre-selected colors. The [C1ColorPicker.Mode](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1ColorPicker.Mode.html) property must be set to **Advanced** or **Both** for the **Advanced** tab to be visible.