OmniCalc

Hex to RGB

Web & Dev

Convert hex colors to RGB

Hex and RGB are the two most common ways to specify color in CSS, and developers regularly need to convert between them — a designer hands off a hex code from Figma, but a canvas API or a JavaScript color library expects RGB values, or vice versa. Doing the hexadecimal-to-decimal math by hand for six characters at a time is slow and error-prone.

Our hex to RGB converter handles the conversion instantly and precisely. Enter any 6-digit hex color code (with or without the leading #), and the tool splits it into its red, green, and blue channel pairs, converts each from base-16 to base-10, and returns the exact RGB triplet — ready to paste into rgb() or rgba() CSS functions, canvas fillStyle calls, or design tool color pickers.

Whether you're building a design token pipeline, debugging a color mismatch between design and code, or just need a quick conversion, this tool eliminates manual hex math entirely.

Why Hex to RGB Matters

Color format conversion comes up constantly in front-end and design engineering work. Design tools like Figma and Sketch typically display hex codes, while many JavaScript color manipulation libraries (chroma.js, tinycolor2, color.js) and the HTML5 Canvas API operate on RGB or RGBA values internally. Converting accurately between the two ensures a brand's colors stay pixel-perfect consistent whether they're defined in a CSS variable as #3B82F6 or passed to a canvas context as rgb(59, 130, 246).

RGB values are also required whenever you need to manipulate opacity or blend colors programmatically — CSS's rgba() function needs RGB channels plus an alpha value, and hex alone cannot express partial transparency without the less-common 8-digit hex-with-alpha notation. Developers building theming systems, dark-mode color adjustments, or dynamic color interpolation (e.g., a gradient generator or a data visualization color scale) need RGB's separated numeric channels to do math on individual color components, something that's awkward to do directly on a hex string.

The Hex to RGB Formula, Explained

R = hex[0:2] base16→base10, G = hex[2:4] base16→base10, B = hex[4:6] base16→base10

Where: hex is the 6-character hex color code (excluding the # symbol), split into three 2-character pairs representing red, green, and blue respectively. Each pair is a base-16 (hexadecimal) number ranging from 00 to FF, which converts to a base-10 (decimal) number ranging from 0 to 255.

Each hex digit represents a value from 0–15 (0–9, then A–F for 10–15). A 2-digit hex pair is calculated as (first digit × 16) + second digit. For example, the pair "3B" converts as (3 × 16) + 11 = 48 + 11 = 59, since B = 11 in hexadecimal. Applying this to all three channels of a color like #3B82F6 gives R=59, G=130 (8×16+2=130), B=246 (F×16+6=15×16+6=246).

For colors with an alpha channel (8-digit hex, e.g., #3B82F6CC), the same base-16-to-base-10 conversion is applied to the final pair, then divided by 255 to produce an alpha value between 0 and 1 for use in rgba().

How to Use the Hex to RGB: Step by Step

  1. Enter the hex code

    Type or paste a 6-digit hex color value, with or without the leading # symbol (e.g., 3B82F6 or #3B82F6).

  2. View the RGB output

    The calculator instantly returns the red, green, and blue values as a comma-separated triplet, e.g., rgb(59, 130, 246).

  3. Copy the CSS-ready value

    Use the formatted rgb() or rgba() string directly in your stylesheet, or copy the individual R, G, B numbers for use in JavaScript color libraries.

  4. Add an alpha value (optional)

    If you need transparency, add an alpha percentage to get an rgba() output for use with semi-transparent overlays or hover states.

Hex to RGB Examples: Real-World Scenarios

1

Converting a Brand Blue for a Canvas Chart

A developer needs to set the fillStyle of an HTML5 Canvas element using a brand color defined as #3B82F6 in the design system, which requires RGB rather than hex.

Hex code:#3B82F6

Calculation

R: 3B = (3×16)+11 = 59 | G: 82 = (8×16)+2 = 130 | B: F6 = (15×16)+6 = 246

Result

RGB result: rgb(59, 130, 246) — ready to use as ctx.fillStyle = 'rgb(59, 130, 246)'.

2

Debugging a Design-to-Code Color Mismatch

A QA engineer notices a button appears slightly off from the Figma spec of #FF5733 and wants to verify the exact RGB values being rendered in the browser's computed styles panel.

Hex code:#FF5733

Calculation

R: FF = (15×16)+15 = 255 | G: 57 = (5×16)+7 = 87 | B: 33 = (3×16)+3 = 51

Result

Expected RGB: rgb(255, 87, 51). If DevTools shows a different value, the mismatch confirms a CSS specificity or theming bug rather than a color definition error.

3

Converting a Dark Background Color for an Overlay

A developer needs the RGB channels of a dark navy background (#1A1A2E) to build a semi-transparent rgba() overlay for a modal backdrop.

Hex code:#1A1A2E

Calculation

R: 1A = (1×16)+10 = 26 | G: 1A = 26 | B: 2E = (2×16)+14 = 46

Result

RGB result: rgb(26, 26, 46). Overlay CSS: background-color: rgba(26, 26, 46, 0.85);

Common Mistakes to Avoid

  • Forgetting that hex letters A–F represent 10–15, not their face value — manually converting "F" as 15 rather than treating it as a placeholder for 6 is a common source of by-hand calculation errors.
  • Mixing up 3-digit shorthand hex (#F00) with 6-digit hex — shorthand hex duplicates each digit (F00 expands to FF0000), so #F00 is not the same as #F0 padded with zeros; convert shorthand to full 6-digit form first.
  • Applying gamma correction or color-space assumptions inconsistently — a raw hex-to-RGB conversion is a direct numeric conversion, not a perceptual color transformation, so converted values will not automatically account for sRGB gamma curves needed in advanced color science work.

Tips & Tricks

  • Most code editors and browser DevTools include a color picker eyedropper that outputs hex by default — use this converter immediately afterward if your codebase standardizes on RGB or RGBA for dynamic color manipulation.
  • When building a dark mode toggle, converting your brand colors to RGB first makes it easy to programmatically adjust lightness by scaling each channel, which is much harder to do safely on a hex string.

Hex and RGB represent the same underlying color, just in different numeric bases — converting between them is pure arithmetic, but doing it by hand invites mistakes. Use this tool whenever you're bridging design specs and code, and pair it with the RGB to Hex converter for round-trip color work across your CSS and JavaScript.

Hex to RGB — Frequently Asked Questions

Related Calculators

RGB to Hex Converter

convert RGB values back to hex codes

PX to REM Converter

convert your CSS spacing and typography units

Aspect Ratio Calculator

calculate dimensions for image and video assets

Base64 Encoder/Decoder

encode images and assets for inline CSS

Hash Generator

generate cache-busting hashes for your assets

Authoritative References

MDN Web Docs — CSS Color Value Types

developer.mozilla.org — Authoritative reference on hex, rgb, and rgba color syntax in CSS

W3C — CSS Color Module Level 4

w3.org — Official specification defining color notation and conversions

External links open in a new tab. OmniCalc.us is not affiliated with these organisations.

Related Calculators

PX to REM

Web & Dev

RGB to Hex

Web & Dev

Aspect Ratio

Web & Dev

Screen Resolution

Web & Dev

Download Time

Web & Dev

File Size

Web & Dev