Two ways to say the same color

HEX and RGBA both describe a color as red, green, and blue intensity. #6366F1 and rgb(99, 102, 241) are the exact same indigo - the formats are interchangeable whenever no transparency is involved. The practical difference arrives with the alpha channel: RGBA can express opacity, so it is the format you reach for whenever a color must blend with what sits behind it.

When HEX is the clean choice

For solid, fully-opaque colors, HEX is compact, familiar, and easy to scan in a stylesheet. Design tools and most documentation export HEX by default, and referencing the same value you see in Figma avoids transcription mistakes. For brand palettes and design tokens, keep HEX as the source of truth.

When RGBA earns its keep

Reach for RGBA these places:

  • Overlays: a header with rgba(255,255,255,0.85) fades to a clean look while keeping text readable.
  • Shadows: box-shadow nearly always wants a translucent black, which only alpha can express.
  • Scrims: dark gradients under text on hero images need opacity to feel natural.
  • States: tinted hover and focus backgrounds that stay consistent over varying surfaces.

The 8-digit hex compromise

Modern browsers accept 8-digit hex like #6366F1CC, where the last two digits are alpha. It keeps everything in hex but is harder to read and still unsupported somewhere. If your stack targets evergreen browsers you can use it; otherwise RGBA is the safer transparent spelling.

Converting between them

Converting is pure arithmetic: each HEX pair converts to a 0–255 value, and alpha (0–1) maps to the last two hex digits. When a design hands you one format and your codebase uses the other, convert the token once and store the canonical form - then derive the alternative at build time if you ever need it.

Contrast is the real requirement

Whichever format you use, remember why alpha exists: it changes effective contrast against the background. A button using rgba(99,102,241,0.4) over a white card has far less readable color than the same rgba value claims. Verify text and interactive elements against their actual displayed contrast, not against the raw color you typed.