CSS gives you multiple ways to define colors, and each format has a specific strength. Knowing when to use which format is the difference between clean, maintainable stylesheets and a tangled mess of inconsistent color values spread across dozens of files.
HEX: The Compact Standard
HEX codes like #3DAF73 are the most widely used CSS color format. Six characters define any of 16.7 million colors. They work in every CSS property that accepts a color value — color, background-color, border-color, box-shadow, and more. HEX is compact, universally supported, and the default export format for virtually every design tool. Three-character shorthand is available for repeated-digit codes: #FFF equals #FFFFFF.
RGB and RGBA: For Transparency
RGB breaks color into explicit red, green, blue channels: rgb(61, 175, 115). The format's killer feature is RGBA, which adds an alpha channel for transparency: rgba(61, 175, 115, 0.5). This is essential for overlay backgrounds, semi-transparent borders, layered shadows, and glass morphism effects. While HEX technically supports 8-digit transparency codes, RGBA remains the more readable and widely used approach.
HSL: For Human Manipulation
HSL describes color through hue, saturation, and lightness: hsl(148, 48%, 46%). Hue is a degree on the color wheel (0-360), saturation is intensity (0-100%), lightness is brightness (0-100%). HSL's strength is intuitive manipulation — creating a lighter version means increasing lightness, creating a muted version means decreasing saturation. You can build an entire shade scale by adjusting one number while keeping the other two constant. For generating color variations programmatically, HSL is significantly more practical than HEX or RGB.
Named Colors and Modern Functions
CSS supports 147 named colors like tomato, steelblue, and cornflowerblue. Useful for quick prototyping but imprecise for production — tomato is specifically #FF6347, which is rarely the exact shade you want. In production code, explicit HEX or RGB values give you control that named colors cannot.
Modern CSS introduces powerful new options. The oklch() function provides perceptually uniform color manipulation — two colors with the same lightness value in oklch actually look equally bright to human eyes, unlike HSL where perceived brightness varies across hues. The color-mix() function blends two colors directly in CSS without precalculating intermediate values. Browser support for both is solid in 2026 and expanding.
Best Practice
Define your palette using CSS custom properties with HEX values. Reference these variables throughout your stylesheet. Switch to RGBA when you need transparency in specific rules. Use HSL when generating color scales programmatically. This layered approach keeps your color system centralized, readable, and easy to update when the brand evolves.