HTML Color Codes Explained: HEX, RGB, HSL & Beyond

HEX Color Codes

HEX (hexadecimal) is the most widely used color format on the web. A HEX code starts with a hash symbol (#) followed by six characters representing the red, green, and blue channels. Each channel uses two hexadecimal digits (00–FF), giving 256 levels per channel and over 16 million possible colors.

Shorthand HEX

When each channel's two digits are identical, you can shorten the code to three characters. For example, #FF0000 becomes #F00, and #AABBCC becomes #ABC. This only works when each pair is a repeated digit.

8-digit HEX (with alpha)

Modern browsers support 8-digit HEX codes where the last two digits represent alpha (transparency). 00 is fully transparent, FF is fully opaque. A 4-digit shorthand version also exists.

RGB & RGBA

RGB defines colors using decimal values for red, green, and blue — each ranging from 0 to 255. It's functionally equivalent to HEX but uses decimal numbers, which many developers find more intuitive when adjusting individual channels.

RGBA adds a fourth value for alpha transparency, ranging from 0 (fully transparent) to 1 (fully opaque). This is the most common way to specify semi-transparent colors in CSS.

In modern CSS, you can also use the space-separated syntax without the "a" suffix: rgb(255 107 107 / 0.5). This newer syntax works in all current browsers.

HSL & HSLA

HSL stands for Hue, Saturation, and Lightness. Unlike RGB and HEX, which describe colors in terms of hardware (how much red, green, and blue light to emit), HSL describes colors the way humans think about them — what shade, how vivid, and how bright.

Hue is an angle on the color wheel (0–360 degrees): 0° is red, 120° is green, 240° is blue. Saturation ranges from 0% (gray) to 100% (full color). Lightness ranges from 0% (black) through 50% (pure color) to 100% (white).

HSL's biggest advantage is predictability. Want a darker version of a color? Decrease lightness. Want a pastel? Reduce saturation. Want a complementary color? Add 180° to the hue. These operations are intuitive in HSL but require calculation in RGB or HEX.

Building color scales with HSL

HSL makes it straightforward to create consistent color scales for design systems. Keep the hue and saturation constant, then vary lightness to create shades and tints:

CSS Named Colors

CSS defines 148 named colors that you can use instead of numeric codes. These range from obvious ones like red, blue, and white to more specific names like cornflowerblue, papayawhip, and rebeccapurple.

Named colors are useful for prototyping and debugging but rarely appear in production code. They lack precision — you can't fine-tune them — and they don't cover enough of the color space for real design work. The exceptions are transparent (equivalent to rgba(0,0,0,0)) and currentColor (inherits the element's text color), which are both widely used in production.

Modern Color Functions

CSS Color Level 4 introduced new color functions that provide access to wider color gamuts and more perceptually uniform color spaces.

oklch() and oklab()

OKLCH is a perceptually uniform color space — meaning that equal numeric changes produce equal visual changes. In HSL, changing lightness by 10% can produce wildly different perceived brightness depending on the hue. OKLCH fixes this.

OKLCH is increasingly recommended for design systems because it produces more consistent color scales across different hues. Browser support is strong across all major engines.

Which Format to Use

For most projects, the best approach is to pick one primary format and use it consistently. HEX is the most compact and universally understood — it's the standard in design tools like Figma. HSL is the best choice when you need to programmatically generate color variations (scales, palettes). RGBA is essential anywhere you need transparency. OKLCH is the forward-looking choice for design systems that need perceptual uniformity.

In practice, most codebases use a mix: HEX for solid brand colors defined in variables, RGBA for overlays and shadows, and HSL when building dynamic color scales.

Converting Between Formats

Converting between color formats involves mathematical transformations. HEX to RGB is straightforward — each pair of hex digits converts to a decimal 0–255 value. RGB to HSL requires calculating the hue from the relative values of R, G, and B, which is more complex.

Rather than converting manually, use the Ultimate Design Tools Color Converter to instantly convert between HEX, RGB, HSL, HSB, and CMYK. Paste any color code and get all formats simultaneously.

Transparency & Opacity

There are two ways to make an element semi-transparent in CSS: the opacity property and alpha-channel color values. They behave differently. The opacity property affects the entire element and all its children — text, borders, backgrounds, everything becomes transparent together.

Alpha-channel color values (RGBA, HSLA, 8-digit HEX) only affect the specific property where they're used. A background set to rgba(0,0,0,0.5) will be semi-transparent while the text on top remains fully opaque. This is why RGBA is preferred over opacity for backgrounds and overlays.

CSS Custom Properties for Colors

CSS custom properties (variables) are the best way to manage colors in any project. Define your palette once in the root selector, then reference it throughout your stylesheet. This creates a single source of truth that's easy to update.

For theme switching (light/dark mode), redefine the same variable names under different selectors. The entire UI updates automatically because every element references the variable, not a hardcoded value.

Color Tools & Resources

Ultimate Design Tools offers several free color tools to help with every aspect of working with color codes. The Color Converter handles format conversions. The Contrast Checker tests WCAG accessibility. The Palette Generator creates harmonious color schemes. The Color Picker extracts colors from uploaded images. And the Color Blindness Simulator shows how your colors appear to people with color vision deficiency.