Color Picker Suite

Overview

Flowery.Uno provides a complete suite of color picker controls that work together to create rich color selection experiences. All controls support HSL and RGB color spaces, automatic theme integration, and accessibility features.

All color picker controls support automatic font scaling when contained within a FloweryScaleManager.EnableScaling="True" container.

Color Picker Controls

DaisyColorWheel

A circular color wheel for selecting hue and saturation values. The wheel displays colors in HSL color space with a draggable marker.

Basic Usage
Properties
Keyboard Navigation

<colorpicker:DaisyColorWheel
    x:Name="ColorWheel"
    Width="200"
    Height="200"
    Color="Red"
    Lightness="0.5"
    ColorChanged="OnColorChanged" />

Property	Type	Default	Description
`Color`	`Color`	`Red`	Selected color (RGB)
`HslColor`	`HslColor`	-	HSL representation
`Lightness`	`double`	`0.5`	Lightness level (0-1)
`SelectionSize`	`double`	`10.0`	Marker size
`SelectionOutlineColor`	`Color`	`White`	Marker outline color
`ShowCenterLines`	`bool`	`false`	Show crosshairs
`ColorStep`	`int`	`4`	Color step (lower = smoother)
`OnColorChanged`	`Action<Color>`	-	Callback when color changes

How It Works

The wheel renders a bitmap where:

Angle = Hue (0-359°)
Distance from center = Saturation (0-1)
Lightness is fixed at the Lightness property value

Drag the marker to select a color, or use keyboard navigation for precise control.

Example: Linked Lightness Slider

<StackPanel Spacing="12">
    <colorpicker:DaisyColorWheel
        x:Name="ColorWheel"
        Width="200"
        Height="200"
        Lightness="{x:Bind LightnessSlider.Value, Mode=OneWay}" />
    
    <colorpicker:DaisyColorSlider
        x:Name="LightnessSlider"
        Channel="Lightness"
        Color="{x:Bind ColorWheel.Color, Mode=TwoWay}"
        Height="20" />
</StackPanel>

DaisyColorGrid

A grid control for displaying and selecting colors from a palette. Supports custom color collections and auto-add functionality.

Basic Usage
Properties
Palettes

<colorpicker:DaisyColorGrid
    x:Name="ColorGrid"
    Palette="Paint"
    ShowCustomColors="True"
    AutoAddColors="True"
    ColorChanged="OnColorChanged" />

Property	Type	Default	Description
`Color`	`Color`	`Black`	Selected color
`ColorIndex`	`int`	`-1`	Index of selected color
`Palette`	`ColorCollection`	`Paint`	Color collection to display
`CustomColors`	`ColorCollection`	16 slots	Custom colors collection
`ShowCustomColors`	`bool`	`true`	Show custom colors section
`CellSize`	`Size`	`16×16`	Size of each cell
`Spacing`	`Size`	`3×3`	Spacing between cells
`Columns`	`int`	`16`	Number of columns
`CellBorderColor`	`Color`	Gray	Cell border color
`SelectionBorderColor`	`Color`	Blue	Selection border color
`AutoAddColors`	`bool`	`true`	Auto-add selected colors to custom

Built-in palettes:

ColorCollection.Paint - Standard paint palette
ColorCollection.Web - Web-safe colors
ColorCollection.CreateCustom(n) - Empty custom palette with n slots

Example: Custom Palette

var myPalette = new ColorCollection();
myPalette.Add(Colors.Red);
myPalette.Add(Colors.Green);
myPalette.Add(Colors.Blue);

ColorGrid.Palette = myPalette;

Arrow Keys: Navigate cells
Home/End: Jump to first/last color
Enter/Space: Select current cell

DaisyColorSlider

A slider control for selecting individual color channel values (RGB, HSL, Alpha).

RGB Sliders
HSL Sliders
Properties

<StackPanel Spacing="6">
    <colorpicker:DaisyColorSlider
        Channel="Red"
        Color="{x:Bind MyColor, Mode=TwoWay}"
        Height="18" />
    
    <colorpicker:DaisyColorSlider
        Channel="Green"
        Color="{x:Bind MyColor, Mode=TwoWay}"
        Height="18" />
    
    <colorpicker:DaisyColorSlider
        Channel="Blue"
        Color="{x:Bind MyColor, Mode=TwoWay}"
        Height="18" />
    
    <colorpicker:DaisyColorSlider
        Channel="Alpha"
        Color="{x:Bind MyColor, Mode=TwoWay}"
        Height="18"
        ShowCheckerboard="True" />
</StackPanel>

<StackPanel Spacing="6">
    <colorpicker:DaisyColorSlider
        Channel="Hue"
        Color="{x:Bind MyColor, Mode=TwoWay}"
        Height="18" />
    
    <colorpicker:DaisyColorSlider
        Channel="Saturation"
        Color="{x:Bind MyColor, Mode=TwoWay}"
        Height="18" />
    
    <colorpicker:DaisyColorSlider
        Channel="Lightness"
        Color="{x:Bind MyColor, Mode=TwoWay}"
        Height="18" />
</StackPanel>

Property	Type	Default	Description
`Channel`	`ColorSliderChannel`	`Hue`	Channel to control
`Color`	`Color`	`Red`	Current color
`Orientation`	`Orientation`	`Horizontal`	Slider orientation
`NubSize`	`double`	`8.0`	Thumb/nub size
`ShowCheckerboard`	`bool`	`true`	Show checkerboard for alpha
`Minimum`	`double`	Auto	Minimum value
`Maximum`	`double`	Auto	Maximum value
`Value`	`double`	`0`	Current channel value

Channel Types

public enum ColorSliderChannel
{
    Red,         // 0-255
    Green,       // 0-255
    Blue,        // 0-255
    Alpha,       // 0-255
    Hue,         // 0-359
    Saturation,  // 0-100
    Lightness    // 0-100
}

Vertical Orientation

<colorpicker:DaisyColorSlider
    Channel="Hue"
    Orientation="Vertical"
    Width="20"
    Height="200" />

DaisyColorEditor

A comprehensive color editor with RGB/HSL sliders and numeric inputs. This is the most feature-complete picker control.

Full Editor
RGB Only
Properties

<colorpicker:DaisyColorEditor
    x:Name="ColorEditor"
    Color="{x:Bind ViewModel.SelectedColor, Mode=TwoWay}"
    ShowHexInput="True"
    ShowRgbSliders="True"
    ShowHslSliders="True"
    ShowAlphaChannel="True" />

<colorpicker:DaisyColorEditor
    Color="{x:Bind MyColor, Mode=TwoWay}"
    ShowHslSliders="False"
    ShowHexInput="False" />

Property	Type	Default	Description
`Color`	`Color`	`Red`	Selected color
`HslColor`	`HslColor`	-	HSL representation
`EditingMode`	`ColorEditingMode`	`Rgb`	Editing mode
`ShowAlphaChannel`	`bool`	`true`	Show alpha controls
`ShowHexInput`	`bool`	`true`	Show hex input field
`ShowRgbSliders`	`bool`	`true`	Show RGB sliders
`ShowHslSliders`	`bool`	`true`	Show HSL sliders
`Red`	`byte`	`255`	Red component (0-255)
`Green`	`byte`	`0`	Green component (0-255)
`Blue`	`byte`	`0`	Blue component (0-255)
`Alpha`	`byte`	`255`	Alpha component (0-255)
`Hue`	`double`	`0`	Hue component (0-359)
`Saturation`	`double`	`100`	Saturation (0-100)
`Lightness`	`double`	`50`	Lightness (0-100)
`HexValue`	`string`	-	Hex color string

Features

Dual mode: RGB and HSL sliders with synchronized updates
Hex input: Supports 6-digit (#RRGGBB) and 8-digit (#AARRGGBB) formats
Numeric inputs: DaisyNumericUpDown for precise value entry
Auto-sync: All controls automatically sync when any value changes

Example: Compact Color Editor

<Border BorderBrush="{ThemeResource DaisyBase300Brush}"
        BorderThickness="1"
        Padding="8">
    <colorpicker:DaisyColorEditor
        Color="{x:Bind MyColor, Mode=TwoWay}"
        ShowHexInput="True"
        ShowRgbSliders="True"
        ShowHslSliders="False"
        ShowAlphaChannel="False" />
</Border>

DaisyScreenColorPicker

A control for picking colors from anywhere on the screen using an eyedropper tool (Windows only).

DaisyScreenColorPicker uses Win32 APIs and only works on Windows. On other platforms, it displays but does not capture screen colors.

Basic Usage
Properties
Events

<colorpicker:DaisyScreenColorPicker
    x:Name="ScreenPicker"
    Color="{x:Bind ViewModel.PickedColor, Mode=TwoWay}"
    PickingCompleted="OnPickingCompleted" />

Property	Type	Default	Description
`Color`	`Color`	`Black`	Selected color
`IsCapturing`	`bool`	`false`	Whether currently capturing
`OnColorChanged`	`Action<Color>`	-	Callback when color changes

public event EventHandler<ColorChangedEventArgs>? ColorChanged;
public event EventHandler? PickingCompleted;
public event EventHandler? PickingCancelled;

How to Use

Click and hold

Click on the screen picker control and hold the mouse button.

Drag anywhere

Drag the cursor anywhere on the screen. The preview updates in real-time.

Release to pick

Release the mouse button to pick the color under the cursor.

Escape to cancel

Press Escape to cancel the pick operation.

Display

The control shows:

Color preview with checkerboard background for transparency
Hex value (#RRGGBB)
RGB values (R:nnn G:nnn B:nnn)
Status text (“Click and drag to pick” / “Release to pick”)
Eyedropper icon (hidden while capturing)

HSL Color Space

All color picker controls support HSL (Hue, Saturation, Lightness) color space alongside RGB.

HslColor Struct

public struct HslColor
{
    public int A { get; set; }      // Alpha (0-255)
    public double H { get; set; }   // Hue (0-359)
    public double S { get; set; }   // Saturation (0-1)
    public double L { get; set; }   // Lightness (0-1)
    
    // Constructors
    public HslColor(double hue, double saturation, double lightness);
    public HslColor(int alpha, double hue, double saturation, double lightness);
    public HslColor(Color color);
    
    // Conversion
    public Color ToRgbColor();
    public Color ToRgbColor(int alpha);
}

HSL ↔ RGB Conversion

// RGB to HSL
var rgbColor = Colors.Red;
var hslColor = new HslColor(rgbColor);
Console.WriteLine($"H={hslColor.H}, S={hslColor.S}, L={hslColor.L}");

// HSL to RGB
var hsl = new HslColor(120, 1.0, 0.5); // Green
var rgb = hsl.ToRgbColor();

// Implicit conversion
Color color = new HslColor(240, 1.0, 0.5); // Blue
HslColor hsl2 = Colors.Yellow;

Integration Patterns

Complete Color Picker Dialog

Combine multiple controls for a comprehensive color picker:

<StackPanel Spacing="12" Padding="12">
    <!-- Wheel + Lightness -->
    <Grid ColumnSpacing="12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <colorpicker:DaisyColorWheel
            x:Name="ColorWheel"
            Grid.Column="0"
            Width="200"
            Height="200"
            Lightness="{x:Bind LightnessSlider.Value, Mode=OneWay}"
            Color="{x:Bind SelectedColor, Mode=TwoWay}" />
        
        <colorpicker:DaisyColorSlider
            x:Name="LightnessSlider"
            Grid.Column="1"
            Channel="Lightness"
            Orientation="Vertical"
            Width="20"
            Height="200"
            Color="{x:Bind SelectedColor, Mode=TwoWay}" />
    </Grid>
    
    <!-- Editor -->
    <colorpicker:DaisyColorEditor
        Color="{x:Bind SelectedColor, Mode=TwoWay}" />
    
    <!-- Palette -->
    <colorpicker:DaisyColorGrid
        Color="{x:Bind SelectedColor, Mode=TwoWay}"
        Height="120" />
    
    <!-- Screen Picker -->
    <colorpicker:DaisyScreenColorPicker
        Color="{x:Bind SelectedColor, Mode=TwoWay}" />
</StackPanel>

Theme-Based Color Picker

Bind to DaisyUI theme colors:

<StackPanel Spacing="8">
    <TextBlock Text="Select Theme Color" />
    
    <colorpicker:DaisyColorGrid
        ColorChanged="OnThemeColorChanged">
        <colorpicker:DaisyColorGrid.Palette>
            <colorpicker:ColorCollection>
                <Color>{ThemeResource DaisyPrimaryColor}</Color>
                <Color>{ThemeResource DaisySecondaryColor}</Color>
                <Color>{ThemeResource DaisyAccentColor}</Color>
                <Color>{ThemeResource DaisyInfoColor}</Color>
                <Color>{ThemeResource DaisySuccessColor}</Color>
                <Color>{ThemeResource DaisyWarningColor}</Color>
                <Color>{ThemeResource DaisyErrorColor}</Color>
            </colorpicker:ColorCollection>
        </colorpicker:DaisyColorGrid.Palette>
    </colorpicker:DaisyColorGrid>
</StackPanel>

Custom Color with Callback

<colorpicker:DaisyColorWheel
    Width="200"
    Height="200"
    OnColorChanged="{x:Bind UpdateBackgroundColor}" />

private void UpdateBackgroundColor(Color color)
{
    MyPanel.Background = new SolidColorBrush(color);
}

Accessibility

All color picker controls support:

Keyboard navigation with arrow keys, Home/End, Page Up/Down
Focus visuals using UseSystemFocusVisuals="True"
Screen reader support via AutomationProperties.Name
Custom accessible text via AccessibleText property

<colorpicker:DaisyColorWheel
    AccessibleText="Background color picker"
    IsTabStop="True"
    UseSystemFocusVisuals="True" />

Best Practices

Use HSL for hue-based adjustments

HSL is ideal for color manipulation (brightness, saturation adjustments) while RGB is better for precise channel control.

Combine controls for rich experiences

Pair DaisyColorWheel with sliders for the most intuitive color selection.

Provide alpha channel when needed

Set ShowAlphaChannel="True" on DaisyColorEditor and use DaisyColorSlider with Channel="Alpha" for transparency support.

Use ColorCollection for presets

Provide users with common color presets using DaisyColorGrid with a custom palette.

Sync multiple controls with two-way binding

Bind all controls to the same Color property with Mode=TwoWay for automatic synchronization.

Get Started

Core Concepts

Components

Advanced Features

Guides

Overview

Color Picker Controls

DaisyColorWheel

How It Works

Example: Linked Lightness Slider

DaisyColorGrid

Example: Custom Palette

Keyboard Navigation

DaisyColorSlider

Channel Types

Vertical Orientation

DaisyColorEditor

Features

Example: Compact Color Editor

DaisyScreenColorPicker

How to Use

Display

HSL Color Space

HslColor Struct

HSL ↔ RGB Conversion

Integration Patterns

Complete Color Picker Dialog

Theme-Based Color Picker

Custom Color with Callback

Accessibility

Best Practices

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Advanced Features

Guides

​Overview

​Color Picker Controls

​DaisyColorWheel

​How It Works

​Example: Linked Lightness Slider

​DaisyColorGrid

​Example: Custom Palette

​Keyboard Navigation

​DaisyColorSlider

​Channel Types

​Vertical Orientation

​DaisyColorEditor

​Features

​Example: Compact Color Editor

​DaisyScreenColorPicker

​How to Use

​Display

​HSL Color Space

​HslColor Struct

​HSL ↔ RGB Conversion

​Integration Patterns

​Complete Color Picker Dialog

​Theme-Based Color Picker

​Custom Color with Callback

​Accessibility

​Best Practices

Build docs developers (and LLMs) love

Overview

Color Picker Controls

DaisyColorWheel

How It Works

Example: Linked Lightness Slider

DaisyColorGrid

Example: Custom Palette

Keyboard Navigation

DaisyColorSlider

Channel Types

Vertical Orientation

DaisyColorEditor

Features

Example: Compact Color Editor

DaisyScreenColorPicker

How to Use

Display

HSL Color Space

HslColor Struct

HSL ↔ RGB Conversion

Integration Patterns

Complete Color Picker Dialog

Theme-Based Color Picker

Custom Color with Callback

Accessibility

Best Practices