C# uses uses RGB (red, green, and blue) component values to specify colors where each component value is between 0 and 255. The HLS system uses the values hue, lightness, and saturation where:

- Hue determines the color with a 0 to 360 degree direction on a color wheel.
- Lightness indicates how much light is in the color. When lightness = 0, the color is black. When lightness = 1, the color is white. When lightness = 0.5, the color is as “pure” as possible.
- Saturation indicates the amount of color added. You can think of this as the opposite of “grayness.” When saturation = 0, the color is pure gray. In this case, if lightness = 0.5 you get a neutral color. When saturation is 1, the color is “pure.”

This example uses the following code to translate between RGB and HLS values.

// Convert an RGB value into an HLS value. public 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. public 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; }

For information about the HLS color model, see the HSL and HSV Wikipedia entry.

Nice article – I especially like your explantions of the HLS meanings.

A while ago I used a slightly different implementation for converting HLS to RGB in a mobile app. The motivation was, to control the color with a single slider control: This is possible by varying the Hue value in the HLS space. Since the app is controlling some RGB LED I had to convert the HLS values into RGB.

Your article nicely gives the most important background information and provides the dirty details for the conversion also.

Cheers,

Stefan

Pingback: Use scrollbars to select RGB and HLS colors in C# - C# HelperC# Helper