MyCalcBuddy

HSL Color Converter

Convert HSL (Hue, Saturation, Lightness) colors to RGB and Hex formats

HSL Values

hsl(200, 70%, 53%)

Color Values

HSLhsl(200, 70%, 53%)
Hex#33A3DB
RGBrgb(51, 163, 219)
CMYKcmyk(77%, 26%, 0%, 14%)

Color Components

51

Red

163

Green

219

Blue

Lightness Variations

What is HSL?

HSL stands for Hue, Saturation, and Lightness — a color model that describes colors in terms more intuitive to humans than the RGB (Red, Green, Blue) system. While RGB specifies colors by mixing light intensities, HSL describes what the color looks like: its position on the color wheel, how vivid it is, and how bright or dark it appears.

Hue is the actual color, measured in degrees around a 360-degree color wheel. Red sits at 0°, green at 120°, blue at 240°, and the spectrum cycles back to red at 360°. Saturation controls the intensity or vividness of the color, ranging from 0% (completely gray) to 100% (fully vivid). Lightness determines how bright the color appears, from 0% (pure black) through 50% (the pure color) to 100% (pure white).

This converter transforms HSL values into RGB, hexadecimal, and CMYK color formats while displaying a live color preview. The slider controls make it easy to explore the color space and find the exact shade you need for web design, graphic arts, or digital content creation.

The HSL to RGB Conversion Formula

Converting from HSL to RGB involves several intermediate calculations. First, the chroma (color intensity) is calculated from saturation and lightness. Then, the hue position determines which RGB channels receive the maximum and minimum values. Finally, the lightness is used to shift all channels up or down equally.

The formula uses an intermediate value X, which represents how far the hue has progressed through each 60-degree segment of the color wheel. When the hue is in the first third of a segment, the red channel is maximum; in the middle third, green dominates; and in the final third, blue leads. The specific calculation varies depending on which 60-degree zone the hue falls in.

HSL to RGB Formula

C = (1 - |2L - 1|) × S

Where:

  • H= Hue value in degrees (0-360)
  • S= Saturation as a decimal (0-1)
  • L= Lightness as a decimal (0-1)
  • C= Chroma (color intensity)
  • X= Intermediate value based on hue position

How to Use This Calculator

This HSL converter provides interactive color manipulation with real-time results:

  1. Adjust the Hue slider: Move the hue slider from 0° to 360° to cycle through all colors on the color wheel. You can also type a specific value in the number input.
  2. Adjust the Saturation slider: Control how vivid the color is from 0% (gray) to 100% (fully saturated). The slider background dynamically shows the effect of changing saturation.
  3. Adjust the Lightness slider: Control brightness from 0% (black) to 100% (white), with 50% being the pure color. The slider shows a gradient from black through the current color to white.
  4. View the color preview: A large swatch displays the resulting color with the HSL value overlaid. The text color automatically adjusts for readability.
  5. Read all color formats: The results panel shows the color in HSL, Hex, RGB, and CMYK formats simultaneously. Individual R, G, B channel values are shown in their respective colors.
  6. Explore lightness variations: A strip shows the current color at different lightness levels, helping you find the right shade for your design.

Understanding the Results

The calculator provides the current color in four standard formats, each useful in different design and development contexts:

HSL: The input format, showing hue in degrees and saturation/lightness as percentages. HSL is preferred for design work because adjusting lightness or saturation produces intuitive, predictable changes to the color.

Hex: The six-digit hexadecimal notation used in CSS and web design. This format is compact and universally supported across all web browsers and design tools.

RGB: The additive color model used by screens and digital displays. Each channel value ranges from 0 to 255, representing the intensity of red, green, and blue light.

CMYK: The subtractive color model used in printing. The four channels (Cyan, Magenta, Yellow, Key/Black) represent ink percentages, making this format essential for preparing designs for print production.

Real-World Applications

Web design and CSS development benefit greatly from HSL because it allows designers to create color palettes by varying a single parameter. For example, keeping the same hue and saturation while adjusting lightness produces a cohesive set of shades from a single base color — perfect for button states, backgrounds, and text hierarchies.

Graphic design and brand identity use HSL for creating accessible color systems. By controlling lightness, designers can ensure sufficient contrast between text and background colors, meeting WCAG accessibility guidelines while maintaining brand consistency.

UI/UX design leverages HSL for generating hover states, active states, and disabled states from a single primary color. Dark mode themes can be created by reducing lightness values while keeping hues constant, ensuring visual consistency across light and dark interfaces.

Worked Examples

Basic Blue Conversion

Problem:

Convert HSL(200°, 70%, 53%) to RGB and Hex.

Solution Steps:

  1. 1Hue 200° is in the cyan-blue range of the color wheel
  2. 2Calculate chroma: C = (1 - |2×0.53 - 1|) × 0.70 = 0.70
  3. 3Apply the HSL-to-RGB algorithm for the 180°-240° hue range
  4. 4Result: RGB(33, 150, 243) = #2196F3

Result:

HSL(200°, 70%, 53%) = RGB(33, 150, 243) = #2196F3 (Material Blue)

Desaturated Color

Problem:

Convert HSL(0°, 0%, 50%) to RGB.

Solution Steps:

  1. 1Hue 0° (red position), but saturation is 0%
  2. 2With zero saturation, the color becomes gray regardless of hue
  3. 3Lightness 50% produces a medium gray

Result:

HSL(0°, 0%, 50%) = RGB(128, 128, 128) = #808080 (medium gray)

Dark Shade Conversion

Problem:

Convert HSL(120°, 100%, 25%) to RGB and Hex.

Solution Steps:

  1. 1Hue 120° = pure green, saturation 100% = fully vivid
  2. 2Lightness 25% makes it a dark shade
  3. 3Result: RGB(0, 128, 0) = #008000

Result:

HSL(120°, 100%, 25%) = RGB(0, 128, 0) = #008000 (dark green)

Tips & Best Practices

  • ✓Hue 0°=red, 120°=green, 240°=blue — the three primary additive colors
  • ✓50% lightness produces the purest version of any hue
  • ✓Use HSL to create color palettes by varying only saturation or lightness
  • ✓Lower lightness values create darker shades, higher values create lighter tints
  • ✓Low saturation produces muted, pastel-like colors; high saturation is vivid
  • ✓For accessible text, ensure at least 4.5:1 contrast ratio between text and background

Related Calculators

Hex to RGB Converter

Convert hex colors to RGB

RGB to Hex Converter

Convert RGB values to hex

CMYK Converter

Convert CMYK to other color formats

Color Name Converter

Convert named colors to hex and RGB

Frequently Asked Questions

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are similar but different color models. In HSL, lightness ranges from black through the pure color to white, while in HSV, value ranges from black through the pure color to full brightness. HSL is generally more intuitive for creating lighter and darker shades of a color.
HSL makes it easy to create harmonious color palettes by keeping hue constant while varying saturation and lightness. For example, you can generate a complete set of brand colors from a single hue by adjusting lightness from 20% (dark shade) to 80% (light tint), ensuring visual cohesion across all elements.
0% lightness always produces pure black regardless of hue or saturation, because there is no light in the color. 100% lightness always produces pure white for the same reason — maximum light washes out all color. The pure color appears at 50% lightness with maximum saturation.
To darken a color in HSL, decrease the lightness value while keeping hue and saturation constant. For example, changing lightness from 50% to 30% darkens the color. Alternatively, you can decrease saturation slightly to make the darker shade appear more muted and natural.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing. Unlike RGB which adds light to create colors, CMYK subtracts light by applying ink to paper. You need CMYK values when preparing designs for professional printing, as printers use this format for color matching and ink coverage calculations.

Sources & References

Last updated: 2026-06-06

💡

Help us improve!

How would you rate the HSL Color Converter?

<>

Editorial Note

MyCalcBuddy Editorial Team

This page is maintained as an educational calculator reference.

Source

Formula Source: NIST Guide to SI Units

by National Institute of Standards

UpdatedLast reviewed: May 2026
CheckedFormula checks are based on standard references and internal QA review.