Hex to RGB Converter

What is a hex color code?

A hex color code writes a screen color as three two-digit hexadecimal numbers after a hash sign: #RRGGBB. The first pair is the amount of red, the second green and the third blue, each from 00 (none) to ff (full). In decimal that is 0 to 255 per channel, exactly the numbers an rgb() color uses. Hex and RGB are two spellings of the same color, not two different color systems.

Hexadecimal is base 16. It needs sixteen digits, so after 0 to 9 it borrows the letters a to f. Case does not matter: #FF5733 and #ff5733 are the same color.

With 256 levels for each of three channels, a six-digit code can name 256 × 256 × 256 = 16,777,216 colors. The notation is defined in CSS Color Module Level 4, the W3C specification for colors on the web, which also defines rgb(), hsl(), oklch() and the other formats this converter outputs. All of these name colors in the sRGB space that ordinary screens use, except oklch(), lab() and color(), which can also reach the wider gamut of newer displays.

How to convert hex to RGB by hand

The converter above does this instantly, but the math is short enough to do in your head once you have seen it:

1. Remove the # and, for a three-digit code, write each digit twice.
2. Split the six digits into three pairs: red, green and blue.
3. Convert each pair from base 16 to base 10: 16 times the first digit, plus the second digit.
4. Write the three numbers as rgb(red, green, blue).

Here is #ff5733, a warm orange-red, worked through:

So #ff5733 is rgb(255, 87, 51), or rgb(255 87 51) in the newer CSS syntax without commas. A few landmarks make quick estimates easy: 00 is 0, 80 is 128 (just over half), cc is 204 and ff is 255.

Three-digit, four-digit and eight-digit hex codes

CSS accepts hex codes with 3, 4, 6 or 8 digits. The short forms double every digit, so #f53 means #ff5533, which is rgb(255, 85, 51), not the same as #ff5733. Only 4,096 colors have a three-digit form, which is why most design tools give you six digits.

The extra pair in an eight-digit code is alpha, the opacity: 00 is fully transparent and ff fully opaque. To get the CSS alpha value, divide the pair by 255. In #ff573380 the alpha pair 80 is 128, and 128 ÷ 255 ≈ 0.502, so the color is about rgba(255, 87, 51, 0.5). The converter shows 0.5 because it uses the fewest decimals that turn back into the same alpha byte. A four-digit code is the shorthand version: #f538 is #ff553388, and 88 is 136, so its alpha is 136 ÷ 255 ≈ 0.533.

Going the other way, multiply the opacity by 255, round, and write the result in hex. These are the pairs you will use most:

How to convert RGB to hex

Divide each channel by 16. The whole-number result is the first hex digit and the remainder is the second, with 10 to 15 written as a to f. For rgb(255, 87, 51): 255 ÷ 16 = 15 remainder 15, which is ff; 87 ÷ 16 = 5 remainder 7, which is 57; and 51 ÷ 16 = 3 remainder 3, which is 33. Put them together and you have #ff5733.

Values under 16 need a leading zero, or the code comes out too short: 10 is 0a, so rgb(10, 0, 255) is #0a00ff. For RGBA to hex, also convert the alpha: multiply it by 255 and round, so 0.5 × 255 = 127.5 rounds to 128, which is 80, giving #ff573380. In the converter, type the numbers into the Red, Green, Blue and Alpha boxes, or drag the sliders, and the hex code updates as you go.

HEX, RGB, HSL or OKLCH: which CSS format to use

Every format below describes the same color, #ff5733. Browsers treat them identically, so the choice is about what is easiest to read and edit.

CSS Color Level 4 made the commas optional and put alpha after a slash, so rgb(255 87 51 / 50%) and rgba(255, 87, 51, 0.5) are the same color. The two function names are now aliases: rgb() takes alpha too, and rgba() accepts the new syntax. Every current browser supports both, so use whichever style your codebase already has.

HSL is handy for quick tweaks, but its lightness is not what your eye sees. Pure blue, hsl(240 100% 50%), and pure yellow, hsl(60 100% 50%), both have 50% lightness, yet yellow looks far brighter. OKLCH fixes that: the same two colors have lightness 0.452 and 0.968. That is why OKLCH is the better choice for building palettes, tints and shades. oklch(), lab() and color() have worked in all major browsers since May 2023.

The formulas behind each conversion

Every formula here comes from CSS Color Module Level 4 (HSL, HWB, Lab and OKLCH) or is the standard textbook definition (HSV and CMYK). Channels are scaled to 0–1 first, so for #ff5733 R = 1, G = 87 ÷ 255 ≈ 0.341 and B = 51 ÷ 255 = 0.2.

HSL

max = largest channel, min = smallest channel
L = (max + min) / 2
S = (max − L) / min(L, 1 − L)        0 when max = min
H = 60 × (G − B) / (max − min)       when red is largest
    (add 360° if that is negative; when green is largest use
     (B − R) and add 120°, when blue is use (R − G) and add 240°)

For #ff5733: L = (1 + 0.2) ÷ 2 = 0.6, S = 0.4 ÷ 0.4 = 100%, and H = 60 × 36 ÷ 204 ≈ 10.6°, giving hsl(10.6 100% 60%). Rounding the hue to 11° would give back #ff5833, a slightly different color, which is why the converter keeps one decimal here.

HSV (also called HSB)

HSV uses the same hue as HSL, with V = max and S = (max − min) ÷ max. For #ff5733 that is V = 100% and S = 0.8 ÷ 1 = 80%. HSV is common in color pickers, but CSS has no hsv() function.

CMYK (a naive approximation)

K = 1 − max(R, G, B)
C = (1 − R − K) / (1 − K)
M = (1 − G − K) / (1 − K)
Y = (1 − B − K) / (1 − K)            all 0 when K = 1 (black)

For #ff5733 this gives C 0%, M 66%, Y 80%, K 0%.

Not for print. This formula knows nothing about inks, paper or presses, so it cannot tell you what a printer will produce. Real print conversion uses an ICC color profile for the specific printing condition. Treat the CMYK numbers as a rough starting point and ask your printer for proofs.

OKLCH, OKLab, Lab and LCH

These start by undoing the sRGB gamma curve: a channel up to 0.04045 is divided by 12.92, anything larger becomes ((v + 0.055) ÷ 1.055)^2.4. The linear values are multiplied by a 3 × 3 matrix to get CIE XYZ. For OKLab, a second matrix turns XYZ into cone responses, each is cube-rooted, and a third matrix gives L, a and b. OKLCH is the same color in polar form: C = √(a² + b²) and h = atan2(b, a). CIE Lab works the same way with a D50 white point, so it adapts XYZ from D65 to D50 first. The converter uses the exact matrices published in the CSS specification.

When you type an oklch(), lab() or display-p3 color that ordinary screens cannot show, the converter maps it into sRGB the way CSS does: it lowers the chroma at the same lightness and hue until the color fits, and tells you it did.

Contrast ratio and WCAG 2.2

WCAG, the Web Content Accessibility Guidelines, measures contrast between two colors from their relative luminance:

each channel c (0–1):  c ≤ 0.04045 → c / 12.92
                       otherwise   → ((c + 0.055) / 1.055)^2.4
L = 0.2126 R + 0.7152 G + 0.0722 B

contrast ratio = (L1 + 0.05) / (L2 + 0.05)    L1 = the lighter color

For #ff5733 the linear channels are 1, 0.0953 and 0.0331, so L = 0.2126 + 0.7152 × 0.0953 + 0.0722 × 0.0331 ≈ 0.2832. Against white (L = 1) the ratio is 1.05 ÷ 0.3332 ≈ 3.15:1; against black (L = 0) it is 0.3332 ÷ 0.05 ≈ 6.66:1. So white text on this orange passes only for large text, and black text passes level AA but not AAA.

The thresholds are hard limits. WCAG's own guidance says not to round, so a ratio of 4.499:1 fails 4.5:1. This tool compares the unrounded value and shows the ratio cut off at two decimals rather than rounded, so a fail never displays as 4.50:1. That is why #777777 on white shows 4.47:1 (the exact value is 4.478:1, a fail), while #767676, at 4.54:1, is the lightest gray that passes AA on white.

WCAG does not say how to handle transparency. The Contrast tab blends a translucent text color over the background, and a translucent background over white, which is WCAG's default background, before it measures.

Common colors in HEX, RGB and HSL

The 16 basic CSS color names, plus orange and rebeccapurple, with their values and their contrast ratio against white. CSS defines 148 color names in all, and the converter tells you when your color matches one, or which named color is closest.

The names are a historical mix: 16 came from early computer palettes and most of the rest from an old Unix color list. They are not evenly spread or even consistent, and darkgray is lighter than gray. Use them for quick experiments, and hex or OKLCH values in a design system.

Convert hex to RGB in code

If you need the conversion in your own project, it is a few lines in any language. These handle the 3, 4, 6 and 8-digit forms.

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '')
  if (h.length === 3 || h.length === 4) h = [...h].map((d) => d + d).join('')
  const n = parseInt(h, 16)
  if (h.length === 8) return { r: n >>> 24, g: (n >>> 16) & 255, b: (n >>> 8) & 255, a: (n & 255) / 255 }
  return { r: n >> 16, g: (n >> 8) & 255, b: n & 255, a: 1 }
}
hexToRgb('#ff5733')   // { r: 255, g: 87, b: 51, a: 1 }

const rgbToHex = (r, g, b) => '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('')
rgbToHex(255, 87, 51) // '#ff5733'

def hex_to_rgb(h):
    h = h.lstrip('#')
    if len(h) in (3, 4):
        h = ''.join(c * 2 for c in h)
    return tuple(int(h[i:i + 2], 16) for i in range(0, len(h), 2))

hex_to_rgb('#ff5733')                        # (255, 87, 51)
tuple(bytes.fromhex('ff5733'))               # (255, 87, 51)
'#{:02x}{:02x}{:02x}'.format(255, 87, 51)    # '#ff5733'

.button {
  /* the same color, three ways */
  background: #ff5733;
  background: rgb(255 87 51);
  background: oklch(0.68 0.21 33.7);

  /* about 50% opacity: an 8-digit hex, or a relative color made from the hex */
  background: #ff573380;
  background: rgb(from #ff5733 r g b / 50%);
}

The relative color syntax on the last line takes the channels of an existing color and changes only the alpha. It has worked in all major browsers since September 2024; on older browsers, use the eight-digit hex.

How this converter works, and why nothing leaves your device

Every conversion on this page is done by JavaScript running in your own browser tab, with no library and no server. The color math follows the sample code published with CSS Color Module Level 4, and the contrast math follows the WCAG 2.2 definitions.

• Nothing is uploaded. The page's Content-Security-Policy only allows connections back to this site, and the converter makes none. Open your browser's Network panel and convert a few hundred colors: no request appears.
• Works offline. Once the page has loaded you can disconnect and keep converting.
• No account, no cookies. Your last color, tab and options are kept in your browser's local storage, on your device only.
• Pick from screen uses the browser's built-in eyedropper where one exists (Chromium-based browsers today). The browser asks before it reads a pixel, and only that color reaches the page.

Sources

• W3C, CSS Color Module Level 4, Candidate Recommendation Draft (9 October 2026): §5.1 rgb() and rgba(), §5.2 hex notation, §6.1 named colors, §7 HSL, §8 HWB, §9 Lab, LCH, Oklab and OkLCh, §14.2 gamut mapping, and the sample code for color conversions.
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation (12 December 2024): the definitions of relative luminance, contrast ratio and large-scale text, and Success Criteria 1.4.3, 1.4.6 and 1.4.11.
• W3C WAI, Understanding Success Criterion 1.4.3: Contrast (Minimum), on thresholds without rounding and on point-to-pixel sizes.
• W3C WAI, Understanding Success Criterion 1.4.6: Contrast (Enhanced).
• W3C WAI, Understanding Success Criterion 1.4.11: Non-text Contrast.
• IEC 61966-2-1:1999, Multimedia systems and equipment: Colour measurement and management, Part 2-1: Default RGB colour space, sRGB, the source of the sRGB transfer function.
• Björn Ottosson, A perceptual color space for image processing (2020), the original description of Oklab.
• MDN Web Docs: <hex-color>, rgb(), oklch(), <named-color> and EyeDropper.
• Web Platform Status: Oklab and OkLCh, for browser support dates (Baseline since May 2023, widely available since November 2025).

Reviewed by microplugins · Last updated October 2026