The same orange can be written as rgb(255 128 0) or approximately hsl(30.12 100% 50%). The numbers look unrelated, yet they describe the same sRGB color to the precision shown.
Translating RGB values into HSL gives you controls for hue, saturation, and lightness. Converting an HSL color back into RGB lets you carry the result into a workflow that asks for red, green, and blue channels.
What the values describe
RGB specifies red, green, and blue components. In common CSS notation, each runs from 0 to 255. HSL describes the same sRGB range using a hue angle and two percentages. Neither notation needs to change the color when you switch between them.
Hue is a position around a color wheel: red is at 0 degrees, green at 120, and blue at 240. Saturation controls the strength of the color: at 0%, the result is gray. Lightness runs from black at 0% to white at 100%; at 50%, a fully saturated color is at its strongest in this model. HSL lightness is not the same measurement as perceived luminance, so equal lightness values can look different in brightness.
When moving from RGB to HSL, check the source color space. The calculations below use sRGB channel values, as do CSS rgb() and hsl(). An RGB triplet in a different profile may represent a different color. Convert profiles appropriately before comparing numbers across applications.
Convert an orange step by step
To convert RGB to HSL, start with rgb(255 128 0). Divide each channel by 255 to put it on a 0–1 scale: red is 1, green is approximately 0.50196, and blue is 0.
The maximum channel is 1, the minimum is 0, and their difference is 1. Lightness is the average of maximum and minimum: (1 + 0) / 2 = 0.5, or 50%. Saturation is difference / (1 − |2 × lightness − 1|), which gives 1, or 100%.
For hue, use the formula for a red maximum: 60 × ((green − blue) / difference). Here that gives approximately 30.1176 degrees. Thus the RGB to hue calculation places this orange just beyond 30 degrees on the wheel. This method derives hue from the RGB channels along with saturation and lightness. The resulting HSL is approximately hsl(30.12 100% 50%).
This shortcut for hue applies because red is the maximum and green is at least blue. Other maximum channels use different branches, and a negative hue is wrapped into the 0–360 range. When all three channels are equal, the difference is zero: saturation is zero and hue has no visible effect. The W3C conversion algorithm covers these cases.
HSL to RGB: Return to channel values
For the reverse direction, use the same orange with its unrounded hue, approximately 30.1176, saturation 100%, and lightness 50%. At this lightness and saturation, the maximum channel is 1 and the minimum is 0. The hue falls between red and yellow, so red is the maximum, blue is the minimum, and green is the fraction 30.1176 / 60, approximately 0.50196.
Multiply the channels by 255 and round to whole numbers: red becomes 255, green 128, and blue 0. You are back at rgb(255 128 0). This is one sector of the color wheel, so use a converter or the full W3C algorithm for other hues rather than applying this shortcut to every color.
For a practical conversion from HSL into RGB, enter the HSL values in a color picker that supports both notations, then read its RGB output. When converting HSL to RGB, keep the original HSL values for comparison. The MDN CSS color guide includes a syntax converter. Enter the original values first, copy the output, and compare the two swatches before using the result. You can also enter the RGB channels and obtain their HSL equivalent in the same picker.
Use HSL to develop a palette
Once you have moved a color from RGB into HSL, adjust one component at a time. Shift hue to explore a neighboring color while keeping the other settings fixed. Reduce saturation for a quieter supporting color. Raise or lower lightness to explore lighter and darker variants.
These controls make relationships easier to describe, but they do not guarantee usable contrast. View text against its actual background and check contrast for its intended size. A palette can contain colors with identical numerical lightness that appear uneven to the eye.
Keep enough precision while working. If you round the orange’s hue to 30 degrees, the ideal green channel becomes 127.5; the conversion back to whole RGB channels depends on rounding. A small channel difference may be invisible, but repeated conversions can accumulate changes. Preserve the original values when an exact match matters. Moving an RGB color into HSL for adjustment and returning it to RGB is easier to audit when both sets of values are recorded.
For a reliable transfer, record the source profile and values, convert between the two notations, and retain extra decimal places until the final output. Check the returned RGB values and compare the color in its intended context before committing it to the palette.
