RGB to HSL Color Converter

Color Picker

rgb(255, 0, 0)

Color Shades

Color Combinations

About RGB and HSL Colors

RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness) are two fundamental color models used in digital design and web development.

RGB (Red, Green, Blue)

RGB is an additive color model where colors are created by combining red, green, and blue light. Each component has a value from 0 to 255, representing the intensity of that color. For example, pure red is (255, 0, 0) in RGB. This model is fundamental to digital displays as it matches how screens produce color by mixing red, green, and blue light at different intensities.

HSL (Hue, Saturation, Lightness)

HSL is a cylindrical color model that represents colors in a way that's intuitive for humans. Hue represents the color type (0-360° on the color wheel), Saturation is the intensity of the color (0-100%), and Lightness is the brightness (0-100%). For example, pure red is (0°, 100%, 50%) in HSL. This model is widely used in CSS and design tools because it allows easy adjustment of colors by modifying their hue, saturation, or lightness independently.

RGB to HSL Conversion Process

  1. Normalize RGB values: Divide each component by 255 to get values in range 0-1
  2. Find the maximum (max) and minimum (min) values among R, G, B
  3. Calculate lightness (L): L = (max + min) / 2
  4. Calculate saturation (S):
    • If max = min: S = 0 (achromatic)
    • Else:
      • If L ≤ 0.5: S = (max - min) / (max + min)
      • If L > 0.5: S = (max - min) / (2 - max - min)
  5. Calculate hue (H):
    • If max = min: H = 0 (undefined)
    • Else:
      • If max = R: H = (G - B) / (max - min)
      • If max = G: H = 2 + (B - R) / (max - min)
      • If max = B: H = 4 + (R - G) / (max - min)
    • Convert H to degrees: H = H × 60
    • If H < 0: H = H + 360
  6. Convert S and L to percentages (0-100%)
  7. Round all values to nearest integers

Example #1

Convert pure red RGB (255, 0, 0) to HSL:

R = 255/255 = 1, G = 0/255 = 0, B = 0/255 = 0

max = 1, min = 0

L = (1 + 0)/2 = 0.5

S = (1 - 0)/(2 - 1 - 0) = 1

H = (0 - 0)/(1 - 0) = 0 (since max = R)

H = 0 × 60 = 0°

HSL = (0°, 100%, 50%)

Example #2

Convert dark blue RGB (0, 0, 128) to HSL:

R = 0/255 = 0, G = 0/255 = 0, B = 128/255 ≈ 0.502

max ≈ 0.502, min = 0

L ≈ (0.502 + 0)/2 ≈ 0.251

S ≈ (0.502 - 0)/(0.502 + 0) ≈ 1 (since L ≤ 0.5)

H = 4 + (0 - 0)/(0.502 - 0) = 4 (since max = B)

H = 4 × 60 = 240°

HSL ≈ (240°, 100%, 25%)

Common RGB to HSL Examples

  • rgb(255, 255, 255) → hsl(0, 0%, 100%) (white)
  • rgb(0, 0, 0) → hsl(0, 0%, 0%) (black)
  • rgb(255, 0, 0) → hsl(0, 100%, 50%) (red)
  • rgb(0, 255, 0) → hsl(120, 100%, 50%) (green)
  • rgb(0, 0, 255) → hsl(240, 100%, 50%) (blue)
  • rgb(255, 255, 0) → hsl(60, 100%, 50%) (yellow)
  • rgb(0, 255, 255) → hsl(180, 100%, 50%) (cyan)
  • rgb(255, 0, 255) → hsl(300, 100%, 50%) (magenta)
  • rgb(128, 128, 128) → hsl(0, 0%, 50%) (gray)

HSL is a human-friendly color representation that makes it easy to create color variations. When converting from RGB to HSL, you're translating from the values that screens use to display colors to a format that's easier for humans to understand and manipulate. This conversion is essential for color theory, creating color schemes, and any design work where you need to systematically adjust colors.

RGB to HSL FAQ

Why convert RGB to HSL?

While RGB is how displays show colors, HSL is much more intuitive for humans to work with. Converting to HSL makes it easier to create color variations (like making a color lighter or more saturated) and to create harmonious color schemes. HSL is particularly useful in design tools and CSS where you want to programmatically adjust colors.

Are all RGB colors perfectly convertible to HSL?

Yes, all RGB colors within the standard gamut can be perfectly converted to HSL because both are based on the same color space. The conversion is mathematically precise and reversible without loss of color information.

When should I use RGB instead of HSL?

Use RGB when you need precise control over the color values for display or when working with graphics APIs that expect RGB values. RGB is also better when working with existing color systems or when exact color matching is required.

Can I use both RGB and HSL in CSS?

Yes! Modern CSS supports both formats. Many developers find it helpful to define color variables in HSL while using RGB for specific implementations. HSL is particularly useful for creating color variations with CSS variables and the calc() function.

Which color model is better for accessibility?

HSL is often better for accessibility work because you can easily adjust lightness to meet contrast requirements while maintaining the same hue. This makes it simpler to create accessible color palettes that maintain brand identity.