What input formats are accepted?

Each line may be comma-separated (255, 128, 0), space-separated (255 128 0), or wrapped in an rgb() function. The tool extracts the first three numbers and ignores any extra punctuation.

How is HSL calculated?

Each channel is normalized to 0-1, then lightness is the average of the max and min channels. Saturation depends on whether lightness is above or below 0.5, and hue is derived from which channel is largest.

What happens to invalid lines?

Any line that does not contain three numbers in the 0-255 range is marked invalid and skipped. Valid lines are still converted, so one bad line will not stop the rest.

Are the HSL values rounded?

Yes. Hue is rounded to the nearest degree and saturation and lightness to the nearest whole percent, which matches what CSS hsl() expects.

Does the converter handle grayscale colors?

Yes. When all three channels are equal the color has no chroma, so saturation is reported as 0% and hue defaults to 0, which is the correct HSL representation of a gray.

Batch RGB to HSL Converter

Convert whole lists of RGB colors to HSL in one pass

This tool takes a list of RGB colors and converts every one to its HSL equivalent at the same time. Instead of feeding colors through a converter one at a time, you paste a column of values and get a matching column of hsl() strings you can drop straight into CSS, a design token file, or a spreadsheet.

How it works

HSL describes a color as Hue (the angle on the color wheel, 0-360°), Saturation (how vivid it is, 0-100%), and Lightness (how light or dark, 0-100%). To convert from RGB, each channel is first normalized to the range 0-1 by dividing by 255. Lightness is the midpoint of the largest and smallest normalized channels: L = (max + min) / 2. If max and min are equal the color is a neutral gray, so saturation and hue are both 0.

Otherwise, saturation is d / (2 - max - min) when lightness is above 0.5 and d / (max + min) when it is below, where d = max - min. Hue is found from whichever channel is the maximum, producing a value in degrees that is wrapped into the 0-360 range. The result is rounded to integers so it slots directly into a CSS hsl() declaration.

Tips and example

A line of 255, 128, 0 converts to hsl(30, 100%, 50%) — a fully saturated orange. Mixed formats in the same list are fine: you can have rgb(34, 34, 34) on one line and 0 200 100 on the next. Lines that do not parse to three numbers in 0-255 are flagged as invalid and skipped, so a stray header row or comment will not break the batch.

This is handy when migrating a palette: paste your existing RGB swatches, convert them all to HSL, and you can then nudge lightness or saturation consistently across the whole set.