Convert RGB to HSL

Supply red, green, and blue channel values between 0 and 255. The converter returns hue on a 0–360 degree circle and saturation and lightness as percentages from 0 to 100. It rejects missing, nonnumeric, infinite, or out-of-range channels instead of silently clipping them, so mistakes remain visible and downstream color data stays trustworthy.

Enter the RGB channels correctly

Provide three numeric fields named red, green, and blue in their compact forms: r, g, and b. Every channel must be between 0 and 255, including both endpoints. Zero means that the channel contributes no intensity, while 255 means full intensity. Intermediate values may be integers or decimals, which is useful when another calculation produces interpolated colors. The converter deliberately does not clamp values. If a channel is negative, greater than 255, missing, not a number, or infinite, the request returns an input error. This strict behavior makes automated workflows safer because an invalid source value cannot quietly turn into a plausible but incorrect color. For a familiar first test, use r 255, g 0, and b 0; the result is red at zero degrees of hue, full saturation, and fifty percent lightness. When copying values from CSS, submit only the channel numbers rather than the rgb() wrapper, commas, or percentage symbols. Keeping input numeric also avoids ambiguity between the 0–255 RGB scale and percentage-based RGB notation used by some design systems.

Understand how the HSL result is calculated

The conversion first normalizes each RGB channel by dividing it by 255. It then finds the largest and smallest normalized channels. Their average becomes lightness, and their difference, called chroma, determines whether the color has saturation and a meaningful hue. When chroma is zero, the color is a shade of gray: saturation is zero and hue is reported as zero by convention because no position on the color wheel is visually distinguishable. For colorful values, saturation is chroma adjusted for the current lightness, while hue depends on which RGB channel is largest. Red, green, and blue occupy different sectors of the hue circle, and the relative channel differences select a position within that sector. The returned hue is expressed in degrees from zero up to, but not including, 360. Saturation and lightness are multiplied by 100 and expressed as percentages. Results are rounded to four decimal places to provide useful precision while keeping responses stable and readable. This is the standard RGB-to-HSL transformation; it reorganizes the same color information and does not apply color management, gamma correction, or profile conversion.

Use HSL in design and application workflows

HSL is often easier than RGB when people need to reason about variations. Hue identifies the broad color family, saturation controls how vivid or gray the color appears, and lightness moves it toward black or white. After converting a brand color, a developer can keep its hue steady while adjusting lightness for hover, pressed, or disabled states. A data pipeline can normalize mixed color records into a common HSL representation before sorting or grouping them. A quality check can also compare returned values with design tokens and reject malformed RGB channels early. Remember that equal numeric changes do not guarantee equal perceived visual changes; HSL is convenient for controls but is not a perceptually uniform color space. Also preserve the original RGB values if exact round trips matter, because rounded output can introduce a small difference when converted back. The operation is deterministic and local to the supplied numbers: it makes no network request, uses no random value, and depends on no clock or external color database. That makes identical inputs produce identical outputs across repeated calls, which is suitable for tests, build scripts, API integrations, and reproducible design-system tooling.