Color Codes for Developers: HEX, RGB, and HSL Explained

Three Color Systems for the Web

Web developers work with three primary color notation systems: HEX, RGB, and HSL. Each represents the same colors but using different models, and each has advantages in different contexts. Understanding all three makes you more efficient at writing CSS, collaborating with designers, and debugging visual issues.

HEX Color Codes

HEX codes represent colors as six hexadecimal digits prefixed with #. The six digits are three pairs: the first pair represents red, the second green, and the third blue. Each pair ranges from 00 (none) to FF (maximum intensity).

For example, #FF0000 is pure red (maximum red, no green, no blue), #00FF00 is pure green, and #0000FF is pure blue. #FFFFFF is white (all channels at maximum), and #000000 is black (all channels off). #808080 is a medium gray.

HEX codes can be shortened to three digits when each pair consists of repeated characters: #FF6600 becomes #F60, and #AABBCC becomes #ABC. An optional fourth pair represents alpha (transparency): #FF000080 is 50% transparent red.

HEX is the most traditional and compact notation. It is widely supported in CSS, design tools, and color pickers.

RGB Color Codes

RGB notation uses the format rgb(red, green, blue), where each value ranges from 0 to 255. The same pure red in RGB is rgb(255, 0, 0). A medium gray is rgb(128, 128, 128).

RGB makes it easy to understand color composition and perform arithmetic. Increasing the red value makes the color warmer; increasing all three values equally produces lighter grays. Modern CSS also supports rgba() for transparency: rgba(255, 0, 0, 0.5) is 50% transparent red.

The newer CSS Color Level 4 syntax uses rgb(255 0 0 / 50%) with spaces instead of commas and a slash for alpha, simplifying the syntax.

HSL Color Codes

HSL stands for Hue, Saturation, Lightness. The format is hsl(hue, saturation%, lightness%). Hue is an angle from 0 to 360 on the color wheel (0/360 = red, 120 = green, 240 = blue). Saturation ranges from 0% (gray) to 100% (full color). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure color.

HSL is the most intuitive system for human understanding. Need a lighter shade? Increase lightness. Need a more muted tone? Decrease saturation. Need a different color entirely? Change the hue. This predictability makes HSL ideal for creating color palettes and theme variations programmatically.

For example, hsl(0, 100%, 50%) is pure red. Changing lightness to 75% produces a light pink. Changing saturation to 30% produces a muted grayish-red.

Converting Between Formats

HEX and RGB are mathematically equivalent: each HEX pair is the hexadecimal representation of the RGB decimal value. FF in hex = 255 in decimal. Converting between them is straightforward arithmetic.

HSL to RGB conversion is more complex, involving trigonometric calculations based on the hue angle. In practice, you rarely need to convert manually because CSS supports all three formats natively, and design tools display all three simultaneously.

When collaborating with designers, they may provide HEX codes from Figma or Sketch. When building design systems, HSL often works best for generating consistent color scales. When debugging, RGB values may be clearest for understanding what the browser is actually rendering.

Use the color tools on CalcHub to convert between HEX, RGB, and HSL, or explore our developer tools for CSS utilities.

Convert and explore colors with CalcHub’s color tools.