Skip to main content
BuyLog In
VCL
Search in…
Docs > VCL Controls > ExpressEditors Library > Concepts > Color Picker
A newer version of this page is available. .
All docs
V22.1
VCL Controls
ExpressQuantumGrid Suite
ExpressPrinting System
ExpressQuantumTreeList Suite
ExpressSpreadSheet Suite
ExpressPivotGrid Suite
ExpressVerticalGrid Suite
ExpressBars Suite
ExpressDocking Library
ExpressNavBar Suite
ExpressLayoutControl Suite
ExpressEditors Library
Concepts
Alert Windows
Alert Window Manager
Camera Preview Dialog
Color Editor
Color Picker
Edit Repository Items
Editor Properties
Editor Style and StyleController
Filter Panel
Find Panel
Inner and Outer Label Lines
Input Dialog Boxes
Item Link
Message Dialog Boxes
Responding to Navigator Button Clicks
UI Adorner Manager
Tree View Control
List View Control
Gallery Controls
Mask Editors
Range Controls
Rich Editors
TcxHintStyleController
Various Editors
Examples
Resource Strings
Task Based Help
Reference
API Reference
ExpressSkins Library
ExpressScheduler Suite
ExpressMapControl Suite
ExpressGanttControl Suite
ExpressGaugeControl Suite
ExpressRichEditControl Suite
ExpressPDFViewer Suite
ExpressTileControl Suite
ExpressSpellChecker Suite
ExpressEntityMapping Framework
ExpressDBTree Suite
ExpressFlowChart Suite
ExpressFlowChart Editor
ExpressOrgChart Suite
ExpressWizardControl Suite
ExpressDataController
Express Cross Platform Library
ExpressPageControl Suite
ExpressMemData

Color Picker

  • 2 minutes to read

The DevExpress Color Picker (TdxColorPicker) is an advanced color selection component. It offers the color picking functionality similar to that found in the system Color dialog and standard VCL TColorDialog component, and in addition, provides support for ExpressSkins and alpha channel information. The color picker is implemented as a part of the color editor dialog.

Color Picker

The Color Picker includes the following UI elements:

  • Gamut box. Allows you to select a color by clicking anywhere within the box.

  • Lightness/Hue and Alpha sliders. Used to gradually adjust the lightness/hue and alpha values, respectively. A checkered background of the alpha slider allows you to evaluate the transparency level.

Alpha editor. Allows you to adjust the alpha value.

  • HSL (Hue, Saturation, and Lightness) and RGB (Red, Green, and Blue) spin editors. These editors are interconnected with the Lightness/Hue slider to allow you to adjust the corresponding values of the selected color.

HEX color code editor. Used to specify the color by its hexadecimal code.

  • Preview box. Shows the resulting (selected) color.

Use the color picker’s OptionsView property settings to switch the element visibility. The color picker is automatically sized in response to element visibility changes.

The color picker stores the selected color in the Color property as a TdxAlphaColor value. This value includes the alpha value, in addition to the color component values (RGB) provided by the TColor value. So, in order to exchange TdxAlphaColor and TColor values between color properties, you need to convert these values using specially designed functions.

The table below lists TdxColorPicker members and resource strings that affect the characteristics of the color picker.

Contents The OptionsView property set and the Color property.
Appearance The LookAndFeel, Transparent, and OptionsView.Style properties.
Behavior The OnColorChanged event.
Size The AutoSize property.
Localization The sdxColorPickerAlphaLabel, sdxColorPickerBlueLabel, sdxColorPickerGreenLabel, sdxColorPickerHexCodeLabel, sdxColorPickerHueLabel, sdxColorPickerLightnessLabel, sdxColorPickerRedLabel, and sdxColorPickerSaturationLabel resource strings.