HEX to RGB and HSL: How Digital Color Codes Work Under the Hood with Conversion Formulas

In web development and graphic design, color is expressed in multiple formats: #0F766E, rgb(15, 118, 110), or hsl(175, 77%, 26%). To a computer monitor, all three notations represent the exact same teal hue. But to a developer or designer, each format serves a distinct purpose.

HEX notation is compact and universal. RGB maps directly to the physical red, green, and blue sub-pixels of LED displays. HSL organizes colors intuitively according to human visual perception, making it the preferred choice for building dynamic CSS design systems and dark-mode themes.

This guide explains the underlying binary mathematics of HEX codes, details the conversion formulas between RGB and HSL, and provides CSS best practices for modern design systems. You can convert color values and inspect accessibility contrast in real time using Synctoolo's free Color Converter and Color Picker.

The Hexadecimal System: Decoding HEX Color Codes

A standard 6-character HEX color code (e.g. #2A6496) is simply a compact base-16 representation of 3 byte values (Red, Green, Blue). In hexadecimal, counting runs from 0 through 15 using numerals 0-9 followed by letters A through F (where A=10, B=11, C=12, D=13, E=14, and F=15).

A 6-digit HEX code splits into three two-character pairs:

# R R G G B B
# 2 A 6 4 9 6

Red Channel:   2A (Hex) = (2 * 16^1) + (10 * 16^0) = 32 + 10 = 42 (Decimal)
Green Channel: 64 (Hex) = (6 * 16^1) + (4 * 16^0)  = 96 + 4  = 100 (Decimal)
Blue Channel:  96 (Hex) = (9 * 16^1) + (6 * 16^0)  = 144 + 6 = 150 (Decimal)

Resulting Decimal RGB: rgb(42, 100, 150)

Because each two-digit hexadecimal channel represents 8 bits of color depth (2^8 = 256 possible shades per channel from 0 to 255), standard 24-bit Truecolor yields 16,777,216 distinct color permutations (256 * 256 * 256).

Why HSL Is Superior for UI Design Systems

While RGB and HEX are ideal for machine hardware, they are unintuitive for human designers. If you have the color rgb(42, 100, 150) and want to create a hover state that is 15% lighter, which numbers should you change? In RGB, you must modify all three channels simultaneously, risking an accidental hue shift.

HSL (Hue, Saturation, Lightness) solves this by mapping colors onto cylindrical coordinates:

• Hue (0 to 360 degrees): The base color angle on the color wheel (0 = Red, 120 = Green, 240 = Blue, 360 = Red).
• Saturation (0% to 100%): The intensity or purity of the color (0% = completely gray, 100% = pure vibrant pigment).
• Lightness (0% to 100%): The amount of white or black mixed in (0% = pure black, 50% = normal color, 100% = pure white).

The RGB to HSL Mathematical Algorithm

To convert normalized RGB values (r, g, b between 0 and 1) to HSL coordinates:

1. Find the maximum and minimum values: max = max(r, g, b), min = min(r, g, b).
2. Calculate Lightness: L = (max + min) / 2.
3. If max == min, Saturation is 0% (achromatic gray).
4. Otherwise, Saturation is: S = (max - min) / (1 - |2L - 1|).
5. Calculate Hue based on which channel was the maximum value:
   • If Red is max: H = 60 * [((g - b) / (max - min)) % 6]
   • If Green is max: H = 60 * [((b - r) / (max - min)) + 2]
   • If Blue is max: H = 60 * [((r - g) / (max - min)) + 4]

Convert and inspect colors across HEX, RGB, HSL, and OKLCH in real time using Synctoolo's free Color Converter and pick palette shades with our Color Picker.