HSL to HEX Converter
Convert HSL color values to HEX codes instantly with live color preview.
HEX Code
#DEE901
CSS HSL
hsl(63, 99%, 46%)
Formula
HSL → RGB (hue rotation algorithm) → HEX (decimal to hexadecimal per channel)
Why Convert HSL to HEX?
HSL is the best color model for thinking about and designing with color. It lets you reason in terms of "make this lighter" or "make this less vivid" rather than "increase the green channel by 40 and decrease blue by 20." But the web ecosystem still runs on HEX codes. Design tools export HEX. Tailwind configs expect HEX. Your team's style guide probably uses HEX.
The practical workflow is: think in HSL, deliver in HEX. Use HSL to figure out the right shade, saturation, and brightness for your color. Then convert it to HEX for your CSS, design tokens, and component libraries.
Practical HSL Techniques
/* Light mode */
:root {
--bg: hsl(220, 15%, 97%); /* Near white */
--surface: hsl(220, 15%, 100%); /* White */
--text: hsl(220, 15%, 10%); /* Near black */
--muted: hsl(220, 10%, 50%); /* Gray */
--accent: hsl(220, 80%, 50%); /* Blue */
}
/* Dark mode: flip lightness, reduce saturation */
[data-theme="dark"] {
--bg: hsl(220, 15%, 8%);
--surface: hsl(220, 15%, 12%);
--text: hsl(220, 15%, 92%);
--muted: hsl(220, 10%, 55%);
--accent: hsl(220, 70%, 60%); /* Slightly lighter */
}/* Start with a brand color */
--brand: hsl(220, 80%, 50%);
/* Complementary: +180° on the wheel */
--complement: hsl(40, 80%, 50%);
/* Analogous: ±30° */
--analog-1: hsl(190, 80%, 50%);
--analog-2: hsl(250, 80%, 50%);
/* Triadic: +120° and +240° */
--triad-1: hsl(340, 80%, 50%);
--triad-2: hsl(100, 80%, 50%);
/* Split complementary: +150° and +210° */
--split-1: hsl(10, 80%, 50%);
--split-2: hsl(70, 80%, 50%);function hslToHex(h, s, l) {
s /= 100; l /= 100;
const a = s * Math.min(l, 1 - l);
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(
Math.min(k - 3, 9 - k, 1), -1
);
return Math.round(255 * color)
.toString(16).padStart(2, '0');
};
return '#' + f(0) + f(8) + f(4);
}
hslToHex(63, 99, 46); // "#e3eb01"
hslToHex(220, 80, 50); // "#1a66e6"The HSL Color Wheel at a Glance
Frequently Asked Questions
How do I convert HSL to HEX?
Convert HSL to RGB first using the hue rotation algorithm, then convert each RGB value (0-255) to a two-digit hexadecimal number. Concatenate the three hex pairs with a # prefix. For example, hsl(63, 99%, 46%) becomes rgb(227, 235, 1) which becomes #E3EB01.
What are HSL values?
H (Hue) is a position on the color wheel from 0 to 360 degrees. S (Saturation) ranges from 0% (gray) to 100% (full color intensity). L (Lightness) ranges from 0% (pure black) to 100% (pure white), with 50% being the truest form of the color.
When should I use HSL in CSS?
Use HSL when you need to create color themes, generate shades and tints, build dark mode palettes, or adjust color brightness programmatically. HSL makes these tasks intuitive because you can tweak one dimension without affecting the others.
Is HSL supported in all browsers?
Yes. hsl() and hsla() have been supported in every major browser since 2010. The modern comma-free syntax hsl(120 100% 50% / 0.5) is supported in all browsers since 2021.
Why would I convert HSL back to HEX?
Many design tools, component libraries, and existing codebases use HEX. When you design a color palette using HSL logic, you often need the HEX values for Figma, Tailwind config files, or CSS custom properties that other developers expect in HEX.
How do I build a dark mode palette with HSL?
Take your light mode HSL colors and reduce lightness while slightly reducing saturation. For example, a light background at hsl(220, 15%, 95%) becomes hsl(220, 15%, 10%) in dark mode. Text goes from hsl(220, 15%, 10%) to hsl(220, 15%, 90%).
What is the difference between HSL and OKLCH?
HSL is simple but not perceptually uniform, meaning equal lightness changes do not look equal to the human eye. OKLCH is a newer color space in CSS that is perceptually uniform, making it better for generating truly even color scales. OKLCH support is growing but HSL is more established.
How do I create complementary colors with HSL?
Add 180 degrees to the hue for a complementary color. For analogous colors, add or subtract 30 degrees. For a triadic scheme, add 120 and 240 degrees. HSL makes color theory calculations trivial.
Can I animate HSL values in CSS?
Yes. CSS transitions and animations work with HSL colors. Animating the hue creates a rainbow effect, animating lightness creates a pulse, and animating saturation creates a fade to gray. Use the hsl() function directly in your keyframes.
What HSL values produce gray?
Any hue with 0% saturation produces gray. The lightness determines the shade: hsl(0, 0%, 0%) is black, hsl(0, 0%, 50%) is medium gray, and hsl(0, 0%, 100%) is white. The hue value does not matter when saturation is zero.
How accurate is the HSL to HEX conversion?
The conversion is mathematically exact for the standard algorithm. However, since HEX values are integers (0-255 per channel), there can be slight rounding from HSL's continuous values. The difference is imperceptible to the human eye.
How do CSS frameworks handle HSL?
Tailwind CSS v3+ uses HSL for its color system internally. Shadcn/ui stores colors as HSL values in CSS variables. Many modern design systems prefer HSL because it makes theming and dark mode switching much simpler.
Disclaimer: This tool provides approximate conversions for reference purposes. Color rendering may vary slightly across different displays and browsers.