HSL to HEX Color Converter

Color Picker

hsl(120, 100%, 50%)

Color Shades

Color Combinations

About HSL and HEX Colors

HSL (Hue, Saturation, Lightness) and HEX (Hexadecimal) are two popular color models used in web design and development.

HSL (Hue, Saturation, Lightness)

HSL is a cylindrical color model that represents colors in a way that's intuitive for humans. Hue represents the color type (0-360° on the color wheel), Saturation is the intensity of the color (0-100%), and Lightness is the brightness (0-100%). For example, pure green is (120°, 100%, 50%) in HSL. This model is widely used in CSS and design tools because it allows easy adjustment of colors by modifying their hue, saturation, or lightness independently.

HEX (Hexadecimal)

HEX codes are a compact way to represent RGB colors using a six-digit hexadecimal (base-16) notation, prefixed with #. Each pair of digits corresponds to the red, green, and blue components, with values from 00 to FF (equivalent to 0-255 in decimal). For example, #00FF00 is pure green. HEX is the standard color format for web design because of its compatibility with HTML/CSS and compact representation.

HSL to HEX Conversion Process

  1. Convert HSL to RGB values (each component 0-255)
  2. Convert each RGB component to its two-digit hexadecimal representation
  3. Combine the three hexadecimal values and prefix with #

Example #1

Convert pure green HSL (120°, 100%, 50%) to HEX:

HSL = (120°, 100%, 50%)

RGB = (0, 255, 0)

R = 0 → 00, G = 255 → FF, B = 0 → 00

HEX = #00FF00

Example #2

Convert dark blue HSL (240°, 100%, 25%) to HEX:

HSL = (240°, 100%, 25%)

RGB ≈ (0, 0, 128)

R = 0 → 00, G = 0 → 00, B = 128 → 80

HEX = #000080

Common HSL to HEX Examples

  • hsl(0, 0%, 100%) → #FFFFFF (white)
  • hsl(0, 0%, 0%) → #000000 (black)
  • hsl(0, 100%, 50%) → #FF0000 (red)
  • hsl(120, 100%, 50%) → #00FF00 (green)
  • hsl(240, 100%, 50%) → #0000FF (blue)
  • hsl(60, 100%, 50%) → #FFFF00 (yellow)
  • hsl(180, 100%, 50%) → #00FFFF (cyan)
  • hsl(300, 100%, 50%) → #FF00FF (magenta)
  • hsl(0, 0%, 50%) → #808080 (gray)

HEX is the most common color format in web design because it's compact and supported by all browsers. When converting from HSL to HEX, you can be confident that the color will display consistently across all modern web browsers and devices.

HSL to HEX FAQ

Why use HEX instead of HSL in web design?

While HSL is more intuitive for humans to understand, HEX is more compact and universally supported in HTML and CSS. HEX codes are shorter to write and easier to copy/paste between design tools and code editors. However, modern CSS also supports HSL directly, so you can use whichever format you prefer.

Are all HSL colors perfectly convertible to HEX?

Yes, all HSL colors can be perfectly converted to HEX because both are based on the RGB color model. The conversion is lossless and reversible, meaning you can convert back and forth without losing any color information.

When should I use HSL instead of HEX?

HSL is particularly useful when you need to programmatically generate color variations, create color schemes, or when you want to give users intuitive controls to adjust colors (like in a color picker). It's also great for CSS when you need to create systematic color variations by adjusting lightness or saturation.

Can I use both HSL and HEX in the same project?

Absolutely! Modern CSS supports both formats, so you can use HEX for static colors and HSL when you need to calculate color variations. Many developers find it helpful to define color variables in HSL for easier manipulation while using HEX for specific color values.