HEX to HSL Converter
Convert HEX colors into HSL notation: hue, saturation, and lightness. HSL is useful for creating color variations, themes, hover states, and systematic palettes from a base HEX color.
Quick Try
Converts 3-digit and 6-digit HEX colors into CSS-ready hsl(h, s%, l%) syntax.
Accepts HEX values with or without #.
Calculates hue in degrees and saturation/lightness as percentages.
Handles grayscale colors by returning hue 0 and saturation 0%.
Helpful for creating tints, shades, and theme variants from a base color.
How to Use
Enter a HEX color such as #3498db
The converter parses RGB channels from the HEX value
HSL values are calculated and displayed
Copy the hsl() output into CSS or theme code
CSS Theming
- Create hover and active state variants
- Build light and dark theme palettes
- Adjust saturation or lightness while keeping hue stable
Design Systems
- Document perceptual color dimensions
- Generate token scales from a base HEX color
- Compare hues across brand palettes
| Original Text | Result |
|---|---|
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#808080 | hsl(0, 0%, 50.2%) |
Frontend
- CSS hsl() colors
- Theme generation
- Design token systems
- Dynamic color manipulation
HSL is often easier than RGB for creating related colors because lightness and saturation can be changed independently.
Hue wraps around 360 degrees. Red can be represented near 0 degrees or 360 degrees depending on the calculation.
Grayscale colors have no chroma, so their saturation is 0% and hue is conventionally reported as 0.
Use HSL for generated color systems where tints and shades need consistent hue.
Keep HEX as a compact storage format when dynamic manipulation is not needed.
Beware that HSL lightness is not the same as perceived brightness or accessibility contrast.
Frequently Asked Questions
Find answers to common questions about our tools and services.
Understanding HEX to HSL Converter
HSL stands for hue, saturation, and lightness — three properties that correspond more closely to how humans perceive and describe color than the red, green, and blue channels of RGB. Hue is an angle on the color wheel from 0 to 360 degrees, where 0 (and 360) is red, 120 is green, and 240 is blue. Saturation is a percentage indicating how vivid the color is, from 0% (gray) to 100% (fully saturated). Lightness is a percentage representing brightness, from 0% (black) through 50% (the pure color) to 100% (white). This three-dimensional structure makes HSL intuitive for color design: adjusting lightness makes a color darker or lighter without changing its identity, and adjusting saturation makes it more muted or more vivid without changing its hue.
Converting HEX to HSL is a two-stage process. The HEX string is first converted to normalized RGB values in the 0–1 range. From those normalized values, the minimum and maximum channel values are found. The lightness L is the average of the minimum and maximum. Saturation S is derived from the range between minimum and maximum divided by a denominator that accounts for the lightness: (max - min) / (1 - |2L - 1|). Hue H is determined by which channel is dominant (maximum) and how far the other channels are from it, producing an angle in the 0–360 range. For grayscale colors where all three channels are equal, chroma is zero, saturation is 0%, and hue is conventionally set to 0.
CSS has supported the hsl() color function since CSS3, and it has become increasingly popular as a tool for building maintainable color systems. A component library or design system that defines its color palette in HSL can easily generate tints (higher lightness), shades (lower lightness), and tone variations (lower saturation) by simple arithmetic on a single dimension rather than adjusting three independent RGB channels. Converting a base brand color from HEX to HSL gives a design system the canonical hue and saturation values from which a full color scale can be derived programmatically.
Dark and light theme systems benefit particularly from HSL. A button background defined as hsl(220, 80%, 55%) in light mode can be shifted to hsl(220, 70%, 35%) in dark mode by adjusting only the lightness value, keeping the same hue and approximately the same saturation. Without HSL, achieving the same result in RGB or HEX requires computing all three channels independently, which is neither intuitive nor mathematically straightforward. This converter gives developers the HSL values of their existing HEX-defined colors, enabling them to port those colors into an HSL-based theming system without visual redesign.
Accessibility tooling and contrast checking also benefit from HSL. While lightness in HSL is not identical to perceptual luminance (which follows the WCAG 2.x definition based on gamma-adjusted linear RGB), it is correlated enough to provide useful design intuition. Colors with very low or very high HSL lightness will generally have lower contrast against pure white or black respectively, and the HSL representation makes this immediately visible from the numbers. Designers working on WCAG-compliant color systems often use HSL as their working format for palette generation and then verify final contrast ratios using a luminance-aware contrast checker after conversion.