About

HSL notation expresses color as H (hue in degrees 0 - 360), S (saturation 0 - 100%), and L (lightness 0 - 100%). Browsers render both HSL and RGB identically, but many design systems, linters, and legacy toolchains require RGB values. Manual conversion introduces rounding errors and transcription mistakes that silently shift brand colors. This tool implements the exact W3C CSS Color Level 4 algorithm, preserving the optional alpha channel A during conversion. It handles both legacy comma-separated syntax hsl(120, 50%, 50%) and modern space-separated syntax hsl(120 50% 50% / 0.8).

The batch mode parses an entire CSS file, locates every hsl() and hsla() function call via pattern matching, converts each in place, and outputs a clean file ready for production. Note: the regex parser covers standard CSS syntax. Nested calc() expressions inside HSL arguments are not resolved. For those edge cases, a preprocessor step is needed first.

Formulas

The HSL to RGB conversion follows the W3C CSS Color Level 4 specification. Given inputs H ∈ [0, 360], S ∈ [0, 1], L ∈ [0, 1]:

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

X = C × (1 − |(H60 mod 2) − 1|)

m = L − C2

The intermediate RGB prime values (R′, G′, B′) are selected from a piecewise function based on the hue sector:

{

(C, X, 0) if 0° ≤ H < 60°(X, C, 0) if 60° ≤ H < 120°(0, C, X) if 120° ≤ H < 180°(0, X, C) if 180° ≤ H < 240°(X, 0, C) if 240° ≤ H < 300°(C, 0, X) if 300° ≤ H < 360°

Final RGB values: R = round((R′ + m) × 255), and likewise for G and B. The alpha channel A passes through unchanged from HSLA to RGBA.

Where C = chroma, X = second-largest component, m = lightness match value, H = hue angle in degrees, S = saturation (normalized 0 - 1), L = lightness (normalized 0 - 1).

Reference Data

HSL Input	RGB Output	Color Name	Hex	Use Case
hsl(0, 100%, 50%)	rgb(255, 0, 0)	Red	#FF0000	Error states, alerts
hsl(120, 100%, 50%)	rgb(0, 255, 0)	Lime	#00FF00	Success indicators
hsl(240, 100%, 50%)	rgb(0, 0, 255)	Blue	#0000FF	Links, primary actions
hsl(60, 100%, 50%)	rgb(255, 255, 0)	Yellow	#FFFF00	Warnings, highlights
hsl(180, 100%, 50%)	rgb(0, 255, 255)	Cyan	#00FFFF	Info panels
hsl(300, 100%, 50%)	rgb(255, 0, 255)	Magenta	#FF00FF	Accents, creative
hsl(0, 0%, 0%)	rgb(0, 0, 0)	Black	#000000	Text, borders
hsl(0, 0%, 100%)	rgb(255, 255, 255)	White	#FFFFFF	Backgrounds
hsl(0, 0%, 50%)	rgb(128, 128, 128)	Gray	#808080	Disabled states
hsl(30, 100%, 50%)	rgb(255, 128, 0)	Orange	#FF8000	CTAs, badges
hsl(210, 79%, 46%)	rgb(25, 118, 210)	Material Blue	#1976D2	Material Design primary
hsl(122, 39%, 49%)	rgb(76, 175, 80)	Material Green	#4CAF50	Material Design success
hsl(348, 100%, 61%)	rgb(255, 56, 96)	Airbnb Red	#FF3860	Brand identity
hsl(231, 48%, 48%)	rgb(64, 78, 181)	Indigo	#404EB5	Navigation bars
hsl(14, 100%, 57%)	rgb(255, 87, 34)	Deep Orange	#FF5722	Attention-grabbing
hsl(291, 64%, 42%)	rgb(156, 39, 176)	Purple	#9C27B0	Premium features
hsla(210, 79%, 46%, 0.5)	rgba(25, 118, 210, 0.5)	Semi-transparent Blue	#1976D280	Overlays
hsla(0, 100%, 50%, 0.3)	rgba(255, 0, 0, 0.3)	Light Red Overlay	#FF00004D	Error backgrounds
hsl(45, 100%, 51%)	rgb(255, 193, 7)	Amber	#FFC107	Star ratings
hsl(187, 100%, 42%)	rgb(0, 188, 212)	Teal Cyan	#00BCD4	Dashboard accents

Frequently Asked Questions

Hue is a circular value on the color wheel. This tool normalizes any input by computing H = ((H mod 360) + 360) mod 360, which correctly maps negative values like −30 to 330 and values like 420 to 60.

Yes. The regex replacement operates only on matched hsl() and hsla() function calls. All surrounding text, comments, whitespace, selectors, and other properties remain untouched. The output is character-identical to the input except for the converted color values.

The conversion produces floating-point intermediate values that must be rounded to integers for 0 - 255 RGB. This tool uses Math.round(), which rounds half-values up (banker's rounding is not used). Some tools use floor() or truncation. A difference of ±1 is within the precision limit of 8-bit color and is visually imperceptible.

Yes. The parser recognizes both the legacy syntax hsl(120, 50%, 50%) and the CSS Color Level 4 space-separated syntax hsl(120 50% 50%) and hsl(120 50% 50% / 0.8). The slash-separated alpha is correctly extracted and preserved in the RGBA output.

Per the CSS specification, saturation and lightness are clamped to the range [0, 100]. This tool enforces the same constraint. A value of 150% is treated as 100%. This prevents mathematically undefined chroma values.

Not always. The round-trip is lossy because RGB uses integers (0 - 255) while HSL uses continuous values. For example, hsl(217, 53%, 47%) converts to rgb(56, 115, 183), which back-converts to approximately hsl(217, 53.1%, 46.9%). The deviation is typically under 0.5%.