RGB vs Hex Color Codes — Complete Guide

RGB vs Hex: Everything You Need to Know About Color Codes

If you work with CSS, design software, or any digital media, you encounter color codes constantly. Two of the most common formats are RGB (Red, Green, Blue) and Hex (hexadecimal). A common source of confusion is that many people treat these as different colors — but they are not. RGB and Hex are two different ways to write the exact same color information. Understanding how they work, how to convert between them, and when each is most appropriate will make you a more effective designer and developer.

What Is RGB?

RGB stands for Red, Green, Blue — the three primary colors of light. Computer screens emit light, so they use an additive color model where combining red, green, and blue light at full intensity produces white, and removing all light produces black.

In the RGB format, each color channel is represented by a decimal number from 0 (no contribution) to 255 (maximum contribution). The notation is: rgb(red, green, blue). For example:

• rgb(255, 0, 0) — pure red
• rgb(0, 255, 0) — pure green
• rgb(0, 0, 255) — pure blue
• rgb(255, 255, 255) — white
• rgb(0, 0, 0) — black
• rgb(59, 130, 246) — a medium blue (Tailwind's blue-500)

With 256 possible values for each of three channels, RGB can represent 256 x 256 x 256 = 16,777,216 distinct colors — commonly called "16.7 million colors" or "24-bit color."

RGB is intuitive for color reasoning. Want a warmer color? Increase the red channel. Want a darker shade? Reduce all three channels proportionally. This makes RGB useful when you are programmatically manipulating colors in JavaScript or when building dynamic color systems.

What Is Hex?

Hex (hexadecimal) color codes represent the same RGB values, but in base-16 notation instead of base-10. The format is #RRGGBB where RR, GG, and BB are two-digit hexadecimal numbers (00 to FF) corresponding to the red, green, and blue channels.

Hexadecimal uses 16 digits: 0-9 and A-F, where A=10, B=11, C=12, D=13, E=14, F=15. A two-digit hex number can represent 16 x 16 = 256 values (00 to FF), exactly matching the 0-255 range of each RGB channel.

Examples:

• #FF0000 — pure red (FF=255, 00=0, 00=0)
• #00FF00 — pure green
• #0000FF — pure blue
• #FFFFFF — white
• #000000 — black
• #3B82F6 — medium blue (3B=59, 82=130, F6=246)

Hex codes are also available in a three-character shorthand when each pair of digits is identical: #RGB. For example, #FF0000 can be written as #F00, and #FFFFFF as #FFF. This only works when both digits in each pair are the same.

How to Convert Between RGB and Hex

Converting between these two formats is straightforward math. You can do it manually, but our Color Picker converts between RGB, Hex, HSL, and CMYK in one click.

Hex to RGB: Split the hex code into three pairs and convert each from base-16 to base-10. For #4F46E5: 4F = (4 x 16) + 15 = 79; 46 = (4 x 16) + 6 = 70; E5 = (14 x 16) + 5 = 229. Result: rgb(79, 70, 229).

RGB to Hex: Convert each decimal value to a two-digit hex number. For rgb(16, 185, 129): 16 = 10 (hex); 185 = B9 (hex); 129 = 81 (hex). Result: #10B981 — Tailwind's emerald-500.

Transparency: RGBA and 8-Digit Hex

Neither basic RGB nor 6-digit Hex includes transparency information. To add transparency, you have two options:

RGBA: A fourth value (alpha) is added to RGB: rgba(red, green, blue, alpha). The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). For example, rgba(79, 70, 229, 0.5) is indigo at 50% transparency. This is the most commonly used approach in CSS for overlays, shadows, and glassmorphism effects.

8-digit Hex: Append two additional hex digits for the alpha channel: #RRGGBBAA. For example, #4F46E580 is the same indigo at approximately 50% transparency (80 hex = 128 decimal, 128/255 ≈ 0.5). Eight-digit hex works in all modern browsers but is less universally supported in older design tools. RGBA is the safer choice for cross-tool compatibility.

In CSS custom properties (variables), RGBA is particularly powerful. You can define a color's RGB values as a variable and apply different alpha values contextually:

:root {
  --brand-rgb: 79, 70, 229;
}
.overlay { background: rgba(var(--brand-rgb), 0.15); }
.button  { background: rgba(var(--brand-rgb), 1.0);  }

CSS Usage: Which Format to Use

Both RGB and Hex are fully supported in all modern browsers and CSS specifications. The choice is largely stylistic and contextual:

Use Hex when: defining brand colors, design tokens, and utility classes in your stylesheet. Hex is compact, universally recognized by designers, copy-pasted easily from tools like Figma, Adobe, and our Color Palette Generator, and works in HTML attributes like bgcolor.

Use RGBA when: you need transparency, are building dynamic colors in JavaScript, or are creating CSS custom properties that need to support variable alpha values. RGBA is also easier to reason about when adjusting brightness or mixing colors programmatically.

Consider HSL: For design systems and theme engines, HSL (Hue, Saturation, Lightness) is increasingly popular because it maps naturally to how humans perceive color relationships. Creating a tint/shade scale is trivial with HSL — just adjust the lightness value.

Accessibility and Color Contrast

Regardless of whether you use RGB or Hex, WCAG 2.1 accessibility guidelines require a minimum contrast ratio of 4.5:1 between normal text and its background (3:1 for large text or UI components). This ratio is calculated from the relative luminance of the foreground and background colors — a formula that works the same regardless of color format.

When building accessible interfaces, always verify your color choices against a contrast checker. Key principles:

• Light text on a dark background and dark text on a light background both work — the contrast ratio is what matters, not the direction.
• Using rgba() for background overlays reduces the effective contrast between text and the underlying content — test with the actual background color visible through the overlay.
• Never rely on color alone to convey information — use shape, pattern, or label text alongside color-coded elements for users with color vision deficiencies.
• CSS custom properties that switch between light and dark mode themes must be verified for contrast in both modes.

Color Formats in Design Tools

Most design tools support multiple color formats simultaneously. In Figma, you can switch between Hex, RGB, HSL, and CSS notation in the color picker. In Adobe Photoshop and Illustrator, the Color Picker displays Hex and RGB side by side. Browser DevTools display colors in Hex by default but let you toggle to RGB, HSL, or OKLCH.

When handing off designs to developers, Hex codes are the most universally understood format and require the least transformation. When building JavaScript-driven color systems (e.g., generating chart colors, theme switchers, or gradient animations), working with RGB values directly makes mathematical operations far more straightforward.

The Newer CSS Color Formats

CSS Color Level 4 introduces additional formats worth knowing: hsl(), hwb(), lab(), lch(), and oklch(). The oklch() format is particularly exciting for designers because it operates in a perceptually uniform color space — meaning two colors with the same lightness value actually appear equally bright to human eyes, unlike RGB or Hex. As browser support for these newer formats matures, they may eventually supplement or replace traditional RGB and Hex in advanced design systems. For now, RGB and Hex remain the industry standard for web development compatibility.