Hex Color Codes for Web Developers: #RGB, Opacity, and CSS Variables

How Hex Color Codes Work

Every hex color you write in CSS is a compact encoding of three numbers. The format is #RRGGBB, where RR, GG, and BB are two-digit hexadecimal values representing the red, green, and blue channels respectively. Each channel runs from 00 (decimal 0, no color) to FF (decimal 255, full intensity).

Example: #1E90FF (Dodger Blue)

• R = 1E = 30 in decimal → low red
• G = 90 = 144 in decimal → medium green
• B = FF = 255 in decimal → full blue

Two hex digits per channel means 256 possible values (0–255), giving 256 × 256 × 256 = 16,777,216 possible colors.

Shorthand Hex (#RGB and #RGBA)

When both digits of each channel are the same, you can use three-digit shorthand. #FF5500 becomes #F50, and #FFFFFF becomes #FFF. The browser doubles each digit on parsing. This shorthand only covers 4,096 colors but saves characters in large stylesheets.

Four-digit shorthand #RGBA works the same way for 8-digit hex — #F50A expands to #FF5500AA.

Adding Transparency: 8-Digit Hex (#RRGGBBAA)

Modern CSS supports an 8-digit hex format where the last two digits control the alpha (opacity) channel:

• FF = fully opaque (same as no alpha)
• 80 = approximately 50% transparent (128/255 ≈ 50.2%)
• 00 = fully transparent (invisible)

Example: #FF573380 is the orange #FF5733 at roughly 50% opacity. Browser support is universal in all modern browsers since 2016.

An alternative is rgba(255, 87, 51, 0.5) — functionally identical, but more readable when the opacity value is computed dynamically in JavaScript.

Quick Reference: Common Hex Values

Converting RGB to Hex Manually

Divide each RGB value by 16 to get the two hex digits. For example, RGB 255, 87, 51:

• 255 ÷ 16 = 15 remainder 15 → FF
• 87 ÷ 16 = 5 remainder 7 → 57
• 51 ÷ 16 = 3 remainder 3 → 33
• Result: #FF5733

In JavaScript: color.toString(16).padStart(2, '0') converts a single channel. Our Binary & Number Systems converter lets you convert any decimal value to hex instantly.

Hex vs. HSL: Which to Use When

Hex is great for static colors in design systems — it is compact, widely supported, and familiar to designers and developers alike. HSL (Hue, Saturation, Lightness) shines when you need to generate color palettes programmatically, because lightness is a single number you can increment to create tints and shades. In practice, most teams store brand colors as hex in CSS custom properties and derive variants with HSL calculations or a preprocessor.

Using Hex Colors in CSS Custom Properties

CSS variables (custom properties) let you define your hex palette once and reference it everywhere:

:root {
  --color-primary: #6366F1;
  --color-primary-light: #818CF8;
  --color-danger: #EF4444;
  --color-text: #1E293B;
  --color-bg: #F8FAFC;
}

.button {
  background: var(--color-primary);
  color: #ffffff;
}

This pattern means you change a color in one place and it updates everywhere — no global find-and-replace needed.

Practical Developer Tips

• Use a design token file for your hex palette rather than scattering literals throughout CSS.
• Never hardcode white as #FFF in dark-mode contexts — use a CSS variable like --color-surface so dark mode overrides work cleanly.
• Browser DevTools let you click any color swatch to switch between hex, rgb, and hsl — use it to sanity-check values from Figma.
• Accessibility: contrast ratio is determined by relative luminance, not by how "dark" a color looks. Always check hex pairs with a contrast checker (WCAG AA requires 4.5:1 for text).