Hex to RGB and RGB to Hex: The Color Conversion Guide (With Calculator)

Convert any color instantly

Use the free color picker — enter any hex color and it shows the RGB, HSL, and HSB equivalents instantly. No account required.

How hex colors work

A hex color like #ff6600 encodes three values — red, green, blue — each as two hexadecimal digits:

• ff = red channel
• 66 = green channel
• 00 = blue channel

Hexadecimal (base 16) uses digits 0–9 and letters a–f. Each two-digit pair represents a value from 0 (00 in hex) to 255 (ff in hex).

The conversion formula: hex to RGB

Convert each two-digit hex pair to decimal:

• ff hex → 15 × 16 + 15 = 255
• 66 hex → 6 × 16 + 6 = 102
• 00 hex → 0 × 16 + 0 = 0

So #ff6600 = rgb(255, 102, 0).

In JavaScript: parseInt('ff', 16) converts any hex pair to decimal.

The conversion formula: RGB to hex

Convert each decimal value (0–255) to two-digit hexadecimal:

• 255 ÷ 16 = 15 remainder 15 → ff
• 102 ÷ 16 = 6 remainder 6 → 66
• 0 ÷ 16 = 0 remainder 0 → 00

In JavaScript: (255).toString(16) returns 'ff'. Pad single-digit results with a leading zero: (6).toString(16).padStart(2, '0')returns '06'.

Shorthand hex (#rgb)

When both digits of each channel are identical, hex colors can be shortened:

• #ffffff → #fff
• #000000 → #000
• #ff6600 cannot be shortened (66 would be 6, but 66 ≠ 6)
• #ff6633 → #f63

Shorthand only works when each pair is a repeated digit. Browsers expand #f63to #ff6633.

Hex with opacity: #RRGGBBAA

Modern CSS supports 8-digit hex for opacity: #ff660080 where the last two digits (80 = 128 in decimal = 50% opacity) represent the alpha channel. This is equivalent to rgba(255, 102, 0, 0.5).

Quick reference: common colors

Why CSS has both formats

Hex colors came from HTML in the 1990s and are more compact. RGB and HSL were added later as CSS became a design language — they are more readable and easier to manipulate programmatically. Both are equally valid in CSS today.

HSL (Hue, Saturation, Lightness) is the most human-readable format:hsl(24, 100%, 50%)means "warm orange, fully saturated, medium brightness." Easy to adjust by eye. Use the color picker to get all three formats for any color simultaneously.

Summary

• Hex: #RRGGBB — each pair is the channel value in hex (00–ff = 0–255)
• RGB: rgb(R, G, B) — each value is 0–255 in decimal
• Convert hex to decimal: parseInt(hexPair, 16)
• Convert decimal to hex: value.toString(16).padStart(2, '0')
• Use the color picker to skip the math