Skip to main content

Overview

The DaisyColorEditor 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
<DaisyColorEditor 
    Color="{Binding SelectedColor, Mode=TwoWay}"
    ShowAlphaChannel="True"
    EditingMode="Rgb" />

Properties

Color
Color
default:"Colors.Red"
Gets or sets the selected color. Changes to this property update all RGB, HSL, and hex components.
HslColor
HslColor
default:"new HslColor(0, 1, 0.5)"
Gets or sets the HSL representation of the color. Changes are synchronized with the Color property.
EditingMode
ColorEditingMode
default:"ColorEditingMode.Rgb"
Gets or sets the preferred editing mode. Values:
  • ColorEditingMode.Rgb - RGB sliders
  • ColorEditingMode.Hsl - HSL sliders
Note: Both modes are always available; this property can be used to expand/collapse sections in custom templates.
ShowAlphaChannel
bool
default:"true"
Gets or sets whether to display alpha channel controls (A slider and input in RGB section, affects hex field digit count).
ShowHexInput
bool
default:"true"
Gets or sets whether to display the hexadecimal color input field.
ShowRgbSliders
bool
default:"true"
Gets or sets whether to display the RGB sliders section.
ShowHslSliders
bool
default:"true"
Gets or sets whether to display the HSL sliders section.
Red
byte
default:"255"
Gets or sets the red component (0-255). Changes update the Color property and all other components.
Green
byte
default:"0"
Gets or sets the green component (0-255).
Blue
byte
default:"0"
Gets or sets the blue component (0-255).
Alpha
byte
default:"255"
Gets or sets the alpha component (0-255). Note: On Android/iOS, this property uses new to avoid conflicts with base class members.
Hue
double
default:"0.0"
Gets or sets the hue component in degrees (0-359). Changes update the Color property and RGB components.
Saturation
double
default:"100.0"
Gets or sets the saturation component as a percentage (0-100). Internally converted to 0-1 range for HSL calculations.
Lightness
double
default:"50.0"
Gets or sets the lightness component as a percentage (0-100). Internally converted to 0-1 range for HSL calculations.
HexValue
string
default:"#FF0000"
Gets or sets the color as a hexadecimal string. Format depends on ShowAlphaChannel:
  • true: #AARRGGBB (8 digits)
  • false: #RRGGBB (6 digits)
OnColorChangedCallback
Action<Color>
Gets or sets an optional callback invoked when the color changes.

Events

ColorChanged
EventHandler<ColorChangedEventArgs>
Occurs when the color changes through any editing method (sliders, numeric inputs, or hex field).
private void OnEditorColorChanged(object sender, ColorChangedEventArgs e)
{
    UpdateColorPreview(e.Color);
}

Child Controls

The DaisyColorEditor integrates the following child controls:

DaisyColorSlider

Each color component uses a DaisyColorSlider 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.ColorHex mode with 6 or 8 digits

Color Model Conversions

RGB to HSL

When RGB values change, HSL is automatically calculated:
// RGB: (255, 0, 0) → HSL: (0°, 100%, 50%)
colorEditor.Red = 255;
colorEditor.Green = 0;
colorEditor.Blue = 0;
// Hue = 0, Saturation = 100, Lightness = 50

HSL to RGB

When HSL values change, RGB is automatically calculated:
// HSL: (120°, 100%, 50%) → RGB: (0, 255, 0)
colorEditor.Hue = 120;
colorEditor.Saturation = 100;
colorEditor.Lightness = 50;
// Red = 0, Green = 255, Blue = 0

Hex Synchronization

// Setting hex updates RGB and HSL
colorEditor.HexValue = "#FF5733";
// Red = 255, Green = 87, Blue = 51
// Hue ≈ 11°, Saturation = 100%, Lightness ≈ 60%

// Setting RGB updates hex
colorEditor.Red = 0;
colorEditor.Green = 128;
colorEditor.Blue = 255;
// HexValue = "#0080FF"

Examples

Full Color Editor

<DaisyColorEditor 
    Color="{Binding CurrentColor, Mode=TwoWay}"
    ShowAlphaChannel="True"
    ColorChanged="OnColorEditorChanged" />

RGB-Only Editor (No Alpha)

<DaisyColorEditor 
    Color="{Binding CurrentColor, Mode=TwoWay}"
    ShowAlphaChannel="False"
    ShowHslSliders="False" />

HSL-Only Editor

<DaisyColorEditor 
    Color="{Binding CurrentColor, Mode=TwoWay}"
    ShowRgbSliders="False"
    ShowHexInput="False"
    ShowAlphaChannel="False" />

Minimal Hex Editor

<DaisyColorEditor 
    Color="{Binding CurrentColor, Mode=TwoWay}"
    ShowRgbSliders="False"
    ShowHslSliders="False"
    ShowAlphaChannel="False" />

Complete Color Picker Dialog

<StackPanel Spacing="16" Padding="16">
    <!-- Preview -->
    <Border 
        Width="200" 
        Height="60" 
        Background="{x:Bind ColorBrush, Mode=OneWay}"
        BorderBrush="Gray" 
        BorderThickness="1" />
    
    <!-- Wheel for hue/saturation -->
    <DaisyColorWheel 
        Width="200" 
        Height="200"
        Color="{x:Bind CurrentColor, Mode=TwoWay}"
        Lightness="{x:Bind Lightness, Mode=OneWay}" />
    
    <!-- Editor for precise values -->
    <DaisyColorEditor 
        Color="{x:Bind CurrentColor, Mode=TwoWay}"
        ShowAlphaChannel="True" />
    
    <!-- Recent colors -->
    <DaisyColorGrid 
        Palette="{x:Bind RecentColors}"
        ShowCustomColors="False"
        Columns="8"
        CellSize="24,24"
        Color="{x:Bind CurrentColor, Mode=TwoWay}" />
</StackPanel>
public sealed partial class ColorPickerPage : Page, INotifyPropertyChanged
{
    private Color _currentColor = Colors.Red;
    private double _lightness = 0.5;

    public Color CurrentColor
    {
        get => _currentColor;
        set
        {
            if (_currentColor != value)
            {
                _currentColor = value;
                OnPropertyChanged();
                OnPropertyChanged(nameof(ColorBrush));
            }
        }
    }

    public double Lightness
    {
        get => _lightness;
        set
        {
            if (Math.Abs(_lightness - value) > 0.001)
            {
                _lightness = value;
                OnPropertyChanged();
            }
        }
    }

    public SolidColorBrush ColorBrush => new(CurrentColor);

    public ColorCollection RecentColors { get; } = ColorCollection.CreateCustom(16);

    // INotifyPropertyChanged implementation
    public event PropertyChangedEventHandler? PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Programmatic Color Editing

// Set RGB values
colorEditor.Red = 255;
colorEditor.Green = 128;
colorEditor.Blue = 64;

// Set HSL values
colorEditor.Hue = 180;
colorEditor.Saturation = 75;
colorEditor.Lightness = 60;

// Set hex value
colorEditor.HexValue = "#FF8040";

// Set alpha
colorEditor.Alpha = 200;

// All methods update Color property and sync other components
var finalColor = colorEditor.Color;

Alpha Channel Toggle

<StackPanel Spacing="8">
    <CheckBox 
        Content="Show Alpha Channel"
        IsChecked="{x:Bind ColorEditor.ShowAlphaChannel, Mode=TwoWay}" />
    
    <DaisyColorEditor x:Name="ColorEditor" Color="{Binding CurrentColor, Mode=TwoWay}" />
</StackPanel>

Implementation Notes

  • All component properties (Red, Green, Blue, Alpha, Hue, Saturation, Lightness, HexValue) are kept in sync via a _lockUpdates flag to prevent circular updates
  • Changes to any component trigger OnColorChanged callbacks only once per user action
  • The hex input uses DaisyNumericUpDown with NumberBase.ColorHex mode
  • Sliders use DaisyColorSlider with appropriate ColorSliderChannel for gradient rendering
  • Numeric inputs have responsive minimum widths based on the control’s Size property
  • The control uses RegisterPropertyChangedCallback for efficient change tracking on numeric inputs
  • The control inherits from DaisyBaseContentControl and implements IScalableControl for automatic font scaling

Build docs developers (and LLMs) love