Color & Design Tool
Back to All Tools

RGB to HSL & HSV Color Converter

Convert RGB/RGBA decimal color values to HSL (Hue, Saturation, Lightness) and HSV color spaces with interactive angle sliders and CSS output.

Presets:

RGB Sliders

Red Channel99
Green Channel102
Blue Channel241
rgb(99, 102, 241) • hsl(239°, 84%, 67%)

HSL Values & Angles

Hue (H)
239°
Color Angle
Saturation (S)
84%
Purity
Lightness (L)
67%
Brightness
CSS hsl()
hsl(239, 84%, 67%)
CSS Modern Syntax
hsl(239deg 84% 67%)
HEX Code
#6366F1
HSL Object
{ h: 239, s: 84, l: 67 }

How to Use the RGB to HSL & HSV Color Converter

  1. 1Enter Red, Green, and Blue values between 0 and 255.
  2. 2Adjust Hue (0-360°), Saturation (0-100%), and Lightness (0-100%) dynamically.
  3. 3Copy formatted hsl(h, s%, l%) and hsla() CSS rules instantly.

Key Features & Capabilities

  • Dynamic RGB sliders with instant HSL angle wheel visualization
  • Provides HSL, HSLA, HSV, and HEX output simultaneously
  • Includes complementary, analogous, and triadic color scheme suggestions
  • Supports Tailwind color format and CSS custom property syntax

Frequently Asked Questions

What is the formula to convert RGB to HSL?

First normalize R, G, B to 0-1. Find max and min values. Lightness is (max + min)/2. If max == min, Hue and Saturation are 0 (gray). Otherwise Saturation is (max - min) / (1 - |2L - 1|), and Hue is calculated from which channel is maximum.

More Popular Tools

DPI / PPI CalculatorImage Resize & Dimension CalculatorUniversal Color Converter (HEX, RGB, HSL, HSV, CMYK)HEX to RGB & RGBA Color Converter