Template:HSLtoRGB.R

Template documentation[view] [edit] [history] [purge]

This template computes the red value in [0..255] in the sRGB color space (as defined in standard CSS3), from a color specified in the HSL color space. The returned value is rounded to the nearest integer.

Syntax

{{HSLtoRGB.R|H|S|L}}

The standard range of the hue parameter (H) is normally [0..360) but can be any value in degrees; it can be any numeric expressions.

The range of the saturation and lightness parameters (S and L) is [0..1], not percentages in [0..100]% ; they can be any numeric expressions.

When the lightness parameter (L) equals 0 or 1, the color is plain black or plain white (respectively), and the value of the hue and saturation parameters (H and S) can be any numeric value (however, black or white are typically specified with H=0, S=0).

When the saturation parameter (S) equals 0, the color is a gray shade between black and white without chromatic value, and the value of the hue parameter (H) can be any numeric value (however, gray shades are typically specified as H=0).

When the saturation parameter (S) equals 1, and lightness (L) is not 0 or 1, the hue parameter varying from 0 to 360 generates the full circle of saturated colors (when lightness equals 0.5, the circle with the greatest number of distinct colors is generated).

{{subst:HSLtoRGB.R|H|S|L|subst=subst:}}

To replace the template invokation by the computed value when saving an article Wiki source.

Algorithm used

if (H + 120) mod 360 > 180 then

if (H + 120) mod 360 > 240 then

if L > 0.5

then R = L - S * (1 - L);

else R = (1 - S) * L;

else

if L > 0.5

then R = L - (1 - (240 - (H + 120) mod 360) / 30) * S * (1 - L));

else R = (1 - (1 - (240 - (H + 120) mod 360) / 30) * S) * L;

else

if (H + 120) mod 360 > 60 then

if L > 0.5

then R = L + S * (1 - L);

else R = (1 + S) * L;

else

if L > 0.5

then R = L - ((1 - (H + 120) mod 360) / 30) * S * (1 - L);

else R = (1 - ((1 - (H + 120) mod 360) / 30) * S) * L;

return (R * 255) round 0;

Examples

• "{{HSLtoRGB.R|0|0|0}}" returns "0".
• "{{HSLtoRGB.R|0|0|1}}" returns "255".
• "{{HSLtoRGB.R|0|1|0.5}}" returns "255".
• "{{HSLtoRGB.R|0.2|1|0.5}}" returns "255".
• "{{HSLtoRGB.R|30|1|0.5}}" returns "255".
• "{{HSLtoRGB.R|60|1|0.5}}" returns "255".
• "{{HSLtoRGB.R|90|1|0.5}}" returns "128".
• "{{HSLtoRGB.R|120|1|0.5}}" returns "0".
• "{{HSLtoRGB.R|150|1|0.5}}" returns "0".
• "{{HSLtoRGB.R|180|1|0.5}}" returns "0".
• "{{HSLtoRGB.R|210|1|0.5}}" returns "0".
• "{{HSLtoRGB.R|240|1|0.5}}" returns "0".
• "{{HSLtoRGB.R|270|1|0.5}}" returns "128".
• "{{HSLtoRGB.R|300|1|0.5}}" returns "255".
• "{{HSLtoRGB.R|330|1|0.5}}" returns "255".
• "{{HSLtoRGB.R|359.8|1|0.5}}" returns "255".
• example for "sandybrown" = "#F4A460" = "rgb(244, 164, 96)" = "hsl(27.6, 0.871, 0.667)"

"{{HSLtoRGB.R|27.6|0.871|0.667}}" returns "244".

• same example using subst

"{{subst:HSLtoRGB.R|27.6|0.871|0.667|subst=subst:}}" returns "244".

See also

• Template:HSLtoRGB.G, Template:HSLtoRGB.B
• Template:RGBtoHSL.H, Template:RGBtoHSL.S, Template:RGBtoHSL.L

The above documentation is transcluded from Template:HSLtoRGB.R/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.