Understanding Color Formats in Web Design

Colors on a computer monitor are generated by mixing Light. Depending on whether you are designing an interface, writing CSS, or communicating with a human, different formats are used to describe exactly how that light should mix.

1. What is HEX? (Hexadecimal)

A HEX code is a 6-digit string (e.g., #FF5733) that is the absolute standard for web design. It is simply an RGB value written in Base-16 math. The first two characters represent Red, the middle two represent Green, and the last two represent Blue. Because it is compact and easy to copy-paste, it is the most common way designers hand off colors to developers.

2. What is RGB? (Red, Green, Blue)

RGB relates directly to the physical hardware of your screen. Every pixel on your monitor has a tiny Red, Green, and Blue light. The RGB format tells the monitor exactly how bright to shine each of those three lights on a scale from 0 (off) to 255 (maximum brightness). Mixing them all at 255 creates pure white light.

3. What is HSL? (Hue, Saturation, Lightness)

While machines love RGB, it is incredibly difficult for humans to read. (Quick: What color is rgb(150, 40, 200)?). This is why HSL was created. It maps color to human perception:

• Hue (0-360): A degree on the color wheel. 0 is Red, 120 is Green, 240 is Blue.
• Saturation (0-100%): How intense the color is. 0% is gray, 100% is vibrant.
• Lightness (0-100%): How bright it is. 0% is black, 50% is normal, 100% is white.

Pro Tip: Modern CSS developers heavily prefer HSL because creating hover states or dark modes is as easy as lowering the 'Lightness' value by 10%.