a:hslClr (HSL Color)
Specifies a color using HSL (Hue, Saturation, Lightness) color model for intuitive color creation.
Parent elements
Description
a:hslClr is the DrawingML HSL color element that defines a color using the HSL (Hue-Saturation-Lightness) model. It is defined in ECMA-376 Part 1 §20.1.2.3.13.
HSL color model provides:
- Hue (0-21600): Color type (0=red, 5400=yellow, 10800=green, 16200=blue)
- Saturation (0-100000): Color intensity (0=gray, 100000=pure color)
- Lightness (0-100000): Brightness (0=black, 50000=pure, 100000=white)
Benefits:
- More intuitive than RGB for designers
- Easy to create color harmonies
- Natural lightening/darkening through lightness adjustment
- Better for human-readable color specifications
Attributes
| Attribute | Type | Possible Values | Description |
|---|---|---|---|
h |
integer | 0-21600 | Hue in degrees × 60 (0°-360°). |
s |
integer | 0-100000 | Saturation percentage (0-100%). |
l |
integer | 0-100000 | Lightness percentage (0-100%). |
Examples
Pure Red (HSL)
<a:solidFill>
<a:hslClr h="0" s="100000" l="50000"/>
</a:solidFill>using DocumentFormat.OpenXml.Drawing;
var solidFill = new SolidFill();
var hslClr = new HslColor
{
Hue = 0, // 0° = Red
Saturation = 100000, // 100% saturation
Lightness = 50000 // 50% lightness (pure color)
};
solidFill.Append(hslClr);Light Pastel Blue
<a:hslClr h="14400" s="50000" l="75000"/>var hslClr = new HslColor
{
Hue = 14400, // 240° = Blue
Saturation = 50000, // 50% saturation (muted)
Lightness = 75000 // 75% lightness (very light)
};Notes
- Hue: 0-21600 (0°-360°); 0=Red, 5400=Yellow, 10800=Green, 16200=Blue
- Saturation & Lightness: 0-100000 scale (0-100%)
- HSL is more intuitive than RGB for color design
- Easy to create color variations: modify lightness for tints/shades
- Standard hue wheel: every 3600 units = 60° increment
- Common reference: h=0 (red), h=5400 (yellow), h=10800 (green), h=14400 (cyan), h=16200 (blue), h=19800 (magenta)