DevTilt

RGB to HSL Converter

Translate RGB into CSS hsl() notation. Hue is an integer 0–360; saturation and lightness use one decimal place.

Result

Enter RGB values to get hsl() output.

How to convert RGB to HSL

  1. Paste rgb() or three comma-separated channel integers.
  2. hsl() output updates as you type.
  3. Copy the hsl() string.
  4. Use HSL to RGB when you need channels again.

What is RGB to HSL Converter?

HSL separates hue, saturation, and lightness — making it far easier to create color variations than manipulating raw RGB channels. Convert RGB values to HSL when you need to programmatically lighten a brand color or shift hue for a theme variant.

Why use DevTilt's RGB to HSL Converter?

  • Converts R, G, B integers to H, S, L values
  • HSL output as hsl() CSS function
  • Live color preview with both RGB and HSL readouts
  • Handles edge cases at saturation and lightness extremes

Common use cases

  • Creating lighter/darker shades of a brand color in CSS
  • Building a programmatic color theme from base RGB tokens
  • Converting screenshot RGB values for HSL-based animation
  • Translating design system RGB specs to HSL for CSS custom properties

FAQ

Hue rounds to the nearest degree. Saturation and lightness round to one decimal place (e.g. 50.3%).
Yes. Both rgb(51, 102, 153) and 51, 102, 153 are accepted.
After the page loads, conversion works without a network connection.
Neutral grays have no chroma, so hue collapses to 0° by convention. Saturation near 0% also indicates a gray regardless of hue number.
Use the HSL to RGB converter route, or edit the same values in the Color Picker which keeps HEX, RGB, and HSL in sync.