Hex to HSL Converter
Hex to HSL Converter. Enter your Hex Color and the Hex to HSL Converter instantly calculates its HSL Output. Need to match a Tailwind color outside your Tailwind config? The tailwind to hex converter returns its precise hex value.
Need the hex to HSL converter answer without doing the arithmetic by hand? Paste any six-digit hex code and you get back its hue, saturation, and lightness, so #1F8A70 becomes hsl(165, 63%, 33%) and you can copy the HSL value straight into your CSS. Below, you will see exactly how the conversion works, where the numbers come from, and why designers and developers keep switching color formats.
How the Hex to HSL Converter Turns a Hex Color Code into HSL
A hex to HSL color converter reads the three channel values packed inside a hex code, rescales them, and reports the same color as an angle on the color wheel plus two percentages. The color itself never changes; only the way it is described does. That is why a hex to HSL conversion is always reversible, apart from small rounding differences.
Think of it as a translation between two languages. The first, hexadecimal, is compact and machine-friendly. The second, HSL, is intuitive for people, because you can tell at a glance that a hue of 165° sits in the green-teal region and a lightness of 33% is on the darker side.
- Paste or type your hex color code, with or without the leading hash.
- The tool splits it into red, green, and blue and rescales each channel.
- It returns the HSL format as hue in degrees, saturation in percent, and lightness in percent.
- You click to copy the result and paste it wherever your workflow needs it.
What a Hex Color Code and Hex Triplet Really Store
A hex color code is a hex triplet: a six-digit number written in hexadecimal notation, used throughout HTML, CSS, SVG, and other areas of computing to describe colors on digital screens. It follows the pattern #RRGGBB, which means three groups of characters, one each for red, green, and blue. This is the same additive scheme the Wikipedia article on web colors describes, and it is the reason every browser understands it.
Each two-digit hex pair
Each two-digit hex pair runs from 00 to FF, which is 0 to 255 in decimal. With 256 possible values for each of the three channels, a single hex code can name more than 16 million colors. In our example, 1F is 31, 8A is 138, and 70 is 112, so the RGB color model reads it as rgb(31, 138, 112); the RGB channels are what the HSL math starts from.
Why designers still use hexadecimal
Hexadecimal is short, easy to paste, and works instantly in all major browsers as one shared color format. The weakness is readability: nothing in #1F8A70 tells you whether making it lighter means raising the first pair, the second, or all three. That gap is exactly what a hex to HSL conversion closes, because it exposes lightness as a single number.
The HSL Color Model: Hue, Saturation, and Lightness
HSL stands for hue, saturation, lightness. It was developed by computer graphics researchers in the 1970s as a rearrangement of RGB that lines up better with how human vision describes color. As a color model, it arranges every hue around a cylinder, which is why you will see the phrase cylindrical coordinates in technical references. When debugging low-level code, the hex to signed integer converter shows the true signed value behind a hex byte or word.
- Hue is the position on the color wheel, measured in degrees from 0 to 360. Pure red sits at 0°, green at 120°, and blue at 240°.
- Saturation describes intensity. At 0% the color is gray; at 100% it is fully saturated and vivid.
- Lightness describes how much white or black is mixed in: 0% is black, 100% is white, and 50% gives the truest shade of the hue.
Because the three parts are independent, you can keep a base hue fixed and change only saturation or lightness, which is something a hex code cannot express directly. This is the main reason the HSL color model is popular in web design and UI design. Enter your red, green, and blue values into the rgb to hex converter to get a hex code you can paste straight into CSS.
Hex to HSL Conversion Formula, Step by Step
The math behind every converter is the same short routine. First, each channel is divided by 255 so that it becomes a number between 0 and 1; this is the normalised step. Then the maximum and minimum of the three values drive everything else.
$$L = \frac{max + min}{2}$$
$$S = \frac{max - min}{1 - |2L - 1|}$$
$$H = 60^{\circ} \times \left(\frac{G - B}{max - min} \bmod 6\right) \quad \text{(when red is the largest channel)}$$
When green is the largest channel, the hue formula uses \(\frac{B - R}{max - min} + 2\) inside the brackets, and when blue is largest it uses \(\frac{R - G}{max - min} + 4\). If all three channels are equal, the color is a shade of gray: the saturation and hue are both 0, and only the lightness matters.
Worked Example: Convert Hex to HSL for #1F8A70
Let us convert hex to HSL for the code #1F8A70, a deep teal-green, using the steps above.
- Split the code:
1F= 31,8A= 138,70= 112. - Divide by 255: R = 0.1216, G = 0.5412, B = 0.4392.
- The maximum is 0.5412 (green) and the minimum is 0.1216 (red), so the difference is 0.4196.
- Lightness: \(L = (0.5412 + 0.1216) \div 2 = 0.3314\), or 33%.
- Saturation: \(S = 0.4196 \div (1 - |2 \times 0.3314 - 1|) = 0.6331\), or 63%.
- Hue: green is the largest channel, so \(H = 60 \times ((0.4392 - 0.1216) \div 0.4196 + 2) = 165.4^{\circ}\), or 165°.
The final answer is hsl(165, 63%, 33%). With a lightness of 33%, this is a dark shade; raise it to 45% and you get a livelier mid-tone teal without touching the hue.
Checking a Brand Button with a Hex to HSL Color Converter
Priya Nair is a front-end developer handed a style guide that lists the primary button as #2E7D9A. Her stylesheet needs a darker hover state, and the guide gives no value for it, so she opens the converter to see the color as hue, saturation, and lightness instead of guessing at hex digits.
She pastes #2E7D9A. The HSL conversion comes back as hsl(196, 54%, 39%): a hue of 196° (a steel blue just past cyan), 54% saturation, and 39% lightness. Before touching anything, she checks the white button label against the WCAG AA threshold of 4.5:1 for normal text. The contrast is 4.65:1, a pass with almost no margin, so any lighter shade would fail.
That settles the direction: the hover state must get darker, never lighter. She keeps hue and saturation fixed and drops lightness from 39% to 28%, which gives hsl(196, 54%, 28%). Converting back returns #21586E, and the white label now reaches 7.82:1, clearing the stricter 7:1 AAA level for normal text.
| State | Hex code | HSL value | White text contrast |
|---|---|---|---|
| Default | #2E7D9A | hsl(196, 54%, 39%) | 4.65:1 (AA pass) |
| Hover | #21586E | hsl(196, 54%, 28%) | 7.82:1 (AAA pass) |
She writes both values into the stylesheet as HSL, with the hex code kept in a comment for the design team, and moves on to the disabled state, where she will raise lightness to 70% instead. One conversion turned a vague request for a darker blue into two exact, testable numbers.
Hex to HSL Color Examples You Can Check
These rows were computed with the same formula, so you can use them to test any converter you rely on. Notice how the neutral gray has a saturation of zero and how the hue value alone tells you the color family.
| Hex code | HSL value | What it looks like |
|---|---|---|
| #1F8A70 | hsl(165, 63%, 33%) | Deep teal-green, the worked example above |
| #C2451E | hsl(14, 73%, 44%) | Burnt orange, strongly saturated |
| #5B3FA8 | hsl(256, 45%, 45%) | Muted violet, a moderate range of saturation |
| #E8B923 | hsl(46, 81%, 52%) | Warm golden yellow |
| #4D4D4D | hsl(0, 0%, 30%) | Neutral gray, no saturation |
| #F3E9DC | hsl(34, 49%, 91%) | Pale cream, very high lightness |
If a color converter gives you a different integer for one of these, the likeliest cause is rounding: some tools round the hue, others truncate it.
Shorthand Hex, Invalid Hex, and Alpha Channel Inputs
Real input is rarely clean, so a good tool handles the awkward cases without guessing silently.
- Shorthand hex: a three-digit code such as
#3C9is shorthand notation. Each digit is doubled, so it expands to#33CC99before conversion. - Invalid hex: a code with the wrong length or characters outside 0-9 and A-F cannot be converted. The correct behavior is to show an error, not a made-up result.
- Alpha channel: an eight-digit code adds two more digits for transparency. The converted color becomes HSLA, and the alpha value carries across unchanged because it is independent of hue, saturation, and lightness.
Case does not matter: #1f8a70 and #1F8A70 are the same color.
Why Convert Hex Color Codes to HSL Format in Web Design
The reason to convert is control. In web design and web development, a color usually has to exist in several variations, and HSL makes those variations a matter of changing one number.
Theming and hover states
For theming, keep the hue and saturation from your brand color and lower the lightness by 8 points for a hover state. Doing the same with a hex code means recalculating three channels by hand.
Building a color palette
A consistent color palette comes from holding one hue steady and stepping lightness to produce shades and tints. Designers use this to generate a ten-step scale from a single brand color in minutes.
Accessibility and contrast
Lightness is the lever that moves text contrast up or down, so it matters for accessibility. Adjust it in HSL, then check the pair against the WCAG contrast ratio, since lightness alone does not guarantee a passing result.
Learning how color formats relate
Seeing one hex code next to its HSL value shows how the red, green, and blue pairs map onto hue, saturation, and lightness, which teaches the relationship faster than a definition. It also helps you pick between color formats for each job.
Using HSL Values in CSS and Design Tokens
Modern CSS accepts the functional notation directly: color: hsl(165, 63%, 33%); works in every current browser, and the newer space-separated syntax hsl(165 63% 33%) is valid too. When you need transparency, use the hsla() form or add a slash and an alpha value.
In a design system, the same value often lives in design tokens: named variables that hold your brand color once so the codebase and the design tools both read it. Many developers store the three HSL parts as separate tokens so a theme can change lightness for dark mode without redefining the hue. If your workflow starts in a design file that exports hex, convert once and keep the HSL form in the codebase.
A short checklist makes handoff smoother:
- Copy the HSL value exactly as the converter shows it.
- Keep the hex code in a comment for reference, since many legacy systems still expect it.
- Store hue, saturation, and lightness as separate custom properties when you plan adjustments later.
HSL Compared with Other Color Formats and Color Spaces
HSL is one option among many color formats, and each has a job. Hex and RGB suit screens and quick definitions. CMYK is built for print, where a CMYK ink mix replaces the RGB light mix. HSV swaps lightness for value, which is how many color picker widgets work. Newer spaces such as OKLCH, which modern CSS supports natively, are perceptually uniform, meaning equal numeric steps look like equal visual steps, so they predict perceived brightness and luminance better than HSL does.
A color space also defines the gamut, the range of colors it can show. Hex and HSL both live in sRGB, so converting between them never loses information; converting into print or perceptual spaces can shift a color slightly.
When you need another direction, these companion conversions cover the common cases: HSL to hex for the reverse conversion, hex to RGB, hex to CMYK, hex to HSV, and HSL to RGB. Programmers can reproduce the same step from the formula above with a few lines of C# code, and the resulting hsl() value works as an SVG fill, an SVG stroke, or an SVG gradient stop just as it does in CSS. If you later move to OKLCH for perceptual work, the hex code is the common starting point for that conversion too, and the same goes for CMYK when a design heads to a printer.
Online Color Converter Tips for Accurate Hex to HSL Results
An online color converter is only as useful as its precision, so a few habits help you read a hex to HSL result correctly.
- Pick lightness in a moderate range, roughly 30% to 70%, for interface elements so they are neither too dark nor washed out.
- Test the tool with a known pair such as #4D4D4D and hsl(0, 0%, 30%) from the table above, and watch for rounding differences in the hue.
- Check the named color closest to your result when you want a human-readable label for documentation.
- Confirm that a shorthand code expanded the way you expected, then check the live preview before you ship.
Whether you work in digital art, UI layouts, or documentation for a brand, the colors you choose will look the same in every browser once converted correctly. Pasting a code, reading the HSL value, and copying it back takes seconds, and it gives you an accurate result every time.