Why does HSL feel more intuitive than HEX or RGB?

HSL separates color into three dimensions that match human perception: hue (which color), saturation (how vivid), and lightness (how bright). RGB mixes three color channels that do not correspond to any intuitive property.

What is the difference between HSL and HSB/HSV?

HSL and HSB both use hue and saturation, but the third dimension differs. HSL uses lightness (black to white through the color), while HSB uses brightness (black to fully saturated color).

How do I choose accessible text colors with HSL?

Start with your background's HSL values. For the text color, use the same hue but adjust lightness to at least 50 points apart. Always verify with the contrast ratio formula.

Can I use HSL with transparency?

Yes. CSS supports hsla() where 'a' is the alpha channel from 0 (transparent) to 1 (opaque). This is equivalent to rgba() but more intuitive to adjust.

What are named CSS colors and when should I use them?

CSS defines 148 named colors (like 'crimson', 'teal', 'rebeccapurple'). They are useful for quick prototypes but avoid them in production — named colors are not adjustable programmatically.

June 14, 2026

How to Convert Between HEX, RGB, and HSL Color Codes

Colors in web development come in more flavors than a paint store. HEX, RGB, HSL — they all describe the same thing, but each format serves a different purpose. Knowing when to use which format, and how to convert between them, saves you from copying values into Google and hoping for the best.

HEX, RGB, and HSL are different formats for the same color — each suited for different tasks. HEX is compact and universal, RGB is precise for programming, and HSL matches how humans think about color. Master the manual conversion math and understand HSL's perceptual trap to build better design systems and accessible interfaces.

HEX: the web native format

HEX codes like #2563eb are the most common color format on the web. Each pair of characters represents red, green, and blue values in hexadecimal. HEX is compact, universally supported, and easy to copy-paste. But it is terrible for making adjustments — if you want "the same blue but 20 percent lighter," you cannot do that math in your head.

RGB: the programmer format

RGB uses decimal numbers from 0 to 255 for each channel: rgb(37, 99, 235). CSS also supports rgba() with an alpha channel for transparency. The ToolStand Color Code Converter instantly translates between HEX and RGB — enter one, get the other.

HSL: the designer format

HSL stands for Hue, Saturation, Lightness. You pick a hue (0-360 degrees on the color wheel), adjust saturation (how vivid), and set lightness (black to white). HSL is intuitive for design work because it maps to how humans think about color. Want a lighter version? Increase lightness. Want a more muted version? Decrease saturation.

Building color schemes

Once you have a base color, the Color Palette Generator creates harmonious schemes using color theory: complementary, analogous, triadic, and monochromatic. Pick your base color in any format, and the generator produces a full palette with HEX codes ready to copy.

Practical workflow

You find a brand color in HEX: #7c3aed. You want a lighter variant for hover states. Step 1: Paste it into the Color Converter. Note the HSL values. Step 2: Increase Lightness for your hover variant. The converter shows the new HEX. Step 3: Open the Color Palette Generator for a complementary color. You have built a design system in under a minute.

Manual conversion math — from HEX to RGB and back without a converter

The conversion between HEX and RGB is straightforward arithmetic. A HEX code like #2563eb has three pairs: 25 (red), 63 (green), eb (blue). Convert each pair from base-16 (hexadecimal) to base-10: 0x25 = 2×16 + 5 = 37, 0x63 = 6×16 + 3 = 99, 0xeb = 14×16 + 11 = 235. So #2563eb converts to rgb(37, 99, 235). Going backwards, take each decimal value, divide by 16: 37 ÷ 16 = 2 remainder 5 → hex "25"; 99 ÷ 16 = 6 remainder 3 → hex "63"; 235 ÷ 16 = 14 remainder 11 → hex "eb" (where 10=a, 11=b, 12=c, 13=d, 14=e, 15=f).

The conversion from RGB to HSL is more involved — it requires finding the maximum and minimum of the three RGB values, calculating lightness (the midpoint between max and min), saturation (the range relative to lightness), and hue (which primary color the value is closest to, mapped to a 0–360 degree angle). The Color Code Converter does all of this instantly, but understanding the math helps you predict how colors change when you adjust each parameter.

The HSL perceptual trap — why lightness is not brightness

A common trap in HSL is assuming that equal lightness values produce colors that look equally bright. Pure blue at lightness 50 percent (hsl(240, 100%, 50%)) looks noticeably darker than pure yellow at the same lightness (hsl(60, 100%, 50%)). This is because the human eye's sensitivity varies by wavelength — we perceive green and yellow as brighter than blue and purple at the same measured luminance.

The HSL model treats hue channels uniformly, which makes it mathematically elegant but perceptually misleading. For accessible design, rely on luminance contrast rather than HSL lightness alone. The WCAG contrast ratio formula uses relative luminance calculated from the sRGB color space — not HSL values. Practical rule: if you raise lightness to 50% and the text is still hard to read on a white background, it is not a failure of HSL but a perceptual mismatch. Use the contrast-checking features of the Color Converter to verify actual readability.

WCAG accessibility and color — contrast ratios, APCA, and simulation tools

Accessible color design starts with sufficient contrast. The WCAG 2.1 AA standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). AAA level requires 7:1 and 4.5:1 respectively. These ratios are calculated from the relative luminance of foreground and background colors — not from their perceived brightness.

The upcoming WCAG 3.0 introduces APCA (Accessible Perceptual Contrast Algorithm), which replaces the simple ratio with a perceptually uniform contrast metric. APCA accounts for font size, font weight, and color context more accurately than the current formula. To future-proof your designs, target APCA values of 90+ for body text and 75+ for large text. Use the Color Converter to test both current WCAG ratios and APCA values. Additionally, simulate color blindness (deuteranopia, protanopia, tritanopia) to ensure your color scheme communicates information through contrast, not just hue — the Color Blindness Simulator helps with this.

CSS variable management — building a maintainable color system with HSL

HSL is the superior format for CSS custom properties because you can derive an entire palette from a few base variables. Define primary hue as a custom property: --primary-h: 240; then generate variants: --primary-500: hsl(var(--primary-h), 80%, 50%); --primary-300: hsl(var(--primary-h), 70%, 70%); --primary-700: hsl(var(--primary-h), 90%, 30%). Changing one number — the hue — shifts your entire brand color system.

This technique enables programmatic theming. A dark mode toggle can invert lightness with a single CSS rule: [data-theme='dark'] { --bg-lightness: 15%; --text-lightness: 85%; }. Component backgrounds use calc() against these variables, adapting automatically without redeclaring every color. The Color Palette Generator outputs HSL values ready for CSS variable use, with consistent saturation across all shades.

Explore all 109 free tools at toolstand.io. Free, forever. No sign-up. No download. Just tools that work.