How do I convert a hex color to RGB?

Split the 6-character hex code into 3 pairs (RR, GG, BB). Convert each pair from hexadecimal to decimal. For #3498DB: 34→052, 98→152, DB→219, giving RGB(52, 152, 219).

What is the # symbol in hex colors?

The # is a prefix that indicates the value is a hex color code. It's required in CSS (#3498DB) but optional in some tools. The actual color data is the 6 characters after the #.

Can hex colors have transparency?

Yes. CSS4 supports 8-digit hex (#RRGGBBAA) where the last two digits are the alpha channel. #FF000080 is 50% transparent red. You can also use rgba() for transparency with decimal values.

What is the 3-digit hex shorthand?

When each pair of hex digits is the same (e.g., #FF6600), you can shorten it to 3 digits (#F60). Each digit is doubled: F→FF, 6→66, 0→00. Only works when each pair consists of repeated digits.

Why does my hex color look different on screen?

Color appearance depends on monitor calibration, color profile (sRGB, P3), brightness settings, and viewing angle. The same hex code may look slightly different across devices. Professional work requires calibrated monitors.

How do I find the hex code for a color on screen?

Use a color picker tool: browser DevTools (inspect element), OS-level tools (Windows Color Picker, macOS Digital Color Meter), or design tools like Figma and Photoshop all include eyedropper tools that show hex codes. Reviewing these factors periodically ensures your analysis stays current as conditions and requirements evolve over time.

Hex to RGB Converter

Convert hexadecimal color codes to RGB values. Supports 3-digit and 6-digit hex with a live color preview swatch.

Hex Color Codee.g. #3498DB or #F60

Opacity (%)

Output Format

Shade/Tint StepsNumber of shade variations

Compare Against (Hex)For contrast ratio check

Original vs Complement

Red (R)

20.4% of 255

Green (G)

152

59.6% of 255

Blue (B)

219

85.9% of 255

Formatted Output

rgb(52, 152, 219)

css format with full opacity

HSL

hsl(204.1, 69.9%, 53.1%)

Hue 204.1 deg, Sat 69.9%, Light 53.1%

Relative Luminance

0.283

0 = darkest, 1 = lightest (WCAG)

Complement

#CB6724

Inverted RGB channels

Grayscale

#828282

Weighted avg: 130/255

Contrast Ratio

3.15:1

WCAG AA fail (normal text)

Shade & Tint Ramp

Channel Breakdown

Red52 / 255

Green152 / 255

Blue219 / 255

Shade Table

Variation	Hex	Preview
0% Dark	#000000
50% Dark	#1A4C6E
Original	#3498DB
50% Light	#4EE4FF
100% Light	#68FFFF

Common Web Color Reference

Name	Hex	RGB
Dodger Blue	#3498DB	rgb(52, 152, 219)
Emerald	#2ECC71	rgb(46, 204, 113)
Sunflower	#F1C40F	rgb(241, 196, 15)
Alizarin Red	#E74C3C	rgb(231, 76, 60)
Amethyst	#9B59B6	rgb(155, 89, 182)
Midnight Blue	#2C3E50	rgb(44, 62, 80)
Turquoise	#1ABC9C	rgb(26, 188, 156)
Orange	#E67E22	rgb(230, 126, 34)

Planning notes, formulas, and examples

About the Hex to RGB Converter

The Hex to RGB Converter translates hexadecimal color codes (#RRGGBB or #RGB shorthand) into RGB decimal values for use in CSS, design tools, and programming. Enter any hex color and review its red, green, and blue channel values with a live color preview.

Hexadecimal color codes are the most common way to specify colors in HTML and CSS. Each pair of hex digits represents one color channel: red (positions 1–2), green (positions 3–4), and blue (positions 5–6). The conversion splits the hex string and parses each pair from base-16 to base-10.

This converter handles both 6-digit (#FF6600) and 3-digit shorthand (#F60, which expands to #FF6600) formats. It also strips the optional # prefix. Perfect for frontend developers, UI designers, and anyone working with web colors.

When This Page Helps

Frontend developers often need RGB values from hex codes for CSS functions like rgba(), dynamic color manipulation in JavaScript, or design tool inputs that accept decimal RGB values.

How to Use the Inputs

Enter a hex color code with or without the # prefix.
Both 3-digit (#F60) and 6-digit (#FF6600) formats are supported.
View the R, G, and B values (0–255).
Check the live color preview swatch.
Copy the rgb() CSS value for your stylesheet.

Formula used

R = parseInt(hex.substring(0, 2), 16)
G = parseInt(hex.substring(2, 4), 16)
B = parseInt(hex.substring(4, 6), 16)
For 3-digit shorthand: #RGB → #RRGGBB (each digit is doubled)

Example Calculation

Result: R: 52, G: 152, B: 219

#3498DB: R = 0x34 = 52, G = 0x98 = 152, B = 0xDB = 219. This is a medium blue color. As CSS: rgb(52, 152, 219). This is the "Peter River" blue from the Flat UI Colors palette.

Tips & Best Practices

The 3-digit shorthand #F60 is equivalent to #FF6600 — each digit is doubled.
In rgba(), the 4th value is alpha (opacity) from 0 to 1: rgba(52, 152, 219, 0.5).
Pure red = #FF0000 (255, 0, 0), pure green = #00FF00, pure blue = #0000FF.
Gray shades have equal R, G, B values: #808080 = rgb(128, 128, 128).
CSS4 allows hex with alpha: #3498DBCC (CC = 80% opacity).

How Hex Colors Work

A hex color code is a 6-character string of hexadecimal digits representing 3 bytes: one byte each for red, green, and blue. Each byte ranges from 00 (0) to FF (255). The combination of these three light channels produces the visible color. This additive color model matches how screens emit light.

Common Hex Code Patterns

Grays have equal channels: #333333 (dark), #999999 (medium), #CCCCCC (light). Saturated colors maximize one channel: #FF0000 (red), #00FF00 (green), #0000FF (blue). Pastel colors have high values in all channels: #F0E68C (khaki), #FFB6C1 (light pink).

Usage in CSS and Design

Hex is the default color format in CSS due to its brevity. However, rgb() and hsl() offer advantages for dynamic colors and palette generation. Many developers use hex for static colors and rgb/hsl for programmatic manipulation.

Sources & Methodology

Last updated: February 8, 2026

Frequently Asked Questions

Split the 6-character hex code into 3 pairs (RR, GG, BB). Convert each pair from hexadecimal to decimal. For #3498DB: 34→052, 98→152, DB→219, giving RGB(52, 152, 219).