Understanding Color Codes: HEX, RGB, and HSL for Beginners

How Digital Colors Work

Every pixel on your screen produces color by mixing three lights: red, green, and blue. By varying the intensity of each from 0 to 255, your screen can display over 16 million colors. HEX, RGB, and HSL are just different ways to describe these color mixtures.

RGB: The Direct Approach

RGB stands for Red, Green, Blue. Each channel accepts a value from 0 to 255.

color: rgb(255, 0, 0);      /* Pure red */
color: rgb(0, 128, 0);      /* Medium green */
color: rgb(52, 152, 219);   /* Sky blue */
color: rgba(0, 0, 0, 0.5);  /* 50% transparent black */

HEX: The Compact Notation

HEX codes represent RGB values using hexadecimal numbers. Instead of three decimal numbers, you get six hex characters.

color: #FF0000;    /* Pure red */
color: #3498DB;    /* Sky blue */
color: #F00;       /* Shorthand for #FF0000 */

HSL: The Human-Friendly Format

HSL stands for Hue, Saturation, Lightness. Unlike RGB and HEX, HSL describes colors the way humans think about them.

• Hue (0-360): The color itself on a color wheel. 0=red, 120=green, 240=blue.
• Saturation (0-100%): How vivid. 100% is fully vivid, 0% is gray.
• Lightness (0-100%): How bright. 0% is black, 50% is pure color, 100% is white.

color: hsl(0, 100%, 50%);      /* Pure red */
color: hsl(200, 80%, 50%);     /* Base blue */
color: hsl(200, 80%, 60%);     /* Lighter blue */
color: hsl(200, 80%, 40%);     /* Darker blue */
color: hsl(200, 40%, 50%);     /* Muted blue */

The power of HSL is that adjusting a color is intuitive. Want darker? Decrease lightness. Want muted? Decrease saturation. You cannot do this easily with RGB or HEX.

When to Use Each Format

Convert Between Formats