Understanding Color Models: Hex, RGB, HSL Explained

Colors on the web can be represented in multiple formats: hexadecimal, RGB, HSL, and others. Each format has different purposes and advantages. Web designers often use hex colors, developers work with RGB, and designers creating dynamic color systems prefer HSL. Understanding these formats helps you work more effectively with color, debug color issues, and make informed decisions about which format to use. This guide explains the three most important color models and when to use each.

Hexadecimal Color Format (Hex)

Hex colors are the most common format in web design. A hex color consists of a hash symbol (#) followed by six hexadecimal digits (0-9, A-F). #FF0000 represents pure red, #00FF00 is green, and #0000FF is blue. The format divides into three pairs: the first two digits control red intensity, the next two control green, and the last two control blue.

Each pair represents a value from 0-255 in decimal, or 00-FF in hexadecimal. FF (255 in decimal) means maximum intensity. 00 means no intensity. #808080 is medium gray because equal amounts of red (80 hex = 128 decimal), green, and blue create neutral gray.

Hex colors can be shortened if both digits in each pair are identical. #FF0000 shortens to #F00. #FFFFFF shortens to #FFF. This shorthand doesn't work if digits differ (like #F10000 can't be shortened). Hex colors are popular because they're concise and fit well in code, but the format isn't intuitive for humans to understand or manipulate.

RGB Color Format

RGB stands for Red, Green, Blue. The format is rgb(red, green, blue) where each value ranges from 0 to 255. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, rgb(0, 0, 255) is blue. You can also use percentages: rgb(100%, 0%, 0%) is red.

RGB is more intuitive than hex because the numbers are decimal (0-255) instead of hexadecimal. You can easily see that rgb(255, 128, 0) is orange because it has maximum red, medium green, and no blue. CSS supports both RGB and RGBA formats. RGBA adds an alpha channel (transparency) as a fourth value: rgba(255, 0, 0, 0.5) is semi-transparent red with 50% opacity.

RGB matches how computer screens actually work. Screens emit light through red, green, and blue subpixels. Mixing different intensities creates all visible colors. However, RGB isn't intuitive for designers working with actual colors. You can't easily make a color "10% more saturated" or "20% lighter" using RGB values.

HSL Color Format

HSL stands for Hue, Saturation, Lightness. This format is far more intuitive for designers because it maps to how humans perceive color. Hue ranges from 0-360 degrees on the color wheel. 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red again. Saturation ranges from 0-100%, where 0% is completely desaturated (gray) and 100% is fully saturated color. Lightness ranges from 0-100%, where 0% is black, 50% is normal color, and 100% is white.

The format is hsl(hue, saturation%, lightness%). hsl(0, 100%, 50%) is pure red. hsl(0, 100%, 25%) is dark red. hsl(0, 100%, 75%) is light red (pink). hsl(0, 50%, 50%) is desaturated red (muted red). HSL makes it obvious how to create color variations. You can increase lightness for lighter shades, decrease saturation for muted versions, and change hue to get different colors entirely.

HSL also supports alpha transparency: hsla(0, 100%, 50%, 0.5) is semi-transparent red. HSL is perfect for design systems and dynamic color generation. You can programmatically adjust colors by modifying saturation or lightness without understanding the underlying RGB mixing.

Comparing the Three Formats

Aspect	Hex	RGB	HSL
Format	#RRGGBB	rgb(r, g, b)	hsl(h, s%, l%)
Intuitiveness	Not intuitive	Moderate	Most intuitive
Best Use	Code, stylesheets	Canvas, WebGL	Design systems
Transparency	#RRGGBBAA (newer)	rgba()	hsla()
Shorthand	#RGB possible	No	No

Converting Between Formats

Hex to RGB conversion is straightforward. The first two hex digits convert to decimal for red. The next two convert to decimal for green. The last two convert to decimal for blue. #FF0000 is F=15, F=15 in the first pair, which equals 15×16+15=255 for red, then 00=0 for green, 00=0 for blue. Result: rgb(255, 0, 0).

RGB to HSL conversion is more complex mathematically but easily handled by code. Find the maximum and minimum of the RGB values, calculate hue based on which is max, saturation based on the range, and lightness based on the average. Fortunately, all modern languages and online tools handle these conversions automatically. You rarely need to calculate manually.