Color to HSL

What is an HSL color?

An HSL color describes a color using three properties that map closely to how humans perceive color: hue, saturation and lightness. Hue is an angle from 0° to 360° that positions the color on the color wheel — 0° is red, 120° is green, 240° is blue. Saturation is a percentage from 0% (completely gray) to 100% (fully vivid). Lightness is also a percentage, where 0% is black, 50% is the pure hue, and 100% is white. For example, hsl(199, 88%, 48%) is a saturated sky blue.

HSL was formalised in the CSS Color Module Level 3 and is widely supported in modern browsers via the hsl() and hsla() functions. Because its three channels correspond to perceptual qualities, HSL is the format of choice for building color schemes, generating tints and shades, and exposing color controls to non-designers.

When to use HSL colors

HSL shines whenever you need to reason about a color in human terms rather than as raw light intensities. Common scenarios include:

• Building palettes. Keeping the hue constant and varying saturation or lightness produces harmonious monochrome palettes.
• Creating tints and shades. Raising lightness gives a tint, lowering it gives a shade — far more intuitive than tweaking three RGB channels.
• Theming and dark mode. Swapping a single lightness value can switch a brand color from light to dark mode while preserving its hue.
• Color pickers in UIs. Most visual color pickers expose HSL sliders because designers think in hue/saturation/lightness.
• CSS variables. Storing --brand: 199 88% 48% lets you reuse the same hue with different lightness modifiers.
• Accessibility adjustments. Lowering saturation or shifting lightness can rescue a color pair that fails WCAG contrast checks.

HSL is less suitable when you need pixel-exact channel values (use RGB) or a compact code to share (use HEX).

HSL vs RGB vs HEX

HSL, RGB and HEX all describe the same sRGB color. RGB and HEX encode the red, green and blue channels directly — they are mathematically equivalent, just in decimal versus hexadecimal. HSL is a transformation of RGB that re-expresses the color as hue, saturation and lightness. Converting between them is lossless within the sRGB gamut.

The key difference is cognitive: changing one channel in RGB/HEX usually shifts all three perceptual properties at once, whereas changing one HSL channel produces a predictable visual change. This makes HSL the preferred format for design systems, color theory tutorials and procedural color generation.

Common HSL colors

The table below lists frequently used colors and their HSL equivalents.

Name	HSL	HEX
Black	hsl(0, 0%, 0%)	#000000
White	hsl(0, 0%, 100%)	#FFFFFF
Red	hsl(0, 100%, 50%)	#FF0000
Green	hsl(120, 100%, 50%)	#00FF00
Blue	hsl(240, 100%, 50%)	#0000FF
Sky Blue	hsl(199, 88%, 48%)	#0EA5E9
Yellow	hsl(60, 100%, 50%)	#FFFF00

Note that CSS also supports hsla(), which adds a fourth alpha value between 0 and 1 — for example, hsla(199, 88%, 48%, 0.5) for 50% opacity.

How to convert a color to HSL

Converting a color with this tool takes only a second and happens entirely inside your browser. No upload, no sign-up, and no installation are required. Follow these steps:

1. Pick a color. Use the color picker, or type a 6-digit HEX code (with or without #) into the HEX field.
2. See the result. The H, S and L values update in real time, along with the hsl() string and the preview swatch.
3. Copy the HSL. Click "Copy HSL" to copy the hsl(h, s%, l%) string, then paste it into your CSS, design tool or documentation.

Because every step runs locally in your browser using JavaScript, your color choices are never uploaded to a server. This makes the conversion completely private and instant.