How to Convert RGB and HEX | Conversion Methods and Calculations Explained

When working with websites, image editing, and design, two common color formats are "RGB" and "HEX." RGB represents colors using numerical values for red, green, and blue, while HEX represents colors using hexadecimal notation.

For example, red can be represented as RGB(255, 0, 0) in RGB format and #FF0000 in HEX format. Although the notation is different, both represent the same color.

In this article, we will explain how to convert HEX to RGB and RGB to HEX using practical examples. We will also explain how hexadecimal numbers work, the differences between 3-digit, 6-digit, and 8-digit HEX codes, and how to use RGB and HEX in CSS.

Can RGB and HEX Be Converted?

RGB and HEX are both methods of representing colors, so they can be converted from one format to the other.

For example, red is represented as RGB(255, 0, 0) in RGB format and #FF0000 in HEX format.

When converting RGB to HEX, each RGB value is converted from decimal to hexadecimal. Conversely, when converting HEX to RGB, each pair of hexadecimal digits is converted from hexadecimal to decimal.

In other words, RGB and HEX simply use different notation to represent the same colors.

What Is RGB?

RGB stands for Red, Green, and Blue and is a color model that represents colors by combining these three primary color channels.

In standard 8-bit RGB, each color channel is represented by a value from 0 to 255.

For example, RGB(255, 0, 0) sets red to its maximum value while green and blue are set to 0, resulting in red.

On the other hand, RGB(0, 0, 0) has all values set to 0, resulting in black. RGB(255, 255, 255) has all values set to their maximum, resulting in white.

What Is HEX?

A HEX color code is a method of representing colors using hexadecimal notation. A standard 6-digit HEX color code has the structure #RRGGBB.

For example, #FF0000 can be broken down as follows:

• FF → Red
• 00 → Green
• 00 → Blue

Therefore, it corresponds to RGB(255, 0, 0).

HEX uses the digits 0–9 as well as the letters A–F. This is because HEX uses the hexadecimal number system, which is base 16 rather than the decimal system, which is base 10.

How to Convert HEX to RGB

When converting HEX to RGB, divide a 6-digit HEX color code into three pairs of digits.

For example, let's convert #3366CC to RGB.

① Divide the HEX Code into Three Values

Divide #3366CC into pairs of two digits:

• 33
• 66
• CC

Each pair represents the R, G, or B value.

② Convert Hexadecimal to Decimal

The hexadecimal value 33 is 51 in decimal.

In hexadecimal notation: 3 × 16 + 3 = 51

Similarly:

• 33 → 51
• 66 → 102
• CC → 204

Therefore:

③ Express the Result as RGB

The result is:

#3366CC → RGB(51, 102, 204)

This is the RGB representation of the HEX color #3366CC.

How to Convert RGB to HEX

When converting RGB to HEX, convert each RGB value from decimal to hexadecimal.

For example, let's convert RGB(51, 102, 204) to HEX.

① Convert the R Value

The R value is 51.

Converting 51 to hexadecimal gives: 33

② Convert the G Value

The G value is 102.

Converting 102 to hexadecimal gives: 66

③ Convert the B Value

The B value is 204.

Converting 204 to hexadecimal gives: CC

④ Combine the Three Values

Connect the converted values in order:

33 + 66 + CC = #3366CC

Therefore:

RGB(51, 102, 204) → #3366CC

This is how RGB can be converted to HEX.

RGB and HEX Conversion Examples

The following table compares commonly used colors in RGB and HEX formats.

Although RGB and HEX use different notation, they represent the same color when their corresponding values are equivalent.

How to Convert 3-Digit HEX

HEX color codes are available not only in 6-digit format but also in a 3-digit format.

For example, #F00 represents red.

A 3-digit HEX code can be converted to a 6-digit HEX code by repeating each character twice.

#F00 → #FF0000

Therefore: #F00 → RGB(255, 0, 0)

3-digit HEX is a convenient shorthand notation that allows 6-digit HEX colors to be written more briefly.

How 8-Digit HEX Works

CSS also supports 8-digit HEX, which adds an alpha value for transparency to the standard 6-digit HEX color code.

An 8-digit HEX code uses the format: #RRGGBBAA

The final AA represents the alpha value, or transparency. 00 is completely transparent, while FF is completely opaque.

For example:

• #FF0000FF → Fully opaque red
• #FF000080 → Approximately 50% transparent red
• #FF000000 → Fully transparent

In this way, 8-digit HEX allows both color and transparency to be represented in a single color code.

How to Use RGB and HEX in CSS

RGB and HEX can both be used in CSS to specify text colors, background colors, and other visual properties on web pages.

Using HEX

color: #3366CC;

For a background color, you can write:

background-color: #3366CC;

This specifies #3366CC as the background color.

Using RGB

color: rgb(51, 102, 204);

These two formats specify the same color.

color: #3366CC;
color: rgb(51, 102, 204);

Which format you use can depend on your project's coding conventions and the intended use.

Specifying Transparency

With RGB-based notation, you can also specify transparency using an alpha value.

background-color: rgba(255, 0, 0, 0.5);

This example sets red with approximately 50% transparency.

With HEX, transparency can be specified using the 8-digit format.

background-color: #FF000080;

Choosing Between RGB and HEX

Neither RGB nor HEX is inherently better than the other. Both are methods of representing colors, and the appropriate format can depend on the intended use.

HEX color codes are especially common in web design. On the other hand, RGB values are also frequently used in image processing and programming.

Using RGB and HEX Conversion Tools

RGB and HEX conversions can be performed manually, but conversion tools are convenient when working with many color codes or when accurate conversion is important.

HaruTools provides tools for converting RGB to HEX and HEX to RGB.

Convert HEX to RGB

Enter a HEX color code to see its corresponding RGB values.

HEX to RGB Converter

Convert RGB to HEX

Enter the R, G, and B values to convert them into the corresponding HEX color code.

RGB to HEX Converter

Find Colors from a Color Code List

If you want to check HEX color codes and RGB values for common colors, a color code list can also be useful.

Color Code List

Frequently Asked Questions

Do RGB and HEX represent the same colors?

Yes. RGB and HEX use different notation, but they represent the same color when their corresponding values are equivalent. For example, RGB(255, 0, 0) and #FF0000 both represent red.

How do I convert HEX to RGB?

For a 6-digit HEX code, divide the color code into two-digit pairs: "RR," "GG," and "BB." Then convert each pair from hexadecimal to decimal. For example, #3366CC becomes RGB(51, 102, 204).

How do I convert RGB to HEX?

Convert each R, G, and B value from decimal to hexadecimal and combine the resulting two-digit values. For example, RGB(51, 102, 204) becomes #3366CC.

What does the "#" in a HEX color code mean?

In HEX color codes used in CSS and other contexts, the "#" symbol indicates that the characters that follow represent a hexadecimal color value. For example, in #FF0000, the hexadecimal values representing the red, green, and blue channels appear after the "#".

What is the difference between 3-digit and 6-digit HEX?

A 3-digit HEX code is a shorthand version of a 6-digit HEX code. For example, #F00 represents the same color as #FF0000.

What is an 8-digit HEX code?

An 8-digit HEX code uses the format "#RRGGBBAA," where the final two digits represent the alpha value, or transparency. 00 is completely transparent, while FF is completely opaque.

Should I use RGB or HEX?

Both can be used. HEX is commonly used in web design, while RGB can be convenient for image processing and programming. Choose the format that best fits your particular use case.

Summary

RGB and HEX are both methods of representing colors. RGB represents red, green, and blue using values from 0 to 255, while HEX represents colors using hexadecimal notation.

• RGB represents R, G, and B using values from 0 to 255
• 6-digit HEX uses the #RRGGBB format
• HEX can be converted to RGB
• RGB can be converted to HEX
• 3-digit HEX is a shorthand version of 6-digit HEX
• 8-digit HEX can also specify transparency
• Both RGB and HEX can be used in CSS

For example, #3366CC represents the same color as RGB(51, 102, 204).

RGB-to-HEX and HEX-to-RGB conversions can be performed manually once you understand how they work, but using a dedicated conversion tool can be more efficient when you need to convert colors frequently.

Related Tools

• Convert HEX to RGB : Convert HEX color codes into RGB values
• Convert RGB to HEX : Convert RGB values into HEX color codes
• Color Code List : Check commonly used HEX color codes

Related Articles

• What Is a Hex Color Code?
• What Is the Difference Between RGB and HEX?
• Color & Web Design Guide
• What Is RGB?