Convert RGB to HSL
Convert CSS rgb(...) colors into HSL like hsl(188, 86%, 53%)—fast, private, and right in your browser.
- Paste a single RGB color or a whole palette
- Use one color per line for batch conversion
- Copy your HSL results instantly
Quick start
- Paste your RGB color(s) into the input.
- Use one color per line.
- Copy the HSL results.
Single color
Input:
rgb(34, 211, 238)Output:
hsl(188, 86%, 53%)Palette / batch conversion
Input:
rgb(255, 0, 85)
rgb(34, 211, 238)
rgb(17, 24, 39)Output:
hsl(340, 100%, 50%)
hsl(188, 86%, 53%)
hsl(221, 39%, 11%)Small rounding differences are normal. Hue is typically rounded to whole degrees and percentages to whole numbers.
What RGB means
RGB stands for Red, Green, Blue—the three light channels used by screens.
- Each channel is an integer from 0 to 255.
rgb(0, 0, 0)is black.rgb(255, 255, 255)is white.
RGB maps directly to how pixels are stored and rendered, which is why you’ll see it in:
- CSS and browser APIs
- design tools that copy colors as
rgb(…) - canvas and image-processing code
What HSL means (Hue, Saturation, Lightness)
HSL describes a color with three values:
- Hue (H): the “color family” around the wheel (0–360°)
- 0° = red, 120° = green, 240° = blue
- Saturation (S): how vivid the color is (0% gray → 100% vivid)
- Lightness (L): how light/dark the color is (0% black → 100% white)
Why HSL is useful for UI and palettes:
- It’s easier to reason about edits: “same hue, lighter”
- You can build consistent scales by stepping Lightness
- You can mute or intensify a color by adjusting Saturation
How RGB → HSL conversion works
For each line you paste, the converter does:
- Read RGB channels
- Convert
rgb(r, g, b)into numeric channels (0–255)
- Convert
- Normalize to 0–1
- Work in fractions to do the math consistently
- Compute H, S, L
- Lightness comes from the max/min channel values
- Saturation depends on how far the color is from gray at that lightness
- Hue comes from the relationship between the dominant channels
- Format as CSS HSL
- Output
hsl(h, s%, l%)
- Output
Accuracy notes (so you can trust the output)
- Conversion assumes standard sRGB, which matches how typical CSS
rgb(...)colors are interpreted. - When a color is gray (all channels equal), Saturation becomes 0% and Hue has no visual effect.
- HSL is not perceptually uniform (equal numeric steps don’t always look equally different). It’s still very practical for theme rules and quick adjustments.
Common mistakes (and quick fixes)
Extra spaces
✅ rgb(255, 0, 85)
🚫 rgb(255, 0, 85)
Missing wrapper or punctuation
✅ rgb(17, 24, 39)
🚫 17, 24, 39
Values outside 0–255
✅ rgb(0, 128, 255)
🚫 rgb(300, -5, 260)
Practical uses
- Turn RGB exports into editable values for palette building
- Create hover/active states by nudging Lightness (and sometimes Saturation)
- Generate tints and shades while keeping Hue stable
- Document colors in a format that’s easier to discuss than raw channels
A common workflow is: sample colors as RGB → refine in HSL → ship tokens in HEX or CSS variables.
