HEX to HSL Color Converter

The ultimate online tool to convert HEX color codes (#RRGGBB) to HSL (Hue, Saturation, Lightness) format. Ideal for web developers working with CSS, JavaScript, TypeScript, Tailwind CSS, and designers using Photoshop or other design applications.

Transform hexadecimal colors to HSL with precision for more intuitive color manipulation, responsive design, and dynamic color schemes. Perfect for frontend development, UX/UI design, and creating accessible web interfaces.

Open Full Tool in New Page

Embed This HEX to HSL Converter on Your Website

Easily integrate this professional HEX to HSL converter tool into your own website, blog, or web application. Simply copy the iframe code below and paste it into your HTML:

<iframe 
  src="https://rgbatohex.com/tools/hex-to-hsl-converter?embed=true" 
  width="100%" 
  height="500" 
  style="border:none;border-radius:12px;overflow:hidden;" 
  title="HEX to HSL Color Converter"
></iframe>

Custom Embed Options

Customize the initial HEX color value of the embedded tool using URL parameters for a seamless integration:

defaultColor: Initial HEX color value (e.g., FF0000 for red, 0000FF for blue)

For example, to set red (#FF0000) as the initial color:

<iframe 
  src="https://rgbatohex.com/tools/hex-to-hsl-converter?embed=true&defaultColor=FF0000" 
  width="100%" 
  height="500" 
  style="border:none;border-radius:12px;overflow:hidden;" 
  title="HEX to HSL Color Converter - Red"
></iframe>

Embed Example

Embedded in a CSS Tutorial

Working with Hue and Lightness in Modern CSS

Modern web design often requires fine control over colors, especially hue and lightness adjustments. Converting your HEX colors to HSL allows more intuitive adjustments:

HEX to HSL Converter (Example Embed)

Try converting your brand colors to HSL, then adjust the hue, saturation, and lightness values to create harmonious color schemes.

Complete HEX to HSL Color Conversion Guide

Standard HEX to HSL Conversions

Basic Colors

#FF0000 → hsl(0, 100%, 50%)
#00FF00 → hsl(120, 100%, 50%)
#0000FF → hsl(240, 100%, 50%)

Common Web Colors

#808080 → hsl(0, 0%, 50%)
#800080 → hsl(300, 100%, 25%)
#FFFF00 → hsl(60, 100%, 50%)

Understanding the HSL Color Model

HSL (Hue, Saturation, Lightness) is a cylindrical color model designed to align more intuitively with human perception of color. It represents a more accessible alternative to hexadecimal notation and RGB color models:

HSL Components Explained

Hue (H): Represents the color type on a 360-degree color wheel, where 0° and 360° are red, 120° is green, and 240° is blue. Intermediate angles represent color mixtures (e.g., 60° is yellow, 180° is cyan).
Saturation (S): Represents color intensity as a percentage from 0% (grayscale) to 100% (fully saturated). Higher saturation creates more vibrant colors, while lower saturation creates more muted tones.
Lightness (L): Represents brightness from 0% (black) to 100% (white). 50% lightness provides a "normal" color, while adjusting above or below creates tints or shades respectively.

Advantages of HSL over HEX

Human-readable: HSL values are more intuitive to understand (e.g., “50% lighter” makes more sense than changing hex values)
Simplified adjustments: Create variations by modifying just one parameter (e.g., darken by reducing lightness)
Easier color manipulation: Create color schemes by adjusting hue while keeping other values constant
Programmatic control: Ideal for dynamic color generation in JavaScript and TypeScript applications
Mathematical simplicity: Perform color calculations more easily than with hexadecimal values

HEX to HSL Conversion in Different Languages

JavaScript Implementation

This JavaScript function converts HEX colors to HSL format:

function hexToHsl(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');
  
  // Parse the hex values
  let r = parseInt(hex.substring(0, 2), 16) / 255;
  let g = parseInt(hex.substring(2, 4), 16) / 255;
  let b = parseInt(hex.substring(4, 6), 16) / 255;
  
  // Find min and max values to determine lightness
  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  
  if (max === min) {
    // Achromatic (gray)
    h = s = 0;
  } else {
    let d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    
    h /= 6;
  }
  
  // Convert to standard HSL ranges
  h = Math.round(h * 360);
  s = Math.round(s * 100);
  l = Math.round(l * 100);
  
  return `hsl(${h}, ${s}%, ${l}%)`;
}

// Example usage
const hslColor = hexToHsl('#3E82FC'); // Returns "hsl(217, 97%, 62%)"

This function handles the mathematical conversion from the hexadecimal representation to the HSL color space, following the standard color conversion algorithm.

CSS Implementation

Modern CSS supports HSL directly, allowing for more intuitive color manipulation:

:root {
  /* Define base colors using HSL */
  --primary-hue: 217;
  --primary-saturation: 97%;
  --primary-lightness: 62%;
  
  /* Create the primary color and variations */
  --primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-dark: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 20%));
  --primary-light: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 15%));
  
  /* Create a complementary color (opposite on the color wheel) */
  --complementary-color: hsl(calc(var(--primary-hue) + 180), var(--primary-saturation), var(--primary-lightness));
}

/* Using the HSL variables */
.button-primary {
  background-color: var(--primary-color); /* hsl(217, 97%, 62%) equivalent to #3E82FC */
  color: white;
}

.button-primary:hover {
  background-color: var(--primary-dark);
  transition: background-color 0.3s ease;
}

Using HSL in CSS variables provides powerful flexibility for creating dynamic themes and consistent color schemes.

TypeScript Implementation

A type-safe implementation for TypeScript applications:

interface HSLColor {
  h: number; // 0-360
  s: number; // 0-100
  l: number; // 0-100
}

function hexToHsl(hex: string): HSLColor {
  // Remove # if present
  hex = hex.replace(/^#/, '');
  
  // Parse the hex values
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;
  
  // Find min and max values
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h = 0;
  let s = 0;
  const l = (max + min) / 2;
  
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    
    h /= 6;
  }
  
  // Convert to standard HSL ranges
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

// Example usage
const blueHsl: HSLColor = hexToHsl('#3E82FC');
console.log(`HSL: ${blueHsl.h}, ${blueHsl.s}%, ${blueHsl.l}%`);

TypeScript's type safety ensures reliable color manipulations in larger applications, preventing common errors.

Tailwind CSS Integration

Customize Tailwind CSS using HSL values in your configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          // Equivalent to #3E82FC in HEX
          DEFAULT: 'hsl(217, 97%, 62%)',
          light: 'hsl(217, 97%, 77%)',
          dark: 'hsl(217, 97%, 47%)',
        },
        secondary: {
          DEFAULT: 'hsl(37, 97%, 62%)',  // Complementary color
          light: 'hsl(37, 97%, 77%)',
          dark: 'hsl(37, 97%, 47%)',
        },
      },
      // Use HSL for opacity-enabled colors
      backgroundColor: ({ theme }) => ({
        ...theme('colors'),
        'primary-50': 'hsla(217, 97%, 62%, 0.5)',
        'primary-20': 'hsla(217, 97%, 62%, 0.2)',
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

This approach allows for consistent brand colors throughout your Tailwind CSS project with easy color variations and accessibility considerations.

Advanced Applications of HSL Colors

Beyond basic styling, HSL offers powerful capabilities for modern web and app development:

Dynamic Theming

Create light/dark themes by manipulating lightness values:

:root {
  --primary-h: 217;
  --primary-s: 97%;
  --primary-l: 62%;
}

.dark-theme {
  --primary-l: 40%;
  --bg-l: 10%;
  --text-l: 90%;
}

.light-theme {
  --primary-l: 62%;
  --bg-l: 95%;
  --text-l: 20%;
}

Accessible Color Contrasts

Ensure WCAG compliance by adjusting lightness values:

function ensureAccessibleContrast(bgHsl, textHsl) {
  // If background is light (L > 50%)
  if (bgHsl.l > 50) {
    // Ensure text is dark enough
    return {
      ...textHsl,
      l: Math.min(textHsl.l, 45)
    };
  } else {
    // If background is dark, ensure text is light enough
    return {
      ...textHsl,
      l: Math.max(textHsl.l, 65)
    };
  }
}

Photoshop-Style Color Manipulation

Create UI controls similar to Photoshop's HSL sliders for intuitive color picking:

// React component example
function ColorPicker({ initialColor = '#3E82FC', onChange }) {
  // Convert initial HEX to HSL
  const [hsl, setHsl] = useState(hexToHsl(initialColor));
  
  // Update when sliders change
  const handleHueChange = (e) => {
    const newHsl = { ...hsl, h: parseInt(e.target.value) };
    setHsl(newHsl);
    onChange(hslToHex(newHsl)); // Convert back to HEX for output
  };
  
  // Similar handlers for saturation and lightness
  
  return (
    <div className="color-picker">
      <div className="color-preview" style={{backgroundColor: hslToCss(hsl)}}></div>
      
      <div className="slider-container">
        <label>Hue: {hsl.h}°</label>
        <input 
          type="range" 
          min="0" max="360" 
          value={hsl.h} 
          onChange={handleHueChange} 
        />
      </div>
      
      {/* Similar sliders for saturation and lightness */}
    </div>
  );
}

This implementation creates a color picker that behaves similarly to professional tools like Photoshop or Adobe's color pickers.

RGB to HSL Conversion

Sometimes you'll need to convert between RGB and HSL color models:

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  
  if (max === min) {
    h = s = 0; // achromatic
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    
    h /= 6;
  }
  
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

// Example: converting from RGB to HSL
const color = rgbToHsl(62, 130, 252); // From #3E82FC
console.log(`hsl(${color.h}, ${color.s}%, ${color.l}%)`); // "hsl(217, 97%, 62%)"

Why Use HEX to HSL Conversion?

Converting hexadecimal colors to HSL format offers numerous advantages for developers and designers:

More intuitive color adjustments for responsive designs
Easier creation of accessible color contrasts for WCAG compliance
Simplified implementation of dark mode and theming capabilities
More natural language for communicating color changes in team settings
Better programmatic color manipulation for JavaScript, TypeScript, and CSS
Integration with modern frameworks and libraries including Tailwind CSS
Streamlined workflows for web developers and UI/UX designers