HSL to RGB Color Converter

Color Picker

hsl(120, 100%, 50%)

Color Shades

Color Combinations

About HSL and RGB Colors

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

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 green is (120°, 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 (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 green is (0, 255, 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 to RGB Conversion Process

  1. Normalize HSL values: H (0-360), S (0-1), L (0-1)
  2. Calculate temporary values based on lightness:
    • If L < 0.5: temp2 = L × (1 + S)
    • If L ≥ 0.5: temp2 = (L + S) - (L × S)
  3. Calculate temp1 = 2 × L - temp2
  4. Convert hue to range 0-1 (H' = H/360)
  5. Calculate RGB components:
    • Red: Convert H' + 1/3
    • Green: Use H' directly
    • Blue: Convert H' - 1/3
  6. Adjust each component if it falls outside 0-1 range
  7. Convert all components to 0-255 range and round

Example #1

Convert pure green HSL (120°, 100%, 50%) to RGB:

H = 120°, S = 100%, L = 50%

L = 0.5, S = 1

temp2 = (0.5 + 1) - (0.5 × 1) = 1

temp1 = 2 × 0.5 - 1 = 0

H' = 120/360 ≈ 0.333

R = convert(0.333 + 0.333) = 0

G = convert(0.333) = 1

B = convert(0.333 - 0.333) = 0

RGB = (0, 255, 0)

Example #2

Convert dark blue HSL (240°, 100%, 25%) to RGB:

H = 240°, S = 100%, L = 25%

L = 0.25, S = 1

temp2 = 0.25 × (1 + 1) = 0.5

temp1 = 2 × 0.25 - 0.5 = 0

H' = 240/360 ≈ 0.666

R = convert(0.666 + 0.333) = 0

G = convert(0.666) = 0

B = convert(0.666 - 0.333) ≈ 0.5

RGB ≈ (0, 0, 128)

Common HSL to RGB Examples

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

RGB is the fundamental color model for digital displays and web design. When converting from HSL to RGB, you're translating from a human-friendly color representation to the actual values that screens use to display colors. This conversion is essential for implementing colors in CSS, graphics programming, and any digital design work.

HSL to RGB FAQ

Why convert HSL to RGB?

While HSL is more intuitive for humans to work with, digital displays and web browsers ultimately use RGB values to display colors. Converting to RGB ensures your colors will display correctly across all devices and browsers. RGB is also the native format for most image files and graphics processing.

Are all HSL colors perfectly convertible to RGB?

Yes, all HSL colors within the standard gamut can be perfectly converted to RGB 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 HSL instead of RGB?

Use HSL when you need to programmatically generate color variations, create color schemes, or when you want to give users intuitive controls to adjust colors (like in a color picker). Use RGB when you need precise control over the color values for display or when working with graphics APIs.

Can I use both HSL and RGB in CSS?

Yes! Modern CSS supports both formats. You can use HSL for its readability and ease of manipulation, and RGB when you need precise color values. Many developers find it helpful to define color variables in HSL while using RGB for specific implementations.