Hex to RGB Converter - Free, Instant Results

This hex to rgb converter turns any HEX color code into red, green and blue values, plus HSL, HSV and CMYK, in one step. Web designers, developers and marketers can type a 3, 4, 6 or 8-digit code, see a color preview, and copy each CSS-ready format with one click.

What Is a HEX Color Code and How Does It Become RGB?

A HEX color code is a base-16 way of writing an RGB color, using two characters each for red, green and blue. Each pair runs from 00 to FF, which equals 0 to 255 in everyday decimal numbers. The converter shows you those three decimal numbers.

Take 1D9D73. The pairs are 1D, 9D and 73, which equal 29, 157 and 115. The RGB color is therefore 29, 157, 115. Both notations draw the same color on screen; only the way it is written changes.

The four HEX lengths the tool accepts

Alpha is opacity. The last pair runs from 00 (fully transparent) to FF (fully opaque), and the tool shows it as a decimal between 0 and 1, the same scale CSS uses for rgba colors.

How to Use the Hex to RGB Converter

You only need a HEX code and a few seconds. Follow these steps:

1. Click the HEX Color Code box. The hint text shows 1D9D73 as an example.
2. Type or paste your code. A # sits beside the box, and a pasted code that starts with # still works. Enter 3, 4, 6 or 8 digits.
3. If you just want to explore, click one of the Quick samples: Tomato, Jade, Royal Blue, Gold, Dark Magenta, Dark Slate, Dark Orange or Steel Blue.
4. Check the color preview and the CSS Color Name. A name appears when your code matches a named CSS color; otherwise you see a dash.
5. Read the RGB Channels. R, G and B each get a bar and a number from 0 to 255. If your code includes alpha, an Alpha value appears too.
6. Under CSS Color Formats, press the copy button beside HEX, RGB, HSL, HSV or CMYK to grab that value.
7. Press the clear button to reset the field and convert another color.

Worked Example: Converting 1D9D73 (Jade)

Entering 1D9D73 gives RGB 29, 157, 115, which is the Jade sample. The tool also returns HSL 160, 69%, 36%, HSV 160, 82%, 62% and CMYK 82, 0, 27, 38.

Here is what that tells you. Green (157) is the strongest channel, blue (115) is in the middle and red (29) is low, so the color is a teal-leaning green. A hue of 160 degrees sits between pure green at 120 and cyan at 180. A lightness of 36% means it is darker than a mid-tone.

Now add alpha. Entering 1D9D7380 keeps the same RGB values but shows Alpha 0.5, because 80 in hex is 128 and 128 divided by 255 is about 0.5. That is a half-transparent version of the same green, ready for an overlay.

How Do You Convert Hex to RGB by Hand?

To convert by hand, split the code into three pairs and turn each pair into a decimal: multiply the first digit by 16 and add the second. Letters count as A=10, B=11, C=12, D=13, E=14 and F=15.

For 9D, that is 9 × 16 = 144, plus 13, which gives 157. For a 3-digit code such as F60, double each digit first to get FF6600, then convert to 255, 102, 0. For an alpha pair, convert it the same way and divide by 255.

In a spreadsheet, the HEX2DEC function does the same job on each pair. In CSS, write the result as rgb(29, 157, 115). The converter saves you the arithmetic and avoids slips on long lists of brand colors.

How Do You Read and Use the Results?

Each output answers a different question, so pick the one your task needs.

RGB channels

The three bars show how much of each channel is present out of 255. Equal values make a gray, such as 128, 128, 128. One dominant channel pushes the color toward red, green or blue. Pure black is 0, 0, 0 and pure white is 255, 255, 255.

HSL and HSV

HSL (hue, saturation, lightness) is the easiest format for building variations. Keep the hue and raise the lightness from 36% to 46% for a hover state, or lower it for a pressed state. HSV (hue, saturation, value) matches the sliders found in many graphics editors.

CMYK

CMYK lists cyan, magenta, yellow and black percentages, so it is a useful starting point for print briefs. Treat it as an estimate: real printed color depends on paper, ink and the printer's color profile.

Alpha

Alpha only appears for 4 and 8-digit codes. 1 is solid and 0 is invisible. Use it for overlays, shadows and glass effects.

Who Uses a Hex to RGB Converter?

Anyone who receives colors in one format and needs another will use it regularly.

• Front-end developers convert a brand HEX into RGB so they can add transparency to shadows, borders and overlays.
• Designers grab the HSL value to create a lighter tint and a darker shade of the same hue.
• Marketers keep email templates, social images and ads on brand by checking the exact values.
• Print prep teams copy the CMYK estimate into a first brief.

If your color lives inside a picture, pull it out first with the image color extractor or the color palette extractor, then paste the HEX here. To pick a color visually instead of typing a code, try the color picker.

Best Practices and Troubleshooting

Most problems come from the code itself, not the conversion.

• Invalid HEX message: the code must be exactly 3, 4, 6 or 8 digits using only 0 to 9 and A to F. Five or seven digits fail, and so does the letter O typed in place of a zero.
• Wrong order with alpha: in web HEX the alpha pair comes last (RRGGBBAA). Some mobile platforms put it first (AARRGGBB), so reorder the digits before pasting.
• Case: 1d9d73 and 1D9D73 are the same color.
• No color name: a dash just means your code does not exactly match a named CSS color. The RGB values are still correct.
• Color looks different on another screen: the numbers are identical, but monitors differ in calibration and brightness.
• Consistency: copy the same format everywhere in a stylesheet so teammates do not mix HEX and RGB by accident.

What Are the Limits of This Converter?

The tool converts one code at a time, so a long palette means pasting each color in turn. It accepts HEX input only. To go the other way, use the RGB to HEX converter. The CMYK figures are a mathematical conversion, not a print-profile match, so check a physical proof for color-critical work.

Fast, accurate conversion keeps your design values consistent from mockup to stylesheet to print. Type a code or click a sample above to see every format at once, and explore more utilities in the image editing and optimization tools hub when you are ready for the next step.