RGB to HSL
RGB to HSL is a color conversion method that transforms colors from the RGB (Red, Green, Blue) color model to the HSL (Hue, Saturation, Lightness) color model. In the RGB model, colors are represented by their intensities of red, green, and blue light. In the HSL model, colors are represented by their hue, saturation, and lightness values.
Hue represents the color's position on the color wheel, ranging from 0 to 360 degrees. Saturation represents the color's intensity or purity, ranging from 0 to 100%. Lightness represents the color's perceived brightness, ranging from 0 to 100%.
To convert RGB to HSL, we first calculate the hue value based on the RGB values. Then, we calculate the saturation and lightness values using the formulae:
Saturation = (max(R, G, B) - min(R, G, B)) / (1 - abs(2 * L - 1))
Lightness = (max(R, G, B) + min(R, G, B)) / 2
where R, G, and B are the red, green, and blue values, and L is the lightness value.
The resulting HSL values can be represented in HTML using the following format:
hsl(hue, saturation%, lightness%)
For example, the color teal can be represented in RGB as (0, 128, 128). To convert this to HSL, we first calculate the hue as 180 degrees (since teal is halfway between blue and green on the color wheel). Then, we calculate the saturation and lightness as 100% and 25%, respectively. Therefore, the HSL value for teal is hsl(180, 100%, 25%).
Here's the HTML formatted code for the teal color:
<div style="background-color: hsl(180, 100%, 25%); width: 100px; height: 100px;"></div>
This will create a div element with a teal background color and a width and height of 100 pixels.