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

The Formula

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.

Variable Definitions

How to Use This Calculator

1. 1

   Select your input format from the dropdown: HEX → RGB/HSL, RGB → HEX/HSL, or HSL → HEX/RGB.

2. 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. 3

   The calculator instantly displays the converted color in all three formats: the hex code, RGB notation, and HSL notation.

4. 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 Applications

• 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.

RGB uses additive mixing of three channels (0-255 each). HSL uses a cylindrical coordinate system: hue (angle), saturation (radius), lightness (height).

Understanding the Concept

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

Sources & References