MockFoxAdvertise

HEX to HSL Converter

Updated Free mock REST & WebSocket APIs

Paste a hex code to get its HSL value, then fine-tune hue, saturation and lightness with the sliders — the hex updates as you go.

HSLhsl(9, 100%, 64%)CSS name: tomato
HEX

Accepts #RGB, #RRGGBB, 8-digit #RRGGBBAA, with or without the # — or paste any CSS color.

⇄
HSL
Every format
HEX#ff6347
HEX (uppercase)#FF6347
RGBrgb(255, 99, 71)
CSS rgb() modernrgb(255 99 71)
HSLhsl(9, 100%, 64%)
HSV / HSBhsv(9, 72%, 100%)
CMYKcmyk(0%, 61%, 72%, 0%)
OKLCHoklch(69.62% 0.1955 32.32)
Decimal 0–11.000, 0.388, 0.278

🔒 Converted instantly in your browser. Need more control? Open the full color picker.

How to convert HEX to HSL

  1. Paste a hex code such as #ff6347.
  2. Copy the HSL result — hsl(9, 100%, 64%) — or drag H, S and L to explore lighter, darker or muted versions.

The formula

  1. Convert hex to RGB and divide each channel by 255, so R, G and B are 0–1.
  2. Find max and min of the three and d = max − min.
  3. Lightness L = (max + min) ÷ 2.
  4. Saturation S = 0 if d = 0, otherwise d ÷ (1 − |2L − 1|).
  5. Hue: if max is R, H = 60 × ((G − B) ÷ d mod 6); if G, H = 60 × ((B − R) ÷ d + 2); if B, H = 60 × ((R − G) ÷ d + 4).

Example: #ff6347 → (1, 0.388, 0.278). max = 1, min = 0.278, d = 0.722. L = 0.639 → 64%. S = 0.722 ÷ (1 − 0.278) = 1 → 100%. Max is red, so H = 60 × (0.110 ÷ 0.722) ≈ 9°. Result: hsl(9, 100%, 64%).

Why designers like HSL

HSL lets you make a hover state by nudging lightness, or a disabled state by dropping saturation, without changing the hue. Beware that HSL lightness isn't perceptual — yellow at 50% looks much lighter than blue at 50%. For evenly spaced palettes use the OKLCH value shown above, or the palette generator.

CSS named colors in HSL

ColorHEXHSL
#f0f8ffhsl(208, 100%, 97%)
#faebd7hsl(34, 78%, 91%)
#00ffffhsl(180, 100%, 50%)
#7fffd4hsl(160, 100%, 75%)
#f0ffffhsl(180, 100%, 97%)
#f5f5dchsl(60, 56%, 91%)
#ffe4c4hsl(33, 100%, 88%)
#000000hsl(0, 0%, 0%)
#ffebcdhsl(36, 100%, 90%)
#0000ffhsl(240, 100%, 50%)
#8a2be2hsl(271, 76%, 53%)
#a52a2ahsl(0, 59%, 41%)
#deb887hsl(34, 57%, 70%)
#5f9ea0hsl(182, 25%, 50%)
#7fff00hsl(90, 100%, 50%)
#d2691ehsl(25, 75%, 47%)
#ff7f50hsl(16, 100%, 66%)
#6495edhsl(219, 79%, 66%)
#fff8dchsl(48, 100%, 93%)
#dc143chsl(348, 83%, 47%)
#00ffffhsl(180, 100%, 50%)
#00008bhsl(240, 100%, 27%)
#008b8bhsl(180, 100%, 27%)
#b8860bhsl(43, 89%, 38%)
#a9a9a9hsl(0, 0%, 66%)
#006400hsl(120, 100%, 20%)
#a9a9a9hsl(0, 0%, 66%)
#bdb76bhsl(56, 38%, 58%)
#8b008bhsl(300, 100%, 27%)
#556b2fhsl(82, 39%, 30%)
#ff8c00hsl(33, 100%, 50%)
#9932cchsl(280, 61%, 50%)
#8b0000hsl(0, 100%, 27%)
#e9967ahsl(15, 72%, 70%)
#8fbc8fhsl(120, 25%, 65%)
#483d8bhsl(248, 39%, 39%)
#2f4f4fhsl(180, 25%, 25%)
#2f4f4fhsl(180, 25%, 25%)
#00ced1hsl(181, 100%, 41%)
#9400d3hsl(282, 100%, 41%)
#ff1493hsl(328, 100%, 54%)
#00bfffhsl(195, 100%, 50%)
#696969hsl(0, 0%, 41%)
#696969hsl(0, 0%, 41%)
#1e90ffhsl(210, 100%, 56%)
#b22222hsl(0, 68%, 42%)
#fffaf0hsl(40, 100%, 97%)
#228b22hsl(120, 61%, 34%)
#ff00ffhsl(300, 100%, 50%)
#dcdcdchsl(0, 0%, 86%)
#f8f8ffhsl(240, 100%, 99%)
#ffd700hsl(51, 100%, 50%)
#daa520hsl(43, 74%, 49%)
#808080hsl(0, 0%, 50%)
#008000hsl(120, 100%, 25%)
#adff2fhsl(84, 100%, 59%)
#808080hsl(0, 0%, 50%)
#f0fff0hsl(120, 100%, 97%)
#ff69b4hsl(330, 100%, 71%)
#cd5c5chsl(0, 53%, 58%)
#4b0082hsl(275, 100%, 25%)
#fffff0hsl(60, 100%, 97%)
#f0e68chsl(54, 77%, 75%)
#e6e6fahsl(240, 67%, 94%)
#fff0f5hsl(340, 100%, 97%)
#7cfc00hsl(90, 100%, 49%)
#fffacdhsl(54, 100%, 90%)
#add8e6hsl(195, 53%, 79%)
#f08080hsl(0, 79%, 72%)
#e0ffffhsl(180, 100%, 94%)
#fafad2hsl(60, 80%, 90%)
#d3d3d3hsl(0, 0%, 83%)
#90ee90hsl(120, 73%, 75%)
#d3d3d3hsl(0, 0%, 83%)
#ffb6c1hsl(351, 100%, 86%)
#ffa07ahsl(17, 100%, 74%)
#20b2aahsl(177, 70%, 41%)
#87cefahsl(203, 92%, 75%)
#778899hsl(210, 14%, 53%)
#778899hsl(210, 14%, 53%)
#b0c4dehsl(214, 41%, 78%)
#ffffe0hsl(60, 100%, 94%)
#00ff00hsl(120, 100%, 50%)
#32cd32hsl(120, 61%, 50%)
#faf0e6hsl(30, 67%, 94%)
#ff00ffhsl(300, 100%, 50%)
#800000hsl(0, 100%, 25%)
#66cdaahsl(160, 51%, 60%)
#0000cdhsl(240, 100%, 40%)
#ba55d3hsl(288, 59%, 58%)
#9370dbhsl(260, 60%, 65%)
#3cb371hsl(147, 50%, 47%)
#7b68eehsl(249, 80%, 67%)
#00fa9ahsl(157, 100%, 49%)
#48d1cchsl(178, 60%, 55%)
#c71585hsl(322, 81%, 43%)
#191970hsl(240, 64%, 27%)
#f5fffahsl(150, 100%, 98%)
#ffe4e1hsl(6, 100%, 94%)
#ffe4b5hsl(38, 100%, 85%)
#ffdeadhsl(36, 100%, 84%)
#000080hsl(240, 100%, 25%)
#fdf5e6hsl(39, 85%, 95%)
#808000hsl(60, 100%, 25%)
#6b8e23hsl(80, 60%, 35%)
#ffa500hsl(39, 100%, 50%)
#ff4500hsl(16, 100%, 50%)
#da70d6hsl(302, 59%, 65%)
#eee8aahsl(55, 67%, 80%)
#98fb98hsl(120, 93%, 79%)
#afeeeehsl(180, 65%, 81%)
#db7093hsl(340, 60%, 65%)
#ffefd5hsl(37, 100%, 92%)
#ffdab9hsl(28, 100%, 86%)
#cd853fhsl(30, 59%, 53%)
#ffc0cbhsl(350, 100%, 88%)
#dda0ddhsl(300, 47%, 75%)
#b0e0e6hsl(187, 52%, 80%)
#800080hsl(300, 100%, 25%)
#663399hsl(270, 50%, 40%)
#ff0000hsl(0, 100%, 50%)
#bc8f8fhsl(0, 25%, 65%)
#4169e1hsl(225, 73%, 57%)
#8b4513hsl(25, 76%, 31%)
#fa8072hsl(6, 93%, 71%)
#f4a460hsl(28, 87%, 67%)
#2e8b57hsl(146, 50%, 36%)
#fff5eehsl(25, 100%, 97%)
#a0522dhsl(19, 56%, 40%)
#c0c0c0hsl(0, 0%, 75%)
#87ceebhsl(197, 71%, 73%)
#6a5acdhsl(248, 53%, 58%)
#708090hsl(210, 13%, 50%)
#708090hsl(210, 13%, 50%)
#fffafahsl(0, 100%, 99%)
#00ff7fhsl(150, 100%, 50%)
#4682b4hsl(207, 44%, 49%)
#d2b48chsl(34, 44%, 69%)
#008080hsl(180, 100%, 25%)
#d8bfd8hsl(300, 24%, 80%)
#ff6347hsl(9, 100%, 64%)
#40e0d0hsl(174, 72%, 56%)
#ee82eehsl(300, 76%, 72%)
#f5deb3hsl(39, 77%, 83%)
#ffffffhsl(0, 0%, 100%)
#f5f5f5hsl(0, 0%, 96%)
#ffff00hsl(60, 100%, 50%)
#9acd32hsl(80, 61%, 50%)

Related tools

Embed this tool on your site

Browse all embeddable tools →

Free for blogs, HR, payroll and contractor sites: copy one snippet — the widget sizes itself and matches your colors.

Get the embed code

Frequently asked questions

Is it free and private?

Yes. It's free with no sign-up, and it runs entirely in your browser — the colors you enter are never uploaded or logged.

Why do I get a slightly different hex back from rounded HSL?

HSL rounded to whole numbers can't represent every one of the 16.7 million hex colors exactly, so a round trip may shift a channel by 1. Use decimals (hsl(9.13, 100%, 63.92%)) for an exact match.

What hue does gray have?

None — when saturation is 0 the hue is undefined and conventionally written as 0. Any hue with 0% saturation gives the same gray.

Is the modern syntax hsl(9 100% 64%) supported?

Yes. CSS Color 4 allows space-separated values and a slash for alpha (hsl(9 100% 64% / 50%)), supported by all current browsers. This tool reads both forms.

Your business here? Sponsor this tool from $16/week. See placements