HEX to RGB Converter

#3498DB is rgb(52, 152, 219): convert hex to decimal two digits at a time

A HEX code and an RGB value are two ways of writing the same color. HEX joins the red, green and blue values as two hexadecimal digits each, while RGB writes the same values as decimal numbers from 0 to 255. Split #3498DB into 34, 98 and DB, convert each pair to decimal, and you get 52, 152 and 219, which is rgb(52, 152, 219). A two-digit hex number equals the first digit × 16 plus the second digit, and A to F stand for 10 to 15.

The converter above gives you RGB when you enter a HEX code, and a large HEX code when you move the R, G and B fields or sliders. Every code, including HSL, OKLCH and the versions with opacity, has its own copy button. "HEX worked out" shows the calculation for each channel and a bar for where it falls between 0 and 255. Below that, you can see the WCAG contrast ratio of white text and black text on this color.

When you need to convert between HEX and RGB

• Moving a color from a design mockup into code: if a mockup or brand guide gives the color as HEX and you also need transparency, use rgb(R G B / alpha) or an eight-digit HEX.
• Passing a color to a program: many programming languages and graphics libraries take a color as three numbers from 0 to 255. Convert the HEX to RGB numbers and you can paste them in directly.
• Adjusting a color bit by bit: raise or lower one channel with the RGB sliders and see how the HEX changes at once. To adjust by lightness or saturation, look at the HSL or OKLCH values too.
• Checking that text is readable: the contrast ratio tells you whether white or black text reads better on a button or background color.

How the conversion works

1. HEX to RGB: split the six digits after # into pairs for R, G and B, and turn each pair into first digit × 16 + second digit. DB is 13 × 16 + 11 = 219.
2. RGB to HEX: divide each value by 16 and write the quotient and the remainder as one hex digit each. 152 = 9 × 16 + 8, so it is 98. A value below 16 gets a leading 0 to make two digits.
3. Short forms: three-digit #39F doubles every digit to become #3399FF, and four-digit #39F8 becomes #3399FF88 (CSS Color 4).
4. Opacity: in an eight-digit HEX the last two digits are alpha, where 00 is fully transparent and FF is fully opaque. Multiply the percentage by 255, round, and write it in hex.

HEX notation and the rgb() and hsl() syntax follow the W3C CSS Color Module Level 4 (Candidate Recommendation Draft of 2026-10-09), and contrast follows WCAG 2.2. Both sources were checked on 2026-10-12.

HEX and RGB table for the 16 basic colors

These are the values of the 16 basic color names defined by CSS. Click one under "16 basic colors" in the converter above and it loads straight into the field.

green (#008000) is a dark green with a green channel of 128, and the bright green with a channel of 255 is lime (#00FF00). Guessing a value from its name is easy to get wrong, so check the HEX.

Opacity and the last two HEX digits

The last two digits of an eight-digit HEX are the opacity written as a value from 0 to 255. The percentage is multiplied by 255 and rounded, so converting back to a percentage can differ slightly. 50% becomes 128 (80), and 128 ÷ 255 is 50.2%.

Color notations in CSS

• HEX: #3498DB, the short #39F (only when each channel's two digits are the same), and #3498DB80 with opacity. Letter case does not matter.
• rgb(): the older syntax rgb(52, 152, 219) separates values with commas, and the newer rgb(52 152 219 / 50%) uses spaces and a slash. In CSS Color 4, rgba() is an alias of rgb(), so rgba(52, 152, 219, 0.5) means the same thing.
• hsl(): written as hue (0 to 360), saturation and lightness. To make the same color lighter or darker, you only change the lightness value.
• oklch(): a notation based on OKLab, defined in CSS Color 4, that splits lightness, chroma and hue in a way closer to what people perceive. It can help when building a set of colors with equal lightness.
• HSV: common in the color pickers of graphics programs, but CSS has no function for it. Treat it as reference only.

How to read the white and black text contrast

WCAG 2.2 finds the relative luminance of two colors and computes the contrast ratio as (lighter + 0.05) ÷ (darker + 0.05). Relative luminance converts each channel to a 0 to 1 value, removes the gamma, and adds the channels with weights of 0.2126 for red, 0.7152 for green and 0.0722 for blue. AA needs at least 4.5 : 1 for normal body text and 3 : 1 for large text (18 point or larger, or 14 point or larger if bold), and AAA needs at least 7 : 1 for body text. The example #3498DB has 3.15 : 1 with white text and 6.66 : 1 with black text, so black is the right choice for body text. This converter judges the ratio without rounding it first. For any other pair of colors, use a color accessibility checker.

Common mistakes

• Expanding a three-digit HEX by adding zeros: #39F is #3399FF, not #3090F0. Each digit is written twice.
• Expecting the opacity percentage to come back exactly: 50% becomes 80 (128), and converting back gives 50.2%, because alpha is stored as an integer from 0 to 255.
• Mixing RGB values from 0 to 1 with values from 0 to 255: some graphics tools take channels as decimals from 0 to 1. Then divide by 255, for example 52 ÷ 255 = 0.204.
• Judging contrast on a transparent color as it is: a transparent color appears mixed with the background behind it, so check again with the color after it has been blended with the real background.
• Reusing a value that went through HSL and back: HSL rounded to integers can come back with channels off by a few units (up to about 5). Copy the exact color as HEX or rgb().
• Guessing a value from the color name: in CSS, green is #008000, and #00FF00 is lime.

Limits and notes

• Only sRGB colors are handled. If you enter a value from a wider color space such as display-p3, the calculation uses the value the browser converts to sRGB.
• HSL and HSV are shown as integers. OKLCH is rounded to one decimal for lightness, three for chroma and one for hue.
• For neutral colors (grays) the hue is undefined, so it is shown as 0.
• Contrast is calculated for the opaque color, ignoring opacity. It does not reflect text weight, size or screen brightness.
• The look and features of the color picker differ by browser and operating system.

Sources

• 01W3C — CSS Color Module Level 4Candidate Recommendation Draft of 2026-10-09. §5.2 HEX with 3, 4, 6 and 8 digits and the expansion rule, alpha 00 and ff, rgba() as an alias of rgb(), new and legacy syntax, §6.1 basic color names, §7.2 sRGB to HSL, OKLab and OKLCH. Checked 2026-10-12
• 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2Relative luminance (0.04045 threshold, 0.03928 before May 2021), contrast ratio (L1 + 0.05) / (L2 + 0.05), 1.4.3 AA 4.5 : 1 and 3 : 1 for large text, 1.4.6 AAA 7 : 1, definition of large text

Frequently asked questions

Tools to use with this one