HEX vs RGB: The Complete Color Code Guide for Designers & Developers (2026)

How Screens Mix Color

Every pixel on a digital screen is made of three sub-pixels — one red, one green, one blue (RGB). By varying the brightness of each sub-pixel from off (0) to full intensity (255), the screen can reproduce about 16.7 million distinct colors. HEX and RGB are simply two notations for the same underlying three-number system.

HEX Color Codes Explained

A HEX color is a 6-character string prefixed with #, written as #RRGGBB. Each pair of characters is a base-16 (hexadecimal) number from 00 to FF, representing a channel intensity from 0 to 255.

Hexadecimal digits run 0–9 then A–F, where A=10, B=11, C=12, D=13, E=14, F=15. Two-digit hex ranges from 00 (0) to FF (255).

#38BDF8   →   R: 38hex = 56dec
              G: BD hex = 189dec  (11×16 + 13 = 189)
              B: F8 hex = 248dec  (15×16 + 8  = 248)

= rgb(56, 189, 248)  — sky blue

Shorthand HEX (#RGB)

When both digits of each channel are identical in the 6-digit form, you can compress to 3 digits: #3388FF → #38F. The browser expands each digit by doubling it. #fff = #ffffff (white), #000 = #000000 (black).

8-digit HEX with alpha (#RRGGBBAA)

Append two more hex digits for the alpha channel: #38BDF880 = sky blue at ~50% opacity (80 hex = 128 dec = 128/255 ≈ 50%). Supported in all modern browsers since 2017.

RGB Color Values Explained

RGB uses three decimal integers from 0 to 255: rgb(56, 189, 248). CSS also supports the modern space-separated syntax without commas: rgb(56 189 248).

Adding a fourth value gives RGBA, where the alpha channel accepts a decimal 0.0–1.0 or a percentage:

rgba(56, 189, 248, 0.5)    /* 50% opacity — old syntax  */
rgb(56 189 248 / 50%)      /* 50% opacity — modern syntax */
rgb(56 189 248 / 0.5)      /* same — decimal alpha       */

How to Convert Between HEX and RGB

HEX → RGB (manual)

HEX: #FF8000

RR = FF → 15×16 + 15 = 255
GG = 80 → 8×16  + 0  = 128
BB = 00 → 0×16  + 0  = 0

Result: rgb(255, 128, 0)

RGB → HEX (manual)

RGB: (255, 128, 0)

255 ÷ 16 = 15 rem 15  →  FF
128 ÷ 16 = 8  rem 0   →  80
0   ÷ 16 = 0  rem 0   →  00

Result: #FF8000

JavaScript one-liners

// HEX → RGB
const hexToRgb = hex => {
  const r = parseInt(hex.slice(1,3),16);
  const g = parseInt(hex.slice(3,5),16);
  const b = parseInt(hex.slice(5,7),16);
  return { r, g, b };
};

// RGB → HEX
const rgbToHex = (r,g,b) =>
  '#' + [r,g,b].map(v => v.toString(16).padStart(2,'0')).join('');

HSL: The Format Designers Actually Think In

HSL (Hue, Saturation, Lightness) describes color in terms that match human intuition. The three values:

• Hue (0–360°) — position on the color wheel. 0°/360° = red, 120° = green, 240° = blue.
• Saturation (0–100%) — vividness. 0% = grey, 100% = fully saturated.
• Lightness (0–100%) — 0% = black, 100% = white, 50% = pure hue.

/* The same sky blue in three formats */
#38BDF8
rgb(56, 189, 248)
hsl(199, 91%, 60%)

/* Darken by 15% in HSL — trivial */
hsl(199, 91%, 45%)

/* Same operation in HEX — not obvious */
/* Would need to convert, calculate, convert back */

HSL is the right choice for design systems and CSS custom properties. Use it to build systematic scales:

--sky-100: hsl(199, 91%, 90%);
--sky-300: hsl(199, 91%, 75%);
--sky-500: hsl(199, 91%, 60%);
--sky-700: hsl(199, 91%, 40%);
--sky-900: hsl(199, 91%, 20%);

When to Use Each Format

Format	Use when	Avoid when
HEX	Static CSS colors, design tokens, sharing with devs, design hand-off	Alpha transparency needed, programmatic color math
RGB / RGBA	JavaScript animation, Canvas API, alpha transparency, WebGL shaders	Building color scales — requires manual math
HSL / HSLA	Design system scales, CSS custom properties, hover states, dark mode variants	Low-level pixel manipulation or image processing
HSV / HSB	Design tool color pickers (Figma, Photoshop, Illustrator)	CSS — not a valid CSS color format
CMYK	Print production, sending to press, offset printing	Anything screen-based — not valid in CSS

Modern CSS Color Functions in 2026

CSS has expanded well beyond HEX and RGB. Modern browsers support several new color spaces that cover wider gamuts than the traditional sRGB space:

/* oklch — perceptually uniform, great for scales */
color: oklch(65% 0.18 230);   /* lightness, chroma, hue */

/* lab — device-independent CIE L*a*b* */
color: lab(65% -15 -30);

/* display-p3 — wider gamut for modern displays */
color: color(display-p3 0.22 0.74 0.97);

/* lch — polar form of lab */
color: lch(65% 34 250);

These formats access colors outside the sRGB gamut — vivid neons and saturated hues that HEX/RGB cannot represent. Support is 90%+ in 2026 (Chrome 111+, Firefox 113+, Safari 15.4+). Use them for vibrant UI accents while providing HEX fallbacks for older browsers.

Quick Reference: All Color Formats at a Glance

Format	Example (sky blue)	CSS native?	Alpha?
HEX 6-digit	#38BDF8	Yes	Via 8-digit (#38BDF880)
HEX 3-digit	#39F (approx)	Yes	Via 4-digit
RGB	rgb(56, 189, 248)	Yes	Via rgba()
HSL	hsl(199, 91%, 60%)	Yes	Via hsla()
HSV / HSB	hsb(199, 77%, 97%)	No	—
CMYK	cmyk(77%, 24%, 0%, 3%)	No	—
oklch	oklch(75% 0.13 210)	Yes (modern)	Via / alpha
Named color	skyblue	Yes (148 names)	No

The Decision Rule

Use HEX for static values in stylesheets — it is compact, universally understood, and directly copyable from any design tool. Use RGB/RGBA when you need alpha or are manipulating colors in JavaScript. Use HSL for building systematic design tokens and scales. Everything else — HSV, CMYK, oklch — has a specific tool or context where it belongs.

When in doubt, convert with our free HEX ↔ RGB Converter — it outputs all five formats simultaneously so you can pick the one your workflow needs.