How do you convert HEX to RGB?

A 6-digit hex color like #2563EB is split into three 2-digit hex pairs: red (25), green (63), and blue (EB). Converting each pair from base-16 to base-10 yields: R = (2×16) + 5 = 37, G = (6×16) + 3 = 99, B = (14×16) + 11 = 235. Thus, #2563EB equals rgb(37, 99, 235).

What is the difference between HEX, RGB, and HSL?

HEX is a hexadecimal shorthand for screen channels. RGB describes light intensity from 0 to 255. HSL (Hue, Saturation, Lightness) aligns with human perception, making it easier to adjust brightness or saturation without altering the underlying hue.

Can I use HEX codes with alpha transparency in CSS?

Yes. Modern CSS supports 8-digit HEX codes (#RRGGBBAA), where the last two digits denote opacity from 00 (0% transparent) to FF (100% opaque). Alternatively, use the modern CSS function rgb(37 99 235 / 0.8).

⚡ Real-Time Math & CSS Tokens

RGB to HEX & HEX to RGB Color Converter

Convert seamlessly between HEX, RGB, HSL, HSV, and CMYK formats. Test WCAG 2.1 contrast ratios against light and dark surfaces, and copy production CSS code instantly.

Click Swatch to Pick

Contrast on White (#FFFFFF): 4.5:1 (AA)

Contrast on Black (#000000): 4.7:1 (AAA)

Popular Colors

HEX

RGB

HSL

HSV

CMYK

CSS Token

How HEX and RGB Color Codes Work in Web Development

Every digital display uses tiny subpixels of Red, Green, and Blue (RGB) light to render color. Understanding how hexadecimal math translates into display signals is essential for optimizing design systems and writing clean CSS.

1. Hexadecimal Color Math Explained

A standard 6-digit hex code represents a base-16 number where each digit ranges from 0 to 15 (0–9 followed by A–F). The 6 characters are split into three pairs:

Digits 1–2 (Red): From 00 (0 intensity) to FF (255 max intensity).

Digits 3–4 (Green): From 00 (0 intensity) to FF (255 max intensity).

Digits 5–6 (Blue): From 00 (0 intensity) to FF (255 max intensity).

/* Formula: Converting #2563EB to RGB */ R = (2 × 16) + 5 = 37 G = (6 × 16) + 3 = 99 B = (14 × 16) + 11 = 235 /* CSS Equivalents */ background-color: #2563eb; background-color: rgb(37, 99, 235); background-color: hsl(221, 83%, 53%);

2. When to Use HEX vs. RGB vs. HSL

Different color formats excel in different frontend scenarios:

HEX: Ideal for hardcoded brand constants and static design mockups due to its compact 7-character notation.

RGB / RGBA: Useful when defining alpha transparency via CSS custom properties: rgba(var(--brand-rgb), 0.15).

HSL (Hue, Saturation, Lightness): Ideal for design tokens and accessible hover states. By holding Hue and Saturation constant while increasing Lightness by 10%, you create mathematically harmonious button hovers and focus borders without altering tone.

Frequently Asked Questions

How do I convert HEX to RGB in my head? +

Multiply the first hex character by 16 and add the second character value (where A=10, B=11, C=12, D=13, E=14, F=15). For example, 3A = (3×16) + 10 = 58. Repeat for the green and blue character pairs.

Why does HSL make design system development easier? +

HSL maps directly to human perception. Hue (0–360°) controls the rainbow color family, Saturation (0–100%) controls vibrancy, and Lightness (0–100%) controls illumination. This allows you to generate accessible 50-950 scales using single-variable CSS math.

What is WCAG AA and AAA color contrast? +

The Web Content Accessibility Guidelines (WCAG 2.1) require normal body text to achieve at least a 4.5:1 contrast ratio against its background (Level AA), or 7:1 for enhanced accessibility (Level AAA). For large headings (18pt+ or 14pt bold), 3:1 is required.