Overview
TheDaisyColorWheel control displays a circular color wheel where users can select colors by choosing hue (angle around the circle) and saturation (distance from center). It uses the HSL color model and provides both mouse/touch and keyboard interaction.
Properties
Gets or sets the selected color. This property automatically syncs with
HslColor and updates the selection marker position.Gets or sets the HSL color representation. Changes to this property update the
Color property and selection marker.Gets or sets the lightness value (0-1) for the color wheel display. The wheel shows all hues and saturations at this lightness level. Changing this regenerates the wheel bitmap.
Gets or sets the diameter of the selection marker in pixels. The marker consists of three concentric circles to ensure visibility on any color.
Gets or sets the color of the outermost selection marker ring. Use white for dark backgrounds or black for light backgrounds.
Gets or sets whether to display crosshair lines through the center of the wheel for precise alignment.
Gets or sets the pixel step for generating the wheel bitmap. Lower values (1-2) produce smoother gradients but slower rendering. Higher values (4-8) render faster with slight banding.
Gets or sets an optional callback invoked when the color changes. This provides a simpler alternative to the
ColorChanged event.Gets or sets custom accessibility text for screen readers. If not set, defaults to “Color wheel H S ”.
Events
Occurs when the selected color changes through user interaction or programmatic updates.
Methods
Returns the color at the specified point on the wheel, or
Colors.Transparent if the point is outside the wheel radius.Keyboard Navigation
The color wheel supports full keyboard navigation:- Arrow Keys: Adjust hue (Left/Right by 5°) and saturation (Up/Down by 5%)
- Home/End: Jump to 0° or 359° hue
- Page Up/Down: Adjust saturation by 10%
- Enter/Space: Step hue forward by 5°
HSL Color Model
The color wheel uses the HSL (Hue, Saturation, Lightness) color model:- Hue (H): 0-359 degrees around the color wheel (0=red, 120=green, 240=blue)
- Saturation (S): 0-1, distance from center (0=gray, 1=full color)
- Lightness (L): 0-1, controlled by the
Lightnessproperty (0=black, 0.5=pure color, 1=white)
Converting Between RGB and HSL
Examples
Basic Color Selection
Custom Lightness Slider
High-Quality Rendering
Callback Pattern
Implementation Notes
- The wheel bitmap is regenerated when
LightnessorColorStepchanges, or when the control is resized - The control uses
WriteableBitmapfor efficient rendering with per-pixel color calculation - Selection marker position is calculated from the current HSL values: angle from hue, distance from saturation
- The control inherits from
DaisyBaseContentControland implementsIScalableControlfor automatic font scaling

