Hue, saturation, and lightness, converted to hex and RGB
hsl(210, 80%, 50%) converts to hex #1980e6, equivalently rgb(25, 128, 230) -- a vivid blue, since 210 degrees on the hue wheel sits in the blue range, with a high 80% saturation making it vivid rather than muted.
HSL is often more intuitive to work with directly than hex or RGB for design decisions, since each of its three values maps to a distinct, easily-understood visual property: hue (which color family, 0-360 degrees around the color wheel), saturation (how vivid versus gray, 0-100%), and lightness (how light versus dark, 0-100%) -- adjusting just the lightness value, for example, lets you predictably lighten or darken a color while keeping its hue and vividness constant.
This same hue value (210) at a lower saturation or different lightness would still register as 'blue' but look meaningfully different -- HSL cleanly separates 'what color' (hue) from 'how vivid' and 'how light' (saturation and lightness), which is exactly why it's often the preferred format for building a color picker UI.
Why this conversion can differ slightly from a browser's own hsl()
sRGB hex rounding. CSS hsl() and this converter can differ by a digit. Converting HSL to hex involves floating-point math and a final rounding step to whole-number RGB values -- different implementations (this converter versus a browser's native CSS hsl() rendering) can round at slightly different points in the calculation, occasionally producing a result that differs by 1 in a single RGB channel, which is visually imperceptible but worth knowing about if you're comparing exact hex values across tools.
This produces a hex/RGB pair without an alpha channel in the base output -- for a color with transparency (HSLA), the alpha value passes through separately without affecting the underlying hex/RGB conversion itself, since alpha is independent of the hue/saturation/lightness values.
All three values (hue, saturation, lightness) need to be within their valid ranges (hue 0-360, saturation and lightness 0-100%) for a meaningful conversion -- values outside those ranges don't correspond to a real, definable color.
Related color-format conversion tools
For converting from a hex color to rgba format instead of starting from HSL, the Hex to RGB/RGBA Converter handles that different starting point.
For a print-oriented color model instead, the CMYK to RGB/HEX Converter is the related tool for that different use case.
Frequently Asked Questions (FAQ)
How does hsl(210, 80%, 50%) convert to hex #1980e6?
The HSL-to-RGB conversion algorithm computes each RGB channel from the hue, saturation, and lightness values through a standard formula, then converts the resulting decimal RGB values (25, 128, 230) to hex, giving #1980e6.
Why is HSL sometimes easier to work with than hex or RGB directly?
Because each HSL value maps to a distinct, intuitive visual property -- hue (which color), saturation (how vivid), and lightness (how light or dark) -- letting you adjust just one property (like making a color darker) predictably, without needing to recalculate all three RGB channels by hand.
Why might this converter's hex output differ slightly from a browser's native hsl() rendering?
sRGB hex rounding. CSS hsl() and this converter can differ by a digit. Different implementations can round the floating-point HSL-to-RGB math at slightly different points, occasionally producing a result that differs by 1 in a single RGB channel -- visually imperceptible, but worth knowing if you're comparing exact hex values across tools.
Does the alpha value in HSLA affect the underlying hex/RGB conversion?
No. Alpha is independent of hue, saturation, and lightness -- it passes through as a separate transparency value without changing the base hex/RGB color that's calculated from the H, S, and L values alone.
What are the valid ranges for hue, saturation, and lightness?
Hue ranges from 0 to 360 degrees (representing a full trip around the color wheel), while saturation and lightness both range from 0% to 100%. Values outside those ranges don't correspond to a definable color.
