ndary"] e:I[59665,[],"OutletBoundary"] 11:I[74911,[],"AsyncMetadataOutlet"] 13:I[59665,[],"ViewportBoundary"] 15:I[26614,[],""] :HL["/_next/static/media/e4af272ccee01ff0-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/css/7eb21f6132870d14.css","style"] :HL["/_next/static/css/081a0afca5a9bd20.css","style"] b:T711,

Intuitive Color Picking with HSL

HSL (Hue, Saturation, Lightness) provides a more intuitive way to specify colors. It is defined as: hsl(hue, saturation, lightness).

Hue: A degree on the color wheel from 0 to 360 (0 is red, 120 is green, 240 is blue).
Saturation: A percentage value where 0% is a shade of gray and 100% is the full color.
Lightness: Also a percentage; 0% is black, 50% is normal, and 100% is white.

Controlling Saturation and Lightness

Saturation controls the intensity of a color. A saturation of 0% will always result in a shade of gray, regardless of the hue. Lightness controls how bright or dark the color is, with 100% always being white and 0% always being black.

100% Saturation

50% Saturation

0% Saturation

25% Lightness

50% Lightness

75% Lightness

Adding Transparency with HSLA

HSLA extends HSL with an alpha channel for opacity. The syntax is hsla(hue, sa

HTML HSL and HSLA Colors

Experiment by mixing the HSL values below:

Experiment by mixing the HSLA values below: