HEX to HSL
Convert HEX colors to HSL for modern CSS, instantly, in your browser.
Why use it
HEX to HSL: the bridge between design and modern CSS code
CSS-ready result
hsl() format compatible with all modern browsers and CSS Custom Properties variables.
Private
No servers, no logs. Conversion happens entirely in your browser.
Standard precision
Conversion algorithm following the W3C CSS Color Level 4 specification.
Instant
Real-time result as you type the HEX code.
How it works
Three steps, no hassle
Enter the HEX code
Type the hexadecimal color code: #RRGGBB or #RGB. You can also use CSS color names like 'coral', 'teal', or 'goldenrod'. The converter automatically detects the format.
Get the HSL values
The converter calculates the hue (H) in degrees (0-360°), saturation (S) as a percentage (0-100%), and lightness (L) as a percentage (0-100%), following the standard CSS algorithm.
Use the result in CSS
Copy the result in hsl(11, 100%, 60%) format or as CSS variables: --color: hsl(11deg 100% 60%). Ready to paste directly into your stylesheet or design token.
FAQ
Got questions?
HSL (Hue, Saturation, Lightness) is a color model that describes colors in more intuitive human terms than RGB. Hue (H) is the angle on the color wheel (0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta, 360° = red). Saturation (S) controls the intensity of the color: 0% is pure gray, 100% is the most vivid possible color. Lightness (L) controls brightness: 0% is black, 50% is the pure color, 100% is white.
HSL and HSV (also called HSB — Hue, Saturation, Brightness) are two distinct ways of reorganizing the RGB color space into cylindrical coordinates. The key difference is in the lightness axis: in HSL, L=50% is the purest most saturated color; in HSV, V=100% is the pure color. This means in HSV, to get white you need V=100% and S=0%, while in HSL it is L=100% regardless of S. Photoshop and most design tools use HSB/HSV; CSS uses HSL. The color converter calculates both models to facilitate work across tools.
HSL is preferred in CSS because it enables very intuitive color adjustments with CSS variables. To darken a color without changing its hue: hsl(var(--hue), var(--sat), calc(var(--light) - 10%)). To create a light/dark theme: simply change L from 30% to 70%. For a hover state: increase S by 10%. By contrast, doing the same in RGB requires recalculating new R, G, B values for each adjustment. CSS Custom Properties and the calc() function make HSL the ideal model for dynamic design systems and theming.
In HSL, lightness (L) directly controls color brightness without affecting hue or saturation. To darken: reduce L (e.g., from 60% to 40%). To lighten: increase L (e.g., from 40% to 70%). To create a color shadow, keep H and S fixed and only vary L. Practical CSS example: :root { --btn-hsl: 220, 90%, 50%; } .btn { background: hsl(var(--btn-hsl)); } .btn:hover { background: hsl(220, 90%, 40%); } .btn:active { background: hsl(220, 90%, 30%); }. This is impossible to do as cleanly with direct RGB or HEX values.
Complementary colors are those that oppose each other on the color wheel, separated by 180°. In HSL this is trivial to calculate: the complement of hsl(30, 80%, 50%) is hsl(210, 80%, 50%) (simply add 180 to the hue, modulo 360). Harmonic color schemes are also straightforward: triadic (H, H+120°, H+240°), square (H, H+90°, H+180°, H+270°), analogous (H-30°, H, H+30°). This property makes HSL the model of choice for color palette generators, color system design tools, and any application needing automatic chromatic harmony.
HSL: history of the color model and its adoption in CSS
The HSL (Hue, Saturation, Lightness) color model was proposed by Joblove and Greenberg in 1978 in their paper 'Color spaces for computer graphics' published in the SIGGRAPH proceedings. Its purpose was to create a more human-intuitive color space than the RGB model, which required thinking in primary light mixtures rather than perceptual color properties. The sibling model HSV (Hue, Saturation, Value) was proposed simultaneously by Alvy Ray Smith, also in 1978. Both models represent the RGB color space as a cylinder in polar coordinates: the vertical axis is lightness or value, the radius is saturation, and the angle is hue.
The color wheel and hue angles in HSL have a history that predates computers by far. The traditional artist's color wheel (based on pigments) has red, blue, and yellow as primaries, with their complementaries in opposition. The light color wheel (RGB) has a different arrangement: red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, magenta at 300°. The Munsell system (1905), precursor of modern systems, organized colors in a solid with 10 primary hues and 10 steps of value and chroma, and was adopted by the USDA to classify soil colors (Soil Survey Manual, 1975), making it the reference standard for soil science.
CSS adopted HSL in CSS Color Level 3 (W3C recommendation, 2011) with the hsl() function. Before CSS3, web developers could only use HEX and rgb() to specify colors, making it very difficult to create systematic color variations. CSS Custom Properties (CSS variables, Level 4, universal support since 2017) greatly amplified the utility of HSL: defining --primary-hue: 220; --primary-sat: 90%; and building an entire palette with hsl(var(--primary-hue), var(--primary-sat), L%) allows changing the entire palette by modifying just two variables. Frameworks like Tailwind CSS (since v3) and design systems like Material Design 3 (Google, 2021) use HSL or its variants to define their color token systems.