Hex to HSL Calculator
Convert HEX to HSL, RGB to HSL, and between all colour formats instantly — no button to press. Enter a colour in any format and all other values update in real time. Outputs HEX, HEX3 shorthand, RGB, RGBA, HSL, HSLA, and individual H/S/L/V channel values. Fully private, 100% free, and no signup required.
Sample Colors
Input Format
All Format Equivalents
Why Use Our Hex to HSL Calculator?
Instant Bidirectional Conversion
The hex to HSL calculator updates all format equivalents on every keystroke — no button to press. Change any input (HEX, RGB, or HSL) and all other values update instantly. A native colour picker is also available for visual selection.
All Formats in One Place
The hex to HSL calculator outputs HEX, HEX3 (shorthand), RGB, RGBA, HSL, HSLA, and individual H/S/L/V channel values — everything a developer needs in a single view. Copy any individual value or all values at once.
100% Private — No Upload
All conversion happens locally in your browser. Your colour values never leave your device and are never sent to any server — safe for client projects and proprietary design systems.
Free & No Limits
Convert unlimited colours with no signup, no subscription, and no usage caps. The hex to HSL calculator is completely free forever with no ads blocking the interface.
Common Use Cases for Hex to HSL Calculator
CSS Development
Frontend developers use the hex to HSL calculator to convert design tokens from HEX to HSL for CSS custom properties. HSL is preferred in CSS because it is easy to adjust lightness and saturation programmatically.
Tailwind CSS Configuration
Developers use the hex to HSL calculator to convert brand colours from HEX to HSL for Tailwind CSS configuration. Tailwind v3+ uses HSL-based CSS variables for its colour system.
Design Handoff
Developers use the hex to HSL calculator to convert HEX values from Figma designs into the RGB or HSL format required by their CSS framework or design token system.
Accessibility & Contrast Work
Accessibility specialists use the hex to HSL calculator to understand the lightness (L) value of a colour, which is a key factor in contrast ratio calculations and dark mode adaptation.
Colour Palette Adjustment
Designers use the hex to HSL calculator to find the HSL values of existing brand colours so they can create consistent tints and shades by adjusting only the lightness channel.
Cross-Platform Development
Mobile and cross-platform developers use the hex to HSL calculator to convert web HEX colours to RGB values for use in React Native, Flutter, and other frameworks that use RGB colour models.
Understanding HEX, RGB, and HSL Color Formats
What is the Hex to HSL Calculator?
The hex to HSL calculator converts colour values between the three most common CSS colour formats — HEX, RGB, and HSL — instantly and bidirectionally. Enter a colour in any format and get all equivalent values immediately. The tool also outputs individual channel values (H, S, L, R, G, B) and HSV values, making it a complete colour format reference for developers and designers.
How Our Hex to HSL Calculator Works
- Enter a colour in any format: Type a HEX value (e.g.
#ff6b6b), an RGB value (e.g.255, 107, 107), or an HSL value (e.g.0, 100%, 71%). You can also use the native colour picker swatch. All processing runs locally in your browser — your colour values never leave your device. - All formats update instantly: As you type, all other format fields update in real time. The colour swatch shows a live preview of the colour. Switch the active input mode to edit a different format.
- Copy any value:Click the Copy button next to any output row to copy that specific value, or use “Copy All Values” to copy HEX, RGB, and HSL together.
HEX vs RGB vs HSL — When to Use Each
- HEX: The most common format for web colours. Compact and universally supported. Use HEX when copying colours from design tools like Figma or when specifying colours in HTML attributes.
- RGB: Specifies red, green, and blue channels (0–255). Use RGB when working with canvas APIs, React Native, Flutter, or any platform that requires numeric channel values.
- HSL: Specifies hue (0–360°), saturation (0–100%), and lightness (0–100%). HSL is the most intuitive format for designers — adjusting only the lightness creates consistent tints and shades. Preferred for CSS custom properties and design token systems.
- HSV:Similar to HSL but uses value/brightness instead of lightness. HSV is used in Photoshop, Figma's colour picker, and most design applications. The hex to HSL calculator also outputs HSV values for cross-tool compatibility.
Why HSL is Preferred for CSS Custom Properties
HSL is increasingly preferred for CSS design systems because it makes colour manipulation predictable. To create a lighter version of a colour, simply increase the L value. To create a darker version, decrease it. This makes HSL ideal for generating tint/shade scales, dark mode variants, and hover states programmatically. Tailwind CSS v3+ uses HSL-based CSS variables for exactly this reason. Our hex to HSL calculator makes it easy to convert any existing HEX colour to HSL for use in your design token system.
Related Color Tools
Color Picker & Converter
Visual colour picker with HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK ↔ HWB ↔ CIE LAB conversion and WCAG contrast checker.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components.
CSS Named Colors Reference
Search, filter, and copy all 148 CSS named colors with HEX, RGB, and HSL values. Filter by 12 color families.
Color Gradient Generator
Build CSS linear, radial, and conic gradients visually with up to 10 colour stops. Get instant CSS output.
Frequently Asked Questions About Hex to HSL Calculator
A hex to HSL calculator converts colour values between HEX, RGB, and HSL formats instantly. Our hex to HSL calculator is bidirectional — you can enter a colour in any format and get all equivalent values. It also outputs individual H, S, L, R, G, B, and HSV channel values. All conversion runs entirely in your browser with no data sent to a server.
Enter your HEX value (e.g. #ff6b6b) in the HEX input field. The hex to HSL calculator instantly shows the equivalent HSL value (e.g. hsl(0, 100%, 71%)) in the output panel. You can also copy the HSL value directly with the Copy button next to the HSL row.
Click "RGB" to set the active input mode, then enter your RGB values (e.g. 255, 107, 107). The hex to HSL calculator instantly converts RGB to HSL and shows all equivalent formats. You can enter values as "255, 107, 107" or "rgb(255, 107, 107)" — both formats are accepted.
Yes. All conversion happens 100% client-side in your browser using JavaScript. Your colour values are never sent to any server, never stored, and never transmitted anywhere. The hex to HSL calculator is completely private.
Yes. The hex to HSL calculator is 100% free with no signup required, no premium features, and no usage limits. Convert unlimited colours without any restrictions or hidden costs.
Both HSL and HSV use hue and saturation, but the third channel differs. HSL uses lightness (50% = pure colour, 0% = black, 100% = white). HSV uses value/brightness (100% = full brightness, 0% = black). HSL is used in CSS; HSV is used in Photoshop, Figma, and most design applications. The hex to HSL calculator outputs both.
HEX3 is a shorthand notation where each pair of identical hex digits can be written as a single digit. For example, #ffcc00 can be written as #fc0, and #aabbcc as #abc. The hex to HSL calculator shows the HEX3 shorthand when it is available (i.e. when all three pairs are doubles).
Yes. The hex to HSL calculator accepts HSL values with or without the % sign. You can enter "0, 100%, 71%" or "0, 100, 71" — both are interpreted correctly. You can also enter the full CSS function format: "hsl(0, 100%, 71%)".