What Are HEX Color Codes?
A HEX color code is a six-digit string that represents a color in web design. It starts with a hash (#) followed by six characters — numbers 0-9 and letters A through F. Each pair of characters represents the intensity of one of three color channels: red, green, and blue. The format was popularized by HTML and CSS because it's compact, copy-paste friendly, and universally understood by browsers.
The beauty of HEX codes is their compactness. Where RGB needs rgb(234, 88, 12) to describe a color, HEX reduces it to #EA580C. For designers who work in CSS constantly, these short codes become second nature.
What Is RGB Color?
RGB stands for Red, Green, Blue — the three wavelengths of light that screens use to create all colors. Unlike paint (which mixes subtractively — more color means darker), screens mix light additively: combining all three colors at full intensity produces white. Each channel ranges from 0 (none of that color) to 255 (maximum intensity of that color).
RGB values are more human-readable because you can intuit the color: high red + medium green + low blue creates an orange-ish tone. This makes RGB useful when you're trying to fine-tune a color by adjusting individual channels. Designers often prefer the RGB percentage notation: rgb(92%, 35%, 5%) — seeing percentages can feel more intuitive than raw numbers.
Converting HEX to RGB
The conversion is straightforward. Take the HEX code and split it into three pairs: the first two characters are red, the next two are green, the last two are blue. Convert each pair from base-16 (hexadecimal) to base-10 (decimal).
Example: #EA580C. EA (hex) = 234 (decimal, red). 58 (hex) = 88 (decimal, green). 0C (hex) = 12 (decimal, blue). Result: rgb(234, 88, 12).
Going reverse (RGB to HEX): divide each decimal number by 16, keep the integer result as the first hex digit, and use the remainder for the second. A converter handles this instantly — but knowing the math helps when debugging.
Alpha Channels: RGBA and 8-Digit HEX
Standard HEX codes describe fully opaque colors. For transparency, CSS offers two paths. RGBA adds a fourth parameter: rgba(234, 88, 12, 0.5) where the last number is opacity from 0 to 1. Alternatively, 8-digit HEX appends two more hex characters for alpha: #EA580C80 where 80 represents approximately 50% opacity. Both are valid and equivalent — the choice is stylistic.
When to Use HEX vs RGB
Use HEX when you want compactness and readability in your CSS files. HEX codes are shorter, look cleaner in code, and are the standard in many design systems and component libraries.
Use RGB when you're adjusting colors programmatically, working with alpha transparency, or when the extra readability helps during debugging. Some CSS animation and filter properties work more naturally with RGB values. In general, pick whichever format you read more naturally and switch when the situation calls for it.
CSS Variables and Color Management
Modern design systems store colors as CSS custom properties: --primary: #EA580C or --primary: rgb(234, 88, 12). Either works in custom properties. The key advantage: define your color once and reference it throughout your stylesheet. If you need to adjust the primary color across your entire site, change one line. This also makes it easy to support dark mode — redefine color variables for a dark theme without touching component CSS.