Overview
TheDaisyColorEditor control provides a complete color editing interface with:
- RGB sliders and numeric inputs (Red, Green, Blue, Alpha)
- HSL sliders and numeric inputs (Hue, Saturation, Lightness)
- Hexadecimal color input (#RRGGBB or #AARRGGBB)
- Real-time synchronization between all editing modes
Properties
Gets or sets the selected color. Changes to this property update all RGB, HSL, and hex components.
Gets or sets the HSL representation of the color. Changes are synchronized with the
Color property.Gets or sets the preferred editing mode. Values:
ColorEditingMode.Rgb- RGB slidersColorEditingMode.Hsl- HSL sliders
Gets or sets whether to display alpha channel controls (A slider and input in RGB section, affects hex field digit count).
Gets or sets whether to display the hexadecimal color input field.
Gets or sets whether to display the RGB sliders section.
Gets or sets whether to display the HSL sliders section.
Gets or sets the red component (0-255). Changes update the
Color property and all other components.Gets or sets the green component (0-255).
Gets or sets the blue component (0-255).
Gets or sets the alpha component (0-255). Note: On Android/iOS, this property uses
new to avoid conflicts with base class members.Gets or sets the hue component in degrees (0-359). Changes update the
Color property and RGB components.Gets or sets the saturation component as a percentage (0-100). Internally converted to 0-1 range for HSL calculations.
Gets or sets the lightness component as a percentage (0-100). Internally converted to 0-1 range for HSL calculations.
Gets or sets the color as a hexadecimal string. Format depends on
ShowAlphaChannel:true:#AARRGGBB(8 digits)false:#RRGGBB(6 digits)
Gets or sets an optional callback invoked when the color changes.
Events
Occurs when the color changes through any editing method (sliders, numeric inputs, or hex field).
Child Controls
TheDaisyColorEditor integrates the following child controls:
DaisyColorSlider
Each color component uses aDaisyColorSlider with appropriate gradient background:
- Red slider: Black to red gradient
- Green slider: Black to green gradient
- Blue slider: Black to blue gradient
- Alpha slider: Transparent to opaque with checkerboard pattern
- Hue slider: Full spectrum gradient (0-359°)
- Saturation slider: Gray to full saturation
- Lightness slider: Black to white through current hue
DaisyNumericUpDown
Each component has a paired numeric input:- RGB/Alpha: 0-255 range with increment buttons
- Hue: 0-359 range
- Saturation/Lightness: 0-100 range
- Hex:
DaisyNumberBase.ColorHexmode with 6 or 8 digits
Color Model Conversions
RGB to HSL
When RGB values change, HSL is automatically calculated:HSL to RGB
When HSL values change, RGB is automatically calculated:Hex Synchronization
Examples
Full Color Editor
RGB-Only Editor (No Alpha)
HSL-Only Editor
Minimal Hex Editor
Complete Color Picker Dialog
Programmatic Color Editing
Alpha Channel Toggle
Implementation Notes
- All component properties (Red, Green, Blue, Alpha, Hue, Saturation, Lightness, HexValue) are kept in sync via a
_lockUpdatesflag to prevent circular updates - Changes to any component trigger
OnColorChangedcallbacks only once per user action - The hex input uses
DaisyNumericUpDownwithNumberBase.ColorHexmode - Sliders use
DaisyColorSliderwith appropriateColorSliderChannelfor gradient rendering - Numeric inputs have responsive minimum widths based on the control’s
Sizeproperty - The control uses
RegisterPropertyChangedCallbackfor efficient change tracking on numeric inputs - The control inherits from
DaisyBaseContentControland implementsIScalableControlfor automatic font scaling

