Using Color Codes in Custom CSS

Named colors are the simplest option—just type the word for a color and the browser will display it. These are “web safe” because they work across all major browsers, but they’re limited to a fixed list of 140+ names. They’re great for quick tests or when you just need a basic shade.

Hexadecimal (hex) codes are the most common way to write colors in CSS. They start with a # followed by six letters or numbers, representing red, green, and blue values. Hex codes are the best choice when you want an exact match for your brand colors.

RGB stands for Red, Green, Blue. Each color is defined by three numbers ranging from 0 to 255, which combine to create the exact shade you want. RGB is handy when you like working with numbers and want to fine-tune your colors mathematically.

RGBA works just like RGB but adds a fourth value: the alpha channel. This number (between 0 and 1) controls transparency, letting you make colors lighter or see-through. RGBA is perfect for overlays, highlights, and backgrounds where you want to keep text readable.

HSL stands for Hue, Saturation, and Lightness, and it’s one of the most intuitive ways to control color. Hue sets the base color (0 = red, 120 = green, 240 = blue), while saturation and lightness let you control how vivid or dark it looks. It’s fantastic for adjusting tints and shades without memorizing new codes.

HSLA is the same as HSL, but with an alpha channel for adjusting transparency. This gives you full control over hue, saturation, and brightness, plus how visible or faded the color should be. It’s great for subtle effects, layering, and maintaining brand colors in flexible designs.