Tools / HEX to HSL Converter

HEX to HSL Converter

Convert HEX to HSL, RGB, HSV, CMYK and CSS color names instantly. Live color picker, HSL sliders, WCAG contrast checker, shades, tints and harmonic palettes. Eyedropper from any image. 100% private, no signup.

Private Everything runs in your browser — nothing is uploaded
#1E3A8A
Input

Accepts HEX, RGB, HSL, HSV, CMYK or CSS color names (e.g. #f00, rgb(255,0,0), hsl(0,100%,50%), red).

Fine-tune
Hue 222°
Saturation 64%
Lightness 33%
Alpha 1
WCAG Contrast
Aa Sample text
Contrast ratio: —
AA Normal AA Large AAA Normal AAA Large
All Formats Click any format to copy
HEX #1E3A8A
HEX (short) #13A
HEX + Alpha #1E3A8AFF
RGB rgb(30, 58, 138)
RGBA rgba(30, 58, 138, 1)
HSL hsl(222, 64%, 33%)
HSLA hsla(222, 64%, 33%, 1)
HSV / HSB hsv(222, 78%, 54%)
CMYK cmyk(78%, 58%, 0%, 46%)
CSS Variable --color: #1E3A8A;
CSS HSL variable --color: 222 64% 33%;
CSS name —
Shades & Tints Click any swatch to select
Harmonic Colors Complementary, triadic, analogous
How to use
  1. Type or paste a color in any format — HEX, RGB, HSL, HSV, CMYK or a CSS name.
  2. Use the Hue / Saturation / Lightness sliders to fine-tune.
  3. Click any format row to copy it to your clipboard.
  4. Use the color picker or Pick from image to sample a color.
  5. Check WCAG contrast against white, black or any other color.
Runs 100% in your browser. Your colors and images never leave your device.
Tip: HSL is often easier to reason about than HEX — hue is the color wheel angle (0–360°), saturation is how vivid (0–100%), and lightness is how bright (0–100%).

What is the HEX to HSL Converter?

Convert HEX to HSL, RGB, HSV, CMYK and CSS color names instantly. Live color picker, HSL sliders, WCAG contrast checker, shades, tints and harmonic palettes. Eyedropper from any image. 100% private, no signup.

It runs 100% in your browser — your files never leave your device, no signup is required, and there are no usage limits or watermarks.

How to Use the HEX to HSL Converter

  1. Paste, drop, or type your input into the tool above.
  2. Adjust the options to match what you need.
  3. Preview the result before copying or downloading.
  4. Everything is generated on your device — nothing is uploaded.

Why Use Our HEX to HSL Converter?

  • 100% private — files never leave your device.
  • No signup, no email, no limits — completely free.
  • Works on any device — desktop, tablet, mobile.
  • No watermarks, no hidden fees.

Frequently Asked Questions

Is the HEX to HSL Converter free?

Yes — completely free with no signup, no email, and no usage limits.

Are my files uploaded to a server?

No. Everything runs in your browser using JavaScript. Your files never leave your device.

Do I need to install anything?

No — just open this page in any modern browser (Chrome, Firefox, Safari, Edge).

Does the HEX to HSL Converter work on mobile?

Yes, on iOS and Android browsers. Very large files are best handled on desktop.

Is there a file size limit?

No hard limits. Files under 100 MB work well on most devices.

Related Tools

CSS Filter

Play with CSS filters on a live preview.

Sort Lines Online

Sort lines alphabetically, numerically, naturally or by leng...

Caesar Cipher

Encrypt or decrypt text with the classic Caesar cipher.

Browser Fingerprint Checker

Check your browser fingerprint — canvas, WebGL, audio, fonts...

Typing Speed Test

Test your typing speed in WPM with live accuracy tracking.

Percentage Change Calculator

Calculate percentage increase, decrease, and difference betw...