Hex to RGB Color Converter

Convert hex color codes to RGB, HSL, and CMYK values instantly with a live color preview.

How Hex Color Codes Work

Hexadecimal color codes are the most common way to specify colors on the web. A hex color is written as a hash sign followed by six characters: #RRGGBB. Each pair of characters represents one color channel (red, green, blue) using base-16 notation, where digits range from 0-9 and letters A-F. This gives each channel 256 possible values (00 to FF), producing a total of 16,777,216 unique colors.

The shorthand 3-digit format #RGB doubles each digit to create the full 6-digit code. For example, #F80 expands to #FF8800. This shorthand covers 4,096 colors and is useful for common values like #FFF (white), #000 (black), and #F00 (red).

The Conversion Formula

Converting hex to RGB is straightforward: parse each two-character pair as a base-16 integer. In JavaScript, the conversion looks like this:

const hex = "#3B82F6";
const r = parseInt(hex.substr(1, 2), 16); // 59
const g = parseInt(hex.substr(3, 2), 16); // 130
const b = parseInt(hex.substr(5, 2), 16); // 246

For a 3-digit hex code, expand each digit first:

const shortHex = "#F80";
const fullHex = "#" + shortHex[1].repeat(2)
  + shortHex[2].repeat(2)
  + shortHex[3].repeat(2); // "#FF8800"

Common Hex Color Values

Here are some frequently used hex colors and their RGB equivalents:

Using Hex and RGB in CSS

Both hex and RGB formats are valid in CSS and render identically. Hex is more compact, while RGB is easier to read and modify programmatically. Modern CSS also supports the rgb() function without commas and with an optional alpha value:

/* Hex notation */
color: #3B82F6;
color: #3B82F680; /* 50% opacity */

/* RGB notation */
color: rgb(59, 130, 246);
color: rgb(59 130 246 / 0.5); /* 50% opacity, modern syntax */
color: rgba(59, 130, 246, 0.5); /* 50% opacity, legacy syntax */

When choosing between formats, hex is ideal for static values in stylesheets, while RGB works better when you need to manipulate individual channels with CSS custom properties or JavaScript. The RGB to HSL converter can help when you need to adjust hue, saturation, or lightness independently.

Frequently Asked Questions

How do I convert a hex color code to RGB?

Split the 6-digit hex code into three pairs (RR, GG, BB) and convert each pair from base-16 to base-10. For example, #3B82F6 becomes R=59, G=130, B=246 because parseInt('3B', 16) = 59, parseInt('82', 16) = 130, and parseInt('F6', 16) = 246.

What is the difference between 3-digit and 6-digit hex codes?

A 3-digit hex code is shorthand where each digit is doubled to form the 6-digit version. For example, #F0A expands to #FF00AA. The 3-digit form only works when each color channel can be represented by a repeated digit, so it covers 4,096 colors compared to the full 16,777,216 colors available with 6 digits.

Are hex colors case-sensitive?

No. Hex color codes are case-insensitive in CSS and all major browsers. #3b82f6, #3B82F6, and #3B82f6 all represent the same color. Lowercase is more common in modern CSS tooling and minifiers.

What does the alpha channel in an 8-digit hex code mean?

An 8-digit hex code adds two characters at the end for opacity (alpha). For example, #3B82F680 is the same blue as #3B82F6 but at 50% opacity (0x80 = 128, which is 128/255 = approximately 50%). CSS supports this format in all modern browsers.

How do I convert hex to CMYK?

First convert hex to RGB, then normalize each channel to 0-1 by dividing by 255. Calculate K (key/black) as 1 - max(R', G', B'). Then C = (1 - R' - K) / (1 - K), M = (1 - G' - K) / (1 - K), Y = (1 - B' - K) / (1 - K). Multiply each by 100 for percentages. Note that CMYK is device-dependent, so this gives an approximate conversion.

Related Tools

Built by Michael Lip. 100% client-side.