RGB to HSL Converter

Convert RGB (Red, Green, Blue) color values to HSL (Hue, Saturation, Lightness) format instantly.

Visual Color Picker
#14b8a6
Color Conversions

Complementary Palette

Analogous Palette

Triadic Palette

Monochromatic Palette

135°

Drag & Drop Image or Click to Browse

Supported: JPEG, PNG, GIF, SVG, WebP (max 10 MB)

Extracted Details
Hover Pixel Color:
#ffffff
Selected Color:
—

Hover over the image to preview pixel colors. Click to select and load that color into the main converter fields (HEX, RGB, HSL, CMYK).

Sample Text Display
Contrast Ratio 4.5:1
Small Text (WCAG AA - 4.5:1) Pass
Large Text (WCAG AA - 3.0:1) Pass
Small Text (WCAG AAA - 7.0:1) Pass
Large Text (WCAG AAA - 4.5:1) Pass

What is the RGB to HSL Converter?

Convert RGB color values to HSL format online. Free, instant browser-based RGB to HSL color converter with visual picker and real-time results.

How to use the RGB to HSL Converter?

  1. Enter your RGB values (Red 0-255, Green 0-255, Blue 0-255) in the RGB input field.
  2. The tool will instantly calculate the matching HSL values (e.g. hsl(174, 80%, 40%)).
  3. Click 'Copy' to copy the formatted HSL CSS string to your clipboard.

Frequently Asked Questions

How does RGB to HSL conversion work?

First, RGB values are normalized to a 0-1 range. The Lightness is the average of the max and min channel values. Saturation depends on Lightness — if L < 0.5, S = (max-min)/(max+min), otherwise S = (max-min)/(2-max-min). Hue is calculated based on which RGB channel is dominant.

Why convert RGB to HSL?

HSL is more intuitive for color manipulation. Need a lighter version? Increase L. Need a muted tone? Decrease S. CSS natively supports hsl() values, making HSL ideal for creating dynamic theme systems and color scales.

What range do HSL values use?

Hue is measured in degrees from 0 to 360 (where 0/360 is red, 120 is green, 240 is blue). Saturation and Lightness are percentages from 0% to 100%.