ONELESS / COLOR
RGB is useful for channel values, while HSL describes a color through hue, saturation and lightness. RGB to HSL puts the second view beside a large color preview. Enter the red, green and blue channels or paste a CSS function, then copy the equivalent HSL or HSLA.
Open RGB to HSL. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
The hue comes from the relationship between the red, green and blue channels. Saturation describes distance from gray in HSL, and lightness comes from the channel extremes. These values are not a print conversion or a perceptual color model.
Opacity is preserved instead of being blended into white. RGB and HSL functions include alpha below full opacity; HEX uses an extra byte. The checkerboard is only a preview aid. HEX rounds to 8-bit channels; RGB/HSL output keeps three decimal places and alpha up to four.
Malformed or out-of-range values show an error and disable copying. The tool does not silently clamp channel values or reinterpret a different input format. Use Color Converter when you want automatic format selection.
HOW TO USE IT
A WORKED EXAMPLE
rgb(51, 102, 153) converts to hsl(210, 50%, 40%). With half opacity, the result includes alpha rather than a white background. The preview is the exported 8-bit HEX appearance; small rounding differences are normal for fractional channels.
EVERYDAY USES
Read a set of existing RGB values in HSL before planning related interface colors. A relationship in HSL is a design starting point; text and backgrounds still need their own contrast check.
Compare the visible color with the source before copying. This conversion describes sRGB values; it does not apply an ICC profile or guarantee an identical appearance across displays.
LOCAL WORKSPACE
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
QUESTIONS, ANSWERED
No. They use different calculations. This converter produces CSS HSL lightness; the separate Color Picker uses an HSV field for visual selection.
Yes. Alpha is retained in RGBA/HSLA or an 8-digit HEX value when below 1. An 8-bit alpha byte and a decimal fraction can differ slightly through rounding.
This page is specific to its named input format. Use Color Converter for CSS named colors or a mixture of supported formats.
Check the format, number of channels, units and bounds. RGB values are 0–255 or 0–100%; HSL saturation/lightness are 0–100%; alpha is 0–1 or 0–100%. Contextual CSS expressions and wider color spaces are not supported.
It is hsl(240 100% 50%), the fully saturated blue position.
Equal red, green and blue values have no chromatic difference, so saturation is zero. Hue has no visible meaning for that gray.
No. Different hues at the same HSL lightness can have different luminance. Test each foreground/background pair in a contrast checker.
REFERENCES
ANOTHER SMALL STEP
Read the same color through hue, saturation and lightness.
Return to RGB to HSL ↑
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose Pink