RGB to HSL Converter
Type or paste a RGB color: With commas or spaces, rgba(), three bare numbers, a HEX code or a CSS color name.
hsl(0, 100%, 50%)RGB:
rgb(255, 0, 0)HSL:
hsl(0, 100%, 50%)CSS Usage:
background-color: hsl(0, 100%, 50%);color: hsl(0, 100%, 50%);border: 1px solid hsl(0, 100%, 50%);Popular Examples:
How to Convert RGB to HSL
RGB to HSL conversion transforms decimal RGB values into Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). For example, rgb(255, 0, 0) becomes hsl(0, 100%, 50%), and rgb(70, 130, 180) becomes hsl(207, 44%, 49%). HSL is much easier to work with in CSS — you can create lighter or darker variants of a color by simply adjusting the Lightness value. Values here are rounded to whole numbers, so converting them back can differ by a few steps per channel: rgb(30, 144, 255) gives hsl(210, 100%, 56%), and that turns back into rgb(31, 143, 255).
Why Use This Converter?
- Instant real-time conversion
- Free online tool - no registration required
- Live color preview
- CSS code examples
- One-click copy to clipboard