When developing WPF applications with custom visual design, it is very convenient to have a way to specify lighter or darker shades of the same base color. One obvious application of this is setting colors for hovered and pressed states of a button. Here is my solution to this problem.

First, we need to a way to separately control HSL components of color. Here is HslColor class:

```
public class HslColor
{
public readonly double h, s, l, a;
public HslColor(double h, double s, double l, double a)
{
this.h = h;
this.s = s;
this.l = l;
this.a = a;
}
public HslColor(System.Windows.Media.Color rgb)
{
RgbToHls(rgb.R, rgb.G, rgb.B, out h, out l, out s);
a = rgb.A / 255.0;
}
public System.Windows.Media.Color ToRgb()
{
int r, g, b;
HlsToRgb(h, l, s, out r, out g, out b);
return System.Windows.Media.Color.FromArgb((byte)(a * 255.0), (byte)r, (byte)g, (byte)b);
}
public HslColor Lighten(double amount)
{
return new HslColor(h, s, Clamp(L * amount, 0, 1), a);
}
private static double Clamp(double value, double min, double max)
{
if (value < min)
return min;
if (value > max)
return max;
return value;
}
// Convert an RGB value into an HLS value.
static void RgbToHls(int r, int g, int b,
out double h, out double l, out double s)
{
// Convert RGB to a 0.0 to 1.0 range.
double double_r = r / 255.0;
double double_g = g / 255.0;
double double_b = b / 255.0;
// Get the maximum and minimum RGB components.
double max = double_r;
if (max < double_g) max = double_g;
if (max < double_b) max = double_b;
double min = double_r;
if (min > double_g) min = double_g;
if (min > double_b) min = double_b;
double diff = max - min;
l = (max + min) / 2;
if (Math.Abs(diff) < 0.00001)
{
s = 0;
h = 0; // H is really undefined.
}
else
{
if (l <= 0.5) s = diff / (max + min);
else s = diff / (2 - max - min);
double r_dist = (max - double_r) / diff;
double g_dist = (max - double_g) / diff;
double b_dist = (max - double_b) / diff;
if (double_r == max) h = b_dist - g_dist;
else if (double_g == max) h = 2 + r_dist - b_dist;
else h = 4 + g_dist - r_dist;
h = h * 60;
if (h < 0) h += 360;
}
}
// Convert an HLS value into an RGB value.
static void HlsToRgb(double h, double l, double s,
out int r, out int g, out int b)
{
double p2;
if (l <= 0.5) p2 = l * (1 + s);
else p2 = l + s - l * s;
double p1 = 2 * l - p2;
double double_r, double_g, double_b;
if (s == 0)
{
double_r = l;
double_g = l;
double_b = l;
}
else
{
double_r = QqhToRgb(p1, p2, h + 120);
double_g = QqhToRgb(p1, p2, h);
double_b = QqhToRgb(p1, p2, h - 120);
}
// Convert RGB to the 0 to 255 range.
r = (int)(double_r * 255.0);
g = (int)(double_g * 255.0);
b = (int)(double_b * 255.0);
}
private static double QqhToRgb(double q1, double q2, double hue)
{
if (hue > 360) hue -= 360;
else if (hue < 0) hue += 360;
if (hue < 60) return q1 + (q2 - q1) * hue / 60;
if (hue < 180) return q2;
if (hue < 240) return q1 + (q2 - q1) * (240 - hue) / 60;
return q1;
}
}
```

Then, we need a markup extension to lighten and darken a specified color:

```
[MarkupExtensionReturnType(typeof(SolidColorBrush))]
public class LightenExtension : MarkupExtension
{
public SolidColorBrush Source { get; set; }
public double Amount { get; set; }
public override object ProvideValue(IServiceProvider serviceProvider)
{
return new SolidColorBrush(new HslColor(Source.Color).Lighten(Amount).ToRgb());
}
}
```

Here is how to use it to lighten background on hover:

```
<SolidColorBrush x:Key="BackgroundBrush" Color="Red" />
...
<Trigger Property="Border.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{color:Lighten Source={StaticResource BackgroundBrush}, Amount=1.3}" />
</Trigger>
```

You can also darken colors by providing a value less than 1 for amount, e.g.

```
{color:Lighten Source={StaticResource BackgroundBrush}, Amount=0.7}
```

A similar technique can be used to lighten and darken data bound colors by introducing a value converter:

```
public class LightenConverter : IValueConverter
{
public double Amount { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var source = (SolidColorBrush)value;
return new SolidColorBrush(new HslColor(source.Color).Lighten(Amount).ToRgb());
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
```

And the usage is:

```
<Resources>
<color:LightenConverter x:Key="DarkenConverter" Amount="0.65" />
</Resources>
....
<... Foreground="{Binding SomeProperty, Converter={StaticResource DarkenConverter}}">
```

RGB to HSL conversion credits go to this article.