When I first started building websites, color codes looked like random strings of letters and numbers. I remember copying #FF5733 from a tutorial without understanding what those characters meant or why they produced an orange shade. If you are in that same spot right now, this guide will make everything click.
Web colors boil down to three systems, and each one describes the same color differently. Think of it like temperature — you can say 100 degrees Fahrenheit or 37.8 Celsius, and both refer to the same heat. Color codes work the same way. The three systems you need to learn are HEX, RGB, and HSL.
HEX Codes: The Web Standard
HEX is short for hexadecimal, a base-16 number system. A HEX color code starts with a # symbol followed by six characters split into three pairs. The first pair represents red, second is green, third is blue. Each pair ranges from 00 (zero intensity) to FF (full intensity). So #FF0000 means maximum red, no green, no blue — pure red on your screen.
Here is what tripped me up early on: letters A through F are just numbers in disguise. In hexadecimal, A equals 10, B equals 11, up to F which equals 15. A hex pair like 3D converts to 3 times 16 plus 13, equaling 61 in decimal. You never need to do this math yourself — color picker tools handle it — but knowing the logic helps you understand why #000000 is black and #FFFFFF is white.
HEX became the default web format because it is compact. Six characters can represent any of 16.7 million colors, every browser supports it, every design tool exports it, and every CSS tutorial uses it. When a client sends brand guidelines, colors are almost always listed in HEX.
RGB: Thinking in Light
RGB stands for Red, Green, Blue and uses three regular numbers from 0 to 255. The CSS syntax is rgb(255, 87, 51), producing the exact same burnt orange as #FF5733. I find RGB more intuitive for tweaking — seeing rgb(50, 100, 220) makes it obvious that reducing the third number dims the blue channel.
RGB also unlocks transparency through its RGBA variant. Adding a fourth number between 0 and 1 controls opacity: rgba(255, 87, 51, 0.5) gives you that orange at half transparency. This is incredibly useful for overlays, glass effects, and layered designs.
HSL: The Human-Friendly Format
HSL describes color through Hue, Saturation, and Lightness. Hue is a position on the color wheel (0 is red, 120 green, 240 blue). Saturation controls vividness. Lightness controls brightness. The real power shows up when creating variations — your brand blue at hsl(217, 91%, 60%) becomes a light background at 95% lightness and a dark hover state at 40% lightness, all clearly in the same family.
Which One Should You Actually Use?
Use HEX for CSS variable definitions, HSL when calculating lighter or darker variations, and RGBA when you need transparency. Define your palette as custom properties like :root { --brand: #4A90D9; --text: #1F2937; } and reference them everywhere. That single practice will save you from the most common beginner mistake: inconsistent colors scattered across your stylesheets.