# ColorDialog

This class provides a way to prompt the user to select a color. The color can be picked either through a list of preset colors or using the visual picker. Once a color is selected, the details of the new color will be shown in a `GroupBox`, along with a visual comparison of the old and new color.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Custom Colors

The ColorDialog features several ways to get the perfect color. The `Hex`, `RGB`, or `HSB` value can be manually entered, the user can pick a value from the Preset Colors, or fine tune a value with the Visual Picker.

![ColorDialog showing color selection options with hex, RGB, and HSB inputs](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-a73c04475537e06a95bf732f47535d5dfc4a4896%2Fimage.png?alt=media)

## How To

### Customize the Appearance

The ColorDialog component can be customized by applying appearances to each individual control within the dialog. This includes the textboxes, picker, and more.

To customize these controls, create a new class that inherits from `ColorDialogUI`, add the custom `ColorDialog` constructor, and modify the controls within it:

{% tabs %}
{% tab title="C#" %}

```csharp
public partial class CustomFolderBrowserDialogUI : FolderBrowserDialogUI
{
		public CustomFolderBrowserDialogUI(FolderBrowserDialog folderDialog) : base(folderDialog)
		{
			this.HeaderBackColor = Color.Green;
			this.buttonOK.BackColor = Color.Green;
			this.buttonCancel.BackColor = Color.Green;
		}
}
```

{% endtab %}
{% endtabs %}

After applying the ColorDialog's `DialogTemplate` property to the new class, the resulting popup will look like this:

![Customized ColorDialog with green theme applied to header and buttons](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-4cdbf62ab680e2992d7c62b37b6b025d632e9b0c%2Fimage.png?alt=media)

For instructions on how to use a custom template to offer advanced customization of the `ColorDialog`, see below.