HEX to RGB Converter

The HEX to RGB converter above translates any hexadecimal color code into its red, green, and blue components instantly. No formulas. No guesswork.

What Is a HEX Color Code?

A HEX code is a 6-digit (or 8-digit) string that represents a color in the CSS color model. Each pair of digits is a hexadecimal number from 00 to FF, mapping to an intensity value between 0 and 255 for red, green, and blue respectively. The 8-digit variant adds an alpha channel for transparency.

How to Use This Tool

1. Type or paste your HEX code into the input field. The # symbol is stripped automatically.
2. Read the R, G, B (and A) values from the channel cards.
3. Use the sliders to adjust any channel and fine-tune the color.
4. Click Copy to copy the full rgb() or rgba() string to your clipboard.

Why Convert HEX to RGB?

HEX is great for static stylesheets. RGB is better when you need to manipulate color values programmatically, apply transparency, or pass color data into canvas, WebGL, or animation libraries. Some design tools and APIs only accept RGB tuples.

• CSS custom properties and color-mix() functions often require RGB
• JavaScript canvas operations use rgb() and rgba() syntax
• Data visualization libraries like D3.js work natively with RGB values
• Accessibility contrast checks require separate channel values

The Conversion Formula

The math is straightforward. Split the 6-digit HEX string into three 2-character pairs, then convert each from base 16 to base 10.

For alpha, the same logic applies. The result is then divided by 255 to get a decimal between 0 (fully transparent) and 1 (fully opaque).

What Is a HEX to RGB Converter?

A HEX to RGB converter is a tool that translates a hexadecimal color code into its three numeric color channel values: red, green, and blue. The color itself doesn't change. Only the notation does.

Both formats describe colors within the sRGB color space. The converter simply rewrites the same color value in a format that a different system, language, or platform can actually read.

According to the 2022 Web Almanac, 6-digit and 3-digit hex formats combined account for 74% of all color declarations across the web. RGB notation sits at around 14% (Stack Overflow, 2019). That gap explains why the conversion comes up constantly in real workflows.

What Is a HEX Color Code?

Format: #RRGGBB - a hash followed by 6 characters.

Each character pair encodes one color channel in base-16:

• 00 = zero intensity (0 in decimal)

• FF = full intensity (255 in decimal)

• Letters A–F represent values 10–15

So #FF5733 means red at full intensity (FF = 255), green at 87 (57), blue at 51 (33).

The 3-digit shorthand (#RGB) is a compressed form. #F5A expands to #FF55AA - each digit doubles.

What Is an RGB Color Value?

Format: rgb(R, G, B) - three integers, each ranging from 0 to 255.

RGB stands for red, green, blue - the 3 primary channels used by every screen to produce color through light emission. Mixing all 3 at full intensity (255, 255, 255) gives white. Zero across all 3 gives black.

The rgb() function is native CSS. The rgba() variant adds a 4th value for opacity, from 0.0 (fully transparent) to 1.0 (fully opaque).

How Does HEX to RGB Conversion Work?

HEX to RGB conversion splits a 6-character hex string into 3 pairs, then converts each pair from base-16 to base-10. The result is 3 integers between 0 and 255.

No approximation is involved. The conversion is mathematically exact and fully reversible - you can go from HEX to RGB and back without losing any color data.

How to Convert a HEX Pair to a Decimal Number

Take the hex code #A3D2F1. Split it: A3, D2, F1.

For each pair, apply positional base-16 arithmetic:

Result: rgb(163, 210, 241).

The letters A through F map to 10 through 15. That's the base-16 system - digits go 0–9, then A (10), B (11), C (12), D (13), E (14), F (15).

How 3-Digit HEX Codes Are Handled

3-digit hex codes use a doubling rule before conversion. Each single digit becomes a repeated pair.

#A3F expands to #AA33FF first, then converts normally:

• AA → (10 × 16) + 10 = 170

• 33 → (3 × 16) + 3 = 51

• FF → (15 × 16) + 15 = 255

Result: rgb(170, 51, 255).

Skipping this expansion step before conversion is one of the most common errors in custom implementations. The shorthand only works for colors where both digits in a pair are identical - #RGB only works when the full code would be #RRGGBB.

How to Use a HEX to RGB Converter Online?

Paste a hex color code, get the RGB values back. Most online tools handle both #RRGGBB and RRGGBB input (with or without the hash).

Output varies by tool. Some return plain integers. Others give you a CSS-ready string like rgb(163, 210, 241), or an rgba() variant with an alpha slider.

What Online HEX to RGB Tools Are Available?

RapidTables - returns R, G, B integers and the rgb() CSS string. Clean, fast, no clutter.

HTML Color Codes - adds a color preview swatch and a copy-to-clipboard button. Good when you need visual confirmation of what you're converting.

Adobe Color - goes further. It converts between HEX, RGB, HSL, HSB, CMYK, and Lab from a single input. Useful when a project spans print and screen deliverables.

Coolors - built for palette work. You can convert individual swatches inside a full palette without leaving the tool. Figma users tend to live here.

For accessibility workflows specifically, the WebAIM Contrast Checker accepts hex input and converts internally to calculate luminance and contrast ratios against WCAG 2.1 thresholds.

How to Convert HEX to RGB in CSS?

CSS accepts both #RRGGBB and rgb(R, G, B) natively. No conversion tool required for static color values - you write either format directly in your stylesheet.

The formats produce identical visual output. The choice between them comes down to what you need to do with the color programmatically.

When to Use HEX in CSS

HEX is shorter to write. #3B82F6 takes less space than rgb(59, 130, 246). For static color declarations in stylesheets, HEX remains the dominant choice - 54% of developers prefer it for CSS color values (Stack Overflow, 2019).

Use HEX when:

• The color value won't be manipulated by JavaScript

• You're working with design tokens from Figma (which exports HEX by default)

• Markup brevity matters more than readability

When to Use RGB in CSS

RGB is better when you need to modify a channel value dynamically or apply opacity without RGBA syntax.

CSS custom properties with RGB are especially practical:

:root {
  --brand-rgb: 59, 130, 246;
}

.overlay {
  background: rgba(var(--brand-rgb), 0.4);
}

This pattern lets you reuse one color definition at multiple opacity levels without rewriting the full rgba() value each time.

rgba() support goes back to IE9. rgb() has been supported since IE4. Both are safe in any modern production environment.

How to Convert HEX to RGB in JavaScript?

parseInt(hexPair, 16) is the core of every HEX to RGB conversion in JavaScript. It reads a 2-character string as base-16 and returns a decimal integer.

The full process: strip the hash if present, slice the string into 3 pairs, run parseInt on each with a radix of 16.

JavaScript Function for 6-Digit HEX

function hexToRgb(hex) {
  hex = hex.replace(/^#/, '');

  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);

  return { r, g, b };
}

// hexToRgb('#A3D2F1') → { r: 163, g: 210, b: 241 }

Returning an object ({r, g, b}) makes it easier to destructure into CSS strings, canvas operations, or accessibility calculations downstream.

If you need a CSS-ready string directly:

const { r, g, b } = hexToRgb('#A3D2F1');
const cssString = `rgb(${r}, ${g}, ${b})`;

One thing to watch: parseInt is case-insensitive for hex digits. parseInt('FF', 16) and parseInt('ff', 16) both return 255. That said, if you're doing string comparisons elsewhere in your code (not just conversion), case matters. Normalize to lowercase early with .toLowerCase() to avoid inconsistencies later.

Handling 3-Digit HEX in JavaScript

3-digit codes need expansion before conversion. A regex handles this cleanly:

function normalizeHex(hex) {
  hex = hex.replace(/^#/, '');
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  return hex;
}

This runs before the parseInt step. Skipping it causes slicing errors - hex.slice(0, 2) on a 3-character string pulls the wrong pair entirely.

The HTML5 Canvas API accepts ctx.fillStyle in HEX or named colors, but calculations on canvas pixel data (via getImageData) return RGBA integer arrays. So if you're drawing to canvas and need to read back color values, you're already working in RGB - no separate conversion needed at read time.

How to Convert HEX to RGB in Python?

Python's built-in int() function handles hex-to-decimal conversion directly. Pass the hex string with a base of 16: int('A3', 16) returns 163.

The same 3-step process applies: strip the hash, slice into 2-character pairs, convert each pair with int(pair, 16).

Python Function for HEX Conversion

def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)
    return (r, g, b)

# hex_to_rgb('#A3D2F1') → (163, 210, 241)

PIL/Pillow takes a shortcut. ImageColor.getrgb('#A3D2F1') returns the RGB tuple directly - no manual slicing required. Pillow's ImageColor module (part of Pillow 10.x, released in 2023–2024) handles named colors, hex codes, and CSS-style rgb() strings through a single function call.

from PIL import ImageColor
rgb = ImageColor.getrgb('#A3D2F1')
# → (163, 210, 241)

Matplotlib and Plotly Color Pipelines

This is where the int vs. float issue actually bites people.

Matplotlib requires normalized RGB floats in the range 0.0–1.0, not integers 0–255. Passing raw integer values produces unexpected colors or outright errors.

# Wrong for Matplotlib
color = (163, 210, 241)

# Correct
color = tuple(c / 255 for c in hex_to_rgb('#A3D2F1'))
# → (0.639, 0.824, 0.945)

Plotly accepts both formats depending on context. px.scatter() takes CSS-style hex strings directly. Lower-level go.Scatter() with marker_color also accepts RGB tuples - but as integers, not floats. The inconsistency between libraries is tricky. Worth checking the docs for the specific version you're running before assuming one format works everywhere.

OpenCV adds another wrinkle: it reads images in BGR channel order, not RGB. A hex code converted to (R, G, B) needs to be reversed to (B, G, R) before passing it to OpenCV color operations. Took me longer than I'd like to admit to track that one down the first time.

Where Is HEX to RGB Conversion Used?

HEX to RGB conversion comes up whenever a system that stores colors in hex notation needs to pass those values to a platform, API, or calculation that requires numeric channel values.

The 3 most common contexts are CSS manipulation via JavaScript, image processing pipelines, and accessibility compliance checks.

Web Development

Static CSS: both formats work without conversion.

JavaScript color manipulation: requires RGB. Darkening a color by reducing channel values, generating complementary colors, or blending two colors - all of these operate on integers, not hex strings.

Canvas API: ctx.fillStyle accepts hex. But getImageData() returns pixel data as a flat RGBA array of integers. If you're reading pixel colors back from a canvas, you're already in RGB.

SVG styling via JavaScript: SVG fill and stroke attributes accept hex. But attribute-level animation and JavaScript-driven gradient interpolation work more predictably with rgb() values, especially across browsers.

UI/UX Design Tools

Figma exports design tokens and color styles as HEX by default. Most design APIs and front-end token systems expect HEX as input.

But CSS-in-JS libraries like Styled Components and Emotion often need RGB when applying dynamic opacity or mixing colors programmatically. The conversion happens at the handoff between design output and implementation.

96.3% of the top million homepages failed ADA accessibility standards in 2023, with an average of 50 barriers per page (WebAIM, 2023). Color contrast is consistently one of the top violation categories. WCAG 2.1 contrast ratio calculations require relative luminance values derived from linear RGB, which means any accessibility check that starts from a hex code needs this conversion as a first step.

Image Processing and Data Visualization

Each platform handles RGB differently. Treating them as interchangeable is the fastest way to introduce hard-to-spot color bugs in a pipeline.

What Is the Difference Between HEX, RGB, and RGBA?

HEX and RGB describe the same sRGB color space. The only difference is notation. RGBA is a separate format - it adds a 4th channel for transparency that neither standard HEX nor RGB carries.

Choosing between them isn't about color accuracy. It's about what the target platform, language, or calculation requires.

HEX vs. RGB: What Actually Differs

Nothing, visually. #3B82F6 and rgb(59, 130, 246) render identically in every browser.

The real differences are practical:

• HEX is shorter. #3B82F6 vs. rgb(59, 130, 246) - fewer characters, faster to write

• RGB is easier to read programmatically, since channel values are plain integers

• HEX is what design tools export. Figma, Adobe Color, and Sketch all default to hex output

Mixing both formats in the same codebase adds cognitive load without adding capability. Pick one for your static declarations, stick to it (devx.com, 2025).

What RGBA Adds

rgba() extends RGB with a 4th alpha parameter that controls opacity, from 0.0 (fully transparent) to 1.0 (fully opaque).

Standard 6-digit hex has no alpha channel. The W3C CSS Color Level 4 spec introduced 8-digit hex (#RRGGBBAA) to fill this gap, but adoption is low - it appeared at effectively 0% usage in the 2022 Web Almanac.

In practice, when you need transparency: use rgba().

/* Semi-transparent overlay */
background: rgba(59, 130, 246, 0.4);

/* Equivalent modern syntax (CSS Color Level 4) */
background: rgb(59 130 246 / 0.4);

The rgba() and hsla() functions are now considered legacy syntax by the CSS working group. The modern syntax uses a forward slash inside rgb(). Both produce identical output in all current browsers (Chrome 111+, Safari 16.4+, Firefox 113+).

What Are Common HEX to RGB Conversion Errors?

Most HEX to RGB errors fall into 3 categories: string handling mistakes, 3-digit shorthand oversights, and format mismatches between platforms.

Hardcoding hex values without abstraction is the single most common team-level mistake. When a brand color changes, every hardcoded instance needs manual updates. That's not a conversion error, but it's the most expensive color bug in production (devx.com, 2025).

String Slicing and Index Errors

The off-by-one problem: #A3D2F1 is 7 characters. If your code doesn't strip the hash first, slicing [0:2] pulls #A instead of A3.

Always run .replace('#', '') or .lstrip('#') before slicing.

A second tricky one: passing a 3-character string to a 6-character slicing function. hex.slice(4, 6) on 'A3F' returns an empty string. No error thrown, just a silent wrong value.

3-Digit HEX Skipped

The forgotten expansion: Passing #F5A directly into a base-16 parser without doubling each digit first gives completely wrong color values.

int('F5', 16) = 245. But F from #F5A should expand to FF = 255 first.

The fix is always the same:

if len(hex_color) == 3:
    hex_color = ''.join([c*2 for c in hex_color])

Skip this step and you're converting the wrong color - with no warning from the language.

Platform Float vs. Integer Mismatch

3 different expectations, same conversion output:

• Matplotlib: requires floats 0.0–1.0 (divide each integer by 255)

• OpenCV: expects integers 0–255 in BGR order (not RGB)

• CSS/JS: expects integers 0–255 in RGB order

Passing (163, 210, 241) directly to Matplotlib's color argument produces unexpected results. The integer 163 gets interpreted as out-of-range. No color error, just a wrong visual.

Alpha channel confusion causes similar issues. CSS rgba() uses 0–1 for alpha. Some tools output alpha as 0–255. A value of 128 passed as CSS alpha gives rgba(163, 210, 241, 128) - valid syntax, invisible result because 128 is treated as 128.0 and clamped to 1.0 in some parsers.

How to Convert HEX to RGB for Accessibility Checks?

WCAG 2.1 contrast ratio calculations don't work on hex strings or raw RGB integers. They require relative luminance, a value derived from linearized sRGB channel data.

80.3% of the top 1 million websites have detectable contrast failures - the most common accessibility error category on the web (WebAIM, 2024).

Converting HEX to RGB is step 1 of a 4-step process to get a usable contrast ratio.

The 4-Step Luminance Calculation

Step 1: Convert HEX to RGB integers.

#595959 → R: 89, G: 89, B: 89

Step 2: Normalize to 0.0–1.0.

Divide each value by 255: 89 / 255 = 0.349

Step 3: Apply sRGB gamma correction (linearization).

RGB values from screens are gamma-encoded, not linear. Raw normalized values don't reflect actual light intensity. Apply the IEC 61966-2-1 formula per channel:

If value <= 0.04045:  linear = value / 12.92
If value > 0.04045:   linear = ((value + 0.055) / 1.055) ^ 2.4

Step 4: Apply the WCAG luminance formula.

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Green is weighted at 0.7152 because the human eye perceives green as significantly brighter than red or blue at equal intensity (W3C, WCAG 2.1).

Contrast Ratio from Two Luminance Values

With luminance values L1 (lighter color) and L2 (darker color):

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

The 0.05 offset accounts for ambient light reflection. Black on white gives (1.05 / 0.05) = 21:1. Identical colors give 1:1.

#767676 on white sits at exactly 4.54:1 - the lowest hex value that passes AA for body text. #595959 on white hits 7:1, clearing AAA.

Tools that automate this entire pipeline: WebAIM Contrast Checker (accepts hex directly), Stark for Figma, and axe DevTools for in-browser audits. The W3C's own color contrast checker at www.w3.org also handles hex input and returns luminance plus ratio.

HEX to RGB Conversion Reference Table

The 20 colors below cover the most-used values in web development: the CSS named color anchors, common UI grays, and standard brand primaries.

All HEX values follow the #RRGGBB format. RGB values are integers in the 0–255 range. CSS named color equivalents are included where they exist.

A few things worth knowing about this table.

#00FF00 is not the same as "green" in CSS. The CSS named color green maps to #008000, which is rgb(0, 128, 0) - half the intensity of lime. Confusing these two is more common than it should be.

Tailwind CSS colors are included because they appear constantly in real codebases and frequently need conversion for JavaScript canvas work, Figma handoffs, and accessibility audits.

CSS named colors map directly to sRGB hex values. The 140 named colors defined in the CSS3 specification all have unambiguous hex and RGB equivalents. When a named color appears in computed style output from getComputedStyle(), browsers return it as an rgb() string, not the name - so color: red computed reads as rgb(255, 0, 0).

FAQ on HEX to RGB Converters

What does a HEX to RGB converter do?

It translates a hexadecimal color code into three numeric values: red, green, and blue.

The color itself doesn't change. Only the notation does. Both formats describe the same sRGB color space.

What is the formula for HEX to RGB conversion?

Split the 6-character hex string into 3 pairs. Convert each pair from base-16 to base-10 using positional arithmetic.

For example, A3 becomes (10 × 16) + 3 = 163. The result is an RGB integer between 0 and 255.

Can I convert a 3-digit HEX code to RGB?

Yes, but you must expand it first. Each digit doubles: #F5A becomes #FF55AA.

Then convert normally. Skipping this step gives the wrong color values with no error message from the parser.

What is the difference between RGB and RGBA?

RGB has 3 channels: red, green, blue. RGBA adds a 4th alpha channel that controls opacity, from 0.0 (transparent) to 1.0 (fully opaque).

Standard 6-digit hex has no native alpha. Use rgba() when you need transparency.

Which tools convert HEX to RGB online?

RapidTables, HTML Color Codes, Adobe Color, and Coolors all handle hex color code conversion.

For accessibility checks, WebAIM Contrast Checker accepts hex input and calculates WCAG 2.1 contrast ratios automatically.

How do I convert HEX to RGB in JavaScript?

Use parseInt(hexPair, 16) on each 2-character substring after stripping the hash.

const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);

How do I convert HEX to RGB in Python?

Use int(pair, 16) on each sliced pair, or call ImageColor.getrgb('#RRGGBB') from PIL/Pillow directly.

For Matplotlib, divide each integer by 255. It requires normalized floats (0.0–1.0), not raw 0–255 integers.

Why does HEX to RGB conversion matter for accessibility?

WCAG 2.1 contrast ratio calculations require relative luminance, derived from linearized RGB values.

You cannot calculate luminance from a hex string directly. The conversion to RGB integers is the mandatory first step in every accessibility color check.

Is HEX to RGB conversion reversible?

Yes. The conversion is mathematically exact in both directions.

No data is lost going from hex to RGB or back. #A3D2F1 converts to rgb(163, 210, 241) and back to #A3D2F1 without any rounding or approximation.

What are the most common HEX to RGB conversion errors?

3 errors come up constantly: forgetting to strip the hash before slicing, skipping 3-digit hex expansion, and passing RGB integers to platforms that expect floats.

OpenCV also uses BGR channel order, not RGB, which silently produces wrong colors if uncorrected.