HEX to HSL Converter

Professional color conversion tool with real-time preview, WCAG accessibility testing, and advanced features. Convert HEX to HSL, generate color palettes, create gradients, and export in multiple formats.

PICK COLOR

ON BLACK 5.21:1 AA (Pass)

ON WHITE 4.03:1 Fail

CONVERSION RESULT

HEX #8B5CF6

HSL 258, 90%, 66%

ENTER HEX CODE

HUE 258°

SATURATION 90%

LIGHTNESS 66%

FORMATS

rgb(139, 92, 246)

hsl(258, 90%, 66%)

cmyk(43%, 63%, 0%, 4%)

Interior Design

Bedroom walls

Home office

Bathroom vanity

Pairs with:

Color Mixing

Blue 85%

White 15%

Start with ultramarine blue. Add tiny red for purple-blue, white for lighter shades.

Tints (Lighter)

Shades (Darker)

COMPLEMENTARY

TRIADIC

SPLIT COMPLEMENTARY

ANALOGOUS

PRIMARY #8B5CF6

SECONDARY #F65C8B

ACCENT #5CF6C4

NEUTRAL #E8E4F7

Click "Copy CSS" to copy gradient code

COLOR 1

COLOR 2

STEPS (5)

DIRECTION

CSS VARIABLES

:root {
  --primary: #8b5cf6;
  --primary-hsl: 258, 90%, 66%;
  --secondary: #f65c8b;
  --accent: #5cf6c4;
}

TAILWIND CONFIG

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          DEFAULT: '#8b5cf6',
          50: '#f5f3ff',
          ...
        }
      }
    }
  }
}

SCSS VARIABLES

$primary-color: #8b5cf6;
$secondary-color: #f65c8b;
$accent-color: #5cf6c4;
$neutral-color: #f1f5f9;

JSON OBJECT

{
  "hex": "#8b5cf6",
  "hsl": "258, 90%, 66%",
  "rgb": "139, 92, 246",
  "name": "Violet"
}

My Color Library

Save your favorite colors. Synced across all color tools.

Import format info

Import a JSON file with this format:

[
  {"hex": "#FF8C00", "name": "Orange"},
  {"hex": "#3B82F6", "name": "Blue"}
]

What This Tool Does

Color Conversion HEX, HSL, RGB, CMYK formats

Accessibility Check WCAG contrast ratios

Color Harmonies Complementary, triadic, analogous

Gradients Create smooth color transitions

Export Options CSS, Tailwind, SCSS, JSON

Keyboard Shortcuts

Ctrl+C Copy HSL

Ctrl+V Paste HEX

R Random color

S Save to library

Professional HEX to HSL Conversion Made Easy

HSL (Hue, Saturation, Lightness) is one of the most intuitive color models for designers. Unlike HEX codes which represent colors in hexadecimal format, HSL lets you think about colors the way humans naturally perceive them - by their hue, how vivid they are, and how light or dark they appear.

Our HEX to HSL Converter provides instant, accurate color conversions with advanced features designed for modern workflows. Beyond simple conversion, we offer comprehensive color analysis including WCAG accessibility testing, automatic generation of shades and tints, color harmony schemes, gradient creation, and export in multiple formats.

How to Use the HEX to HSL Converter

Enter Your HEX Code

Type or paste a HEX color code (e.g., #8B5CF6 or 8B5CF6) in the input field, or click "Pick Color" to use the visual color picker.

Check Accessibility

View WCAG contrast ratios against black and white backgrounds. AA and AAA compliance badges show instantly.

Explore Variations

Navigate through tabs to generate shades, tints, color harmonies, palettes, or gradients.

Export and Save

Copy individual colors, export code in your preferred format, or save to your personal library.

Understanding HSL Color Model

Hue (0-360°)

The color type on the color wheel. 0° is red, 120° is green, 240° is blue, and 360° wraps back to red.

Saturation (0-100%)

The intensity or purity of the color. 0% is gray, 100% is the most vivid version of the hue.

Lightness (0-100%)

How light or dark the color is. 0% is black, 50% is the pure color, 100% is white.

WCAG Accessibility

Automatic contrast ratio calculations with AA and AAA compliance indicators.

Color Harmony

Explore complementary, triadic, split-complementary, and analogous schemes.

Multi-Format Export

Export in CSS Variables, Tailwind Config, SCSS, or JSON format.

Frequently Asked Questions

How do I convert HEX to HSL?

Simply enter a HEX color code (e.g., #8B5CF6 or 8B5CF6) in the input field. The conversion happens instantly in real-time. You can also use the color picker button to select any color visually.

What is HSL color format?

HSL stands for Hue, Saturation, and Lightness. Hue is the color type (0-360 degrees on the color wheel), Saturation is the intensity (0-100%), and Lightness is the brightness (0-100%). HSL is often more intuitive for designers than RGB because it separates color (hue) from intensity and brightness.

What is WCAG color accessibility?

WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable. AA level requires 4.5:1 contrast ratio, while AAA requires 7:1. Our tool automatically checks your color against black and white backgrounds.

Can I save my favorite colors?

Yes! Click the "+" button in My Library or press "S" on your keyboard to save colors. All saved colors are stored locally in your browser and persist between sessions.

What export formats are supported?

You can export colors in CSS Variables, Tailwind Config, SCSS Variables, and JSON formats. Use the Export Code tab to copy the code in your preferred format.