HSL to Hex Converter

Convert HSL to Hex Color Code Online

Converting hsl to hex is essential for designers and developers who build color palettes using the intuitive HSL model but need hex codes for implementation in CSS, HTML, and other web technologies. Our free hsl to hex color converter instantly transforms any HSL value into its precise hexadecimal equivalent, making it easy to move from design exploration to production code without manual calculation.

Understanding HSL Color Values

HSL stands for Hue, Saturation, and Lightness, a color model designed to be more intuitive than RGB for human color perception. The hue component is an angle on the color wheel measured in degrees from 0 to 360, where 0 degrees is red, 120 degrees is green, and 240 degrees is blue. Saturation is a percentage from 0 to 100 that describes how vivid or muted the color appears, with 100 percent being the most vibrant and 0 percent producing a neutral gray.

Lightness is also expressed as a percentage from 0 to 100. At 0 percent lightness, any color becomes pure black regardless of hue or saturation. At 100 percent lightness, any color becomes pure white. The purest, most vivid expression of a hue occurs at 50 percent lightness with 100 percent saturation. This three-dimensional model makes HSL exceptionally powerful for creating systematic color variations, because you can adjust one property independently without affecting the others.

Designers favor HSL because it maps closely to how people naturally think about color. Asking for a "darker blue" translates directly to reducing the lightness value. Asking for a "more muted green" means lowering the saturation. This directness makes HSL the preferred model for building design tokens, theme systems, and accessible color palettes in modern web applications.

Understanding Hexadecimal Color Codes

Hexadecimal color codes are the standard notation for specifying colors in web development. A hex code begins with a hash symbol followed by six characters that encode the red, green, and blue components of a color using base-16 numbering. Each pair of characters represents one channel, with values ranging from 00 (no intensity) to FF (full intensity, equivalent to 255 in decimal).

For example, the hex code #E74C3C represents a vivid red with high red intensity (E7 = 231), moderate green (4C = 76), and moderate blue (3C = 60). Hex codes are universally supported across all browsers, email clients, and design tools, making them the most portable color format for web work. They are also compact, which is valuable in stylesheets and configuration files where brevity matters.

While hex codes are excellent for implementation, they are not intuitive for color manipulation. Looking at #E74C3C, it is not immediately obvious how to make it lighter or more muted without converting to a perceptual model first. This is why many designers work in HSL during the creative phase and then convert to hex for the final code. For converting hex values back to HSL when needed, our hex to HSL converter tool handles the reverse direction.

How the Conversion Works

The conversion from hsl to hex color involves two mathematical stages. First, the HSL values are transformed into RGB values through a set of formulas that account for the cylindrical nature of the HSL model. Then, the resulting RGB decimal values are converted to their two-digit hexadecimal equivalents and concatenated into a standard hex code.

Understanding this process helps when working with related color conversions. If you need to convert HSL directly to RGB decimal values, our HSL to RGB color converter provides that functionality. You might also find it useful to explore the RGB to hex conversion tool for understanding the second stage of this process in isolation.

Conversion Formula

The HSL to hex conversion follows these mathematical steps:

Step 1: Normalize the HSL values. Express hue as a value from 0 to 360, and saturation and lightness as decimals from 0 to 1. For example, hsl(9, 100%, 64%) becomes H = 9, S = 1.0, L = 0.64.

Step 2: Calculate chroma. Chroma (C) represents the colorfulness and is computed as C = (1 - |2L - 1|) x S. For our example: C = (1 - |2 x 0.64 - 1|) x 1.0 = (1 - |0.28|) x 1.0 = 0.72.

Step 3: Calculate the intermediate value X. X = C x (1 - |H/60 mod 2 - 1|). With H = 9: H/60 = 0.15, so X = 0.72 x (1 - |0.15 mod 2 - 1|) = 0.72 x (1 - |0.15 - 1|) = 0.72 x (1 - 0.85) = 0.72 x 0.15 = 0.108.

Step 4: Determine initial RGB values. Based on which 60-degree sector of the color wheel the hue falls in, assign C, X, and 0 to the red, green, and blue channels. Since H is between 0 and 60, the assignment is R1 = C = 0.72, G1 = X = 0.108, B1 = 0.

Step 5: Add the lightness match. Calculate m = L - C/2 = 0.64 - 0.36 = 0.28. Then R = R1 + m = 1.0, G = G1 + m = 0.388, B = B1 + m = 0.28.

Step 6: Convert to hex. Multiply each channel by 255 and round: R = 255, G = 99, B = 71. Convert each to two-digit hex: FF, 63, 47. The result is #FF6347, which is the color known as tomato.

Practical Applications

Design System Implementation: Design systems often define colors using HSL because it makes creating consistent scales straightforward. A primary color at hsl(220, 70%, 50%) can generate an entire palette by varying lightness from 10 percent to 95 percent. When implementing these palettes in CSS or design tokens, each HSL value must be converted to hex for maximum compatibility across tools and platforms.

Theme Generation and Dark Mode: Building light and dark themes is significantly easier when colors are defined in HSL. To create a dark mode variant, you can systematically adjust lightness values. However, many CSS frameworks, component libraries, and legacy systems require hex codes. Converting HSL theme values to hex ensures compatibility while preserving the systematic approach to color that HSL enables.

Brand Color Documentation: Brand guidelines typically list colors in multiple formats for different use cases. Designers who develop brand palettes in HSL need to provide hex equivalents for web developers, email template builders, and third-party integrations. Accurate HSL to hex conversion ensures that the brand colors remain consistent across all digital touchpoints.

Programmatic Color Generation: Applications that generate colors algorithmically, such as data visualization tools, generative art programs, and color harmony calculators, often work internally with HSL because the math for color relationships is simpler. Complementary colors are 180 degrees apart, triadic colors are 120 degrees apart, and analogous colors are within 30 degrees. After computing these relationships in HSL, the results are converted to hex for rendering. For interactive color exploration, our visual color picker tool lets you experiment with these relationships directly.

HSL to Hex Reference Table

Color Name	HSL Value	Hex Code
Red	hsl(0, 100%, 50%)	#FF0000
Orange	hsl(30, 100%, 50%)	#FF8000
Yellow	hsl(60, 100%, 50%)	#FFFF00
Lime	hsl(120, 100%, 50%)	#00FF00
Cyan	hsl(180, 100%, 50%)	#00FFFF
Blue	hsl(240, 100%, 50%)	#0000FF
Magenta	hsl(300, 100%, 50%)	#FF00FF
Tomato	hsl(9, 100%, 64%)	#FF6347
Gold	hsl(51, 100%, 50%)	#FFD700
Teal	hsl(180, 100%, 25%)	#008080
Steel Blue	hsl(207, 44%, 49%)	#4682B4
Coral	hsl(16, 100%, 66%)	#FF7F50
Dark Violet	hsl(282, 100%, 41%)	#9400D3
Forest Green	hsl(120, 61%, 34%)	#228B22
Slate Gray	hsl(210, 13%, 50%)	#708090
Light Pink	hsl(351, 100%, 86%)	#FFB6C1
Dark Orange	hsl(33, 100%, 50%)	#FF8C00
Medium Purple	hsl(260, 60%, 65%)	#9370DB
White	hsl(0, 0%, 100%)	#FFFFFF
Black	hsl(0, 0%, 0%)	#000000

Frequently Asked Questions

Why would I convert HSL to hex instead of using HSL directly in CSS?

While modern CSS fully supports the hsl() function, there are several reasons to convert to hex. Many older email clients and legacy systems only support hex color codes. Design token systems and component libraries often standardize on hex for maximum compatibility. Additionally, some third-party tools, APIs, and configuration files require hex format. Converting HSL to hex ensures your colors work everywhere without compatibility concerns.

Does converting HSL to hex lose any color information?

In practice, there can be very minor rounding differences because HSL values are continuous while hex codes are discrete. Hex codes represent colors in 256 steps per channel, so an HSL value that falls between two hex steps will be rounded to the nearest one. However, this rounding is imperceptible to the human eye. For all practical purposes, the conversion is lossless and the colors will appear identical on screen.

How do I make a color lighter or darker in HSL before converting to hex?

To make a color lighter, increase the lightness value. To make it darker, decrease the lightness value. For example, starting with hsl(210, 70%, 50%) as a medium blue, changing it to hsl(210, 70%, 75%) produces a light blue, and hsl(210, 70%, 25%) produces a dark blue. The hue and saturation remain constant, ensuring the color stays recognizably the same blue. After adjusting, convert the new HSL value to hex for use in your code.

What happens when HSL saturation is set to zero?

When saturation is 0 percent, the hue value becomes irrelevant and the result is a shade of gray determined entirely by the lightness value. At hsl(0, 0%, 0%) you get black (#000000), at hsl(0, 0%, 50%) you get medium gray (#808080), and at hsl(0, 0%, 100%) you get white (#FFFFFF). Any hue value combined with zero saturation produces the same gray, so hsl(120, 0%, 50%) and hsl(240, 0%, 50%) both convert to #808080.

Can I convert HSL with alpha transparency to hex?

Yes, if your HSL value includes an alpha component such as hsla(210, 70%, 50%, 0.5), you can convert it to an eight-digit hex code. The first six digits represent the color as usual, and the last two digits represent the alpha channel. An alpha of 0.5 converts to hex 80, so the result would be something like #3676B380. Eight-digit hex codes are supported in modern browsers and CSS, though for maximum compatibility you may want to use the rgba() or hsla() CSS functions instead.

How do I find complementary colors using HSL?

Complementary colors are located directly opposite each other on the color wheel, which means they are exactly 180 degrees apart in hue. To find the complement of any HSL color, simply add 180 to the hue value (and subtract 360 if the result exceeds 360). For example, the complement of hsl(210, 70%, 50%) is hsl(30, 70%, 50%). You can then convert both HSL values to hex for use in your designs. This technique is fundamental to color theory and produces high-contrast, visually striking color pairs.

What is the difference between HSL and HSLA?

HSL defines a color using three components: hue, saturation, and lightness. HSLA adds a fourth component, alpha, which controls the opacity or transparency of the color. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). In modern CSS Color Level 4 syntax, the separate hsla() function is no longer necessary because hsl() now accepts an optional alpha parameter using a forward slash separator, such as hsl(210 70% 50% / 0.5). Both syntaxes produce identical results in current browsers.

Is HSL better than RGB for choosing colors?

HSL is generally considered more intuitive for human color selection because its three dimensions correspond to how people naturally describe colors. Saying a color should be "a warm red that is fairly bright and highly saturated" maps directly to HSL parameters: hue around 0 to 15 degrees, high lightness, and high saturation. In RGB, achieving the same adjustment requires changing multiple channel values simultaneously in ways that are not intuitive. However, RGB is closer to how screens physically produce color, so it remains important for technical color work and image processing.