Color Converter — HEX, RGB, and HSL Color Code Conversion

How Color Converter Works

HEX → RGB: Parse hex string, R = int(pair[0],16), G = int(pair[1],16), B = int(pair[2],16) | RGB → HSL: Normalize to [0,1]; H determined by dominant channel; S = Δ/(1-|2L-1|); L = (max+min)/2 | HSL → RGB: Q = L<0.5 ? L×(1+S) : L+S-L×S; P = 2L-Q; hue2rgb(P,Q,t) interpolates the six hue sectors

Color conversion between HEX, RGB, and HSL involves mathematical transformations between three different coordinate systems. HEX is a base-16 encoding of the three RGB channels, making the conversion between HEX and RGB a simple radix change. Converting between RGB and HSL is more involved: RGB values are normalized to the 0-1 range, then luminance L is calculated as the midpoint between the brightest and dimmest channel. Saturation measures how far the color is from gray, computed from the range of the three channels divided by the distance from the luminance to the nearest edge. Hue is determined by which primary channel dominates and the relative strength of the other two, giving an angle on the color wheel. The reverse HSL-to-RGB conversion decomposes the hue angle into one of six sectors, computes chroma and lightness offsets, and produces the final RGB values through the hue2rgb interpolation function.

HEX (#RRGGBB)

Hexadecimal Color Code — A six-character base-16 encoding of RGB values. Each pair of hexadecimal digits (00-FF) represents one channel intensity. Widely used in HTML, CSS, and web development for its compact representation.

RGB (0-255)

RGB Additive Channels — Three channel values (Red, Green, Blue) each ranging from 0 to 255. This additive color model combines light at different intensities to produce the visible spectrum on digital displays.

HSL (H°, S%, L%)

Hue, Saturation, Lightness — A cylindrical coordinate system where Hue (0-360°) is the angle on the color wheel, Saturation (0-100%) controls color purity, and Lightness (0-100%) controls brightness from black to white.

Δ (Delta)

Channel Range — The difference between the maximum and minimum RGB values after normalization. Used in the RGB-to-HSL conversion to determine saturation and help identify the dominant hue sector.

How to Use

1. Select your input format from the dropdown: HEX → RGB/HSL, RGB → HEX/HSL, or HSL → HEX/RGB.
2. Enter your color value in the fields shown for that mode — a hex code like #FF0000, RGB values (0-255 each), or HSL values (hue 0-360, saturation and lightness 0-100).
3. The calculator instantly displays the converted color in all three formats: the hex code, RGB notation, and HSL notation.
4. Use the results to copy any format into your CSS, design tool, or code editor — all three representations describe the exact same color.

Quick Reference

Common Uses

• •Converting CSS color values between HEX, RGB, and HSL for front-end web development and styling.
• •Understanding color properties in graphic design tools like Figma, Photoshop, and Sketch that use different color models.
• •Building accessible color systems by adjusting HSL lightness and saturation independently for WCAG contrast compliance.
• •Debugging color values from APIs or design tokens that use different formats across platforms.
• •Interoperability between web development, mobile app development, and print design that each favor different color representations.

Understanding the Result

Color representation is fundamental to digital design and web development. Three color models dominate: HEX, RGB, and HSL. The HEX color code is a base-16 (hexadecimal) encoding of RGB values, where each pair of hex digits (00-FF, or 0-255 in decimal) represents the intensity of one of the three additive channels: Red, Green, and Blue. HEX is compact (six characters) and is the standard format in HTML and CSS for defining colors. RGB (Red, Green, Blue) is an additive color model where light is emitted to create color. The absence of all three channels yields black, and full intensity of all three yields white. This model is native to computer monitors, phone screens, and any display that emits light. It is a cube-based coordinate system with three axes ranging from 0 to 255. HSL (Hue, Saturation, Lightness) provides an alternative coordinate system that maps more naturally to human color perception. Instead of mixing three channel intensities, HSL separates color into three perceptual attributes: hue determines the base wavelength (the angle on a color wheel from 0° red through 120° green and 240° blue back to 360° red), saturation controls the intensity or purity of the color (from gray at 0% to fully vivid at 100%), and lightness controls the brightness (from black at 0% through the pure color at 50% to white at 100%). Converting between these models requires understanding their different geometric representations. HEX-to-RGB is a straightforward base conversion. RGB-to-HSL requires calculating luminance, saturation index, and hue angle through conditional logic based on which channel dominates. HSL-to-RGB reverses this by decomposing the hue into one of six 60-degree sectors, computing intermediate chroma values, and offsetting by lightness. The hue2rgb interpolation function is the key to this conversion: it takes a pair of pivot points (p and q) derived from saturation and lightness, then calculates the contribution of a given normalized hue coordinate within a six-sector color wheel. This mathematical framework allows seamless and bidirectional conversion between all three formats, enabling developers and designers to work in whichever color model best suits their task.

Frequently Asked Questions

What is the difference between HEX and RGB if they represent the same colors?

HEX and RGB encode the exact same 24-bit color space — there is no difference in the colors they can represent. The only difference is notation: HEX uses base-16 (hexadecimal) with two digits per channel (#FF0000), while RGB uses base-10 decimal notation with values 0-255 (rgb(255, 0, 0)). HEX is more compact (7 characters vs. 12+ characters) and is the historical standard in HTML and CSS. RGB notation became popular in CSS3 and is sometimes preferred for its decimal readability. They convert losslessly in both directions.

Why does HSL make it easier to create color schemes than RGB?

HSL separates color into Hue (the base color), Saturation (purity), and Lightness (brightness), which aligns with how humans describe and reason about color. In RGB, creating a complementary color scheme requires unintuitive math: to find red’s complement, you subtract each channel from 255 (cyan = rgb(0, 255, 255)). In HSL, you simply add or subtract 180 from the hue. A monochromatic scheme means keeping hue constant and varying saturation and lightness — trivially easy in HSL but requiring complex logic in RGB.

Is there any data loss when converting between color models?

HEX-to-RGB conversion is lossless because both formats represent the same 24-bit color space (16.7 million colors). However, conversions involving HSL may introduce minor rounding errors. HSL is a continuous cylindrical coordinate system, and converting to discrete 8-bit RGB values (0-255 per channel) requires rounding. When round-tripping RGB → HSL → RGB, you may occasionally see a difference of ±1 in one or two channels. This is visually imperceptible and is considered normal in all color conversion software.

Can I use HSL in CSS, and what does the syntax look like?

Yes, modern CSS fully supports HSL colors with the hsl() and hsla() functions. The syntax is: hsl(hue, saturation%, lightness%) where hue is 0-360, saturation is 0-100%, and lightness is 0-100%. For example, hsl(0, 100%, 50%) produces pure red. CSS Color Module Level 4 also supports hsla() with an alpha channel and newer color spaces like LCH (perceptually uniform) and OKLCH, which offer even better interpolation for gradients.

Sources

• MDN Web Docs — CSS Color Values
• Wikipedia — HSL and HSV