OmniCalc

RGB to Hex

Web & Dev

Convert RGB to hex color codes

RGB values are common output from JavaScript color libraries, canvas pixel data, and design tool eyedroppers set to RGB mode — but CSS design tokens, brand style guides, and most version-controlled color palettes are typically documented as hex codes. Converting RGB triplets like rgb(59, 130, 246) into a clean #3B82F6 by hand means converting each 0–255 decimal channel into hexadecimal, which most developers can't do reliably in their head past small numbers.

Our RGB to hex converter does this instantly. Enter red, green, and blue values (each 0–255), and the tool converts each channel from decimal to hexadecimal, zero-pads any single-digit results, and combines them into a standard 6-digit hex code ready to drop into CSS, a design system token file, or an SVG fill attribute.

This is the exact reverse operation of hex-to-RGB conversion, so the two tools are commonly used together when a color needs to move between a JavaScript color-manipulation step and a static CSS or Figma reference.

Why RGB to Hex Matters

Front-end teams frequently generate colors programmatically — gradients interpolated between two RGB values, colors extracted from an uploaded image's pixel data, or theme colors computed by lightening/darkening a base RGB value by a percentage. Once that computation is done, the resulting RGB triplet often needs to be converted to hex to be saved as a CSS custom property, written into a design tokens JSON file, or documented in a style guide, since hex is the de facto standard for storing static color references in most codebases and design tools.

Accurate RGB-to-hex conversion also matters for design-engineering handoff in reverse: when a design tool's color picker or a browser extension reports a color in RGB format, developers need the hex equivalent to match it against existing brand documentation or CSS variables without introducing subtle off-by-one rounding errors that can make colors look identical on screen but fail an automated visual regression or brand-compliance check.

The RGB to Hex Formula, Explained

hex = (R base10→base16) + (G base10→base16) + (B base10→base16)

Where: R, G, B are each an integer between 0 and 255 representing one color channel. Each channel is converted independently from base-10 (decimal) to base-16 (hexadecimal), producing a 2-character result (zero-padded if the hex value is a single digit, e.g., 5 becomes 05), and the three 2-character results are concatenated with a leading # to form the final 6-digit hex code.

The decimal-to-hexadecimal conversion works by repeated division: divide the channel value by 16, the quotient becomes the first hex digit and the remainder becomes the second, with values 10–15 represented as letters A–F. For example, converting 246 to hex: 246 ÷ 16 = 15 remainder 6, so the first digit is 15 (which is "F") and the second digit is 6, giving "F6".

Applying this to all three channels of rgb(59, 130, 246): R=59 → 3B (59÷16=3 remainder 11="B"), G=130 → 82 (130÷16=8 remainder 2), B=246 → F6, giving the final hex code #3B82F6.

How to Use the RGB to Hex: Step by Step

  1. Enter the RGB values

    Input the red, green, and blue channel values, each as an integer from 0 to 255 (e.g., R=59, G=130, B=246).

  2. View the hex output

    The calculator instantly converts each channel to hexadecimal and combines them into a 6-digit hex code, e.g., #3B82F6.

  3. Copy the hex code

    Use the output directly in CSS (color: #3B82F6;), a design tokens file, or an SVG fill/stroke attribute.

  4. Verify with round-trip conversion (optional)

    Paste the resulting hex code into the Hex to RGB converter to confirm it converts back to your original RGB values, useful for catching manual entry errors.

RGB to Hex Examples: Real-World Scenarios

1

Documenting a Programmatically Extracted Brand Color

A design engineer extracts a dominant color from a product photo using a canvas pixel-sampling script, which returns rgb(59, 130, 246). They need the hex equivalent to add it to the brand's design tokens file.

R:59
G:130
B:246

Calculation

R: 59÷16 = 3 r11 → 3B | G: 130÷16 = 8 r2 → 82 | B: 246÷16 = 15 r6 → F6

Result

Hex result: #3B82F6 — added to tokens.json as "brand-blue": "#3B82F6".

2

Converting an Interpolated Gradient Stop

A JavaScript gradient generator calculates a midpoint color between two brand colors, producing rgb(255, 87, 51) as an intermediate stop, which needs to be written into a static CSS gradient definition.

R:255
G:87
B:51

Calculation

R: 255÷16 = 15 r15 → FF | G: 87÷16 = 5 r7 → 57 | B: 51÷16 = 3 r3 → 33

Result

Hex result: #FF5733 — used in linear-gradient(90deg, #3B82F6, #FF5733).

3

Zero-Padding a Low-Value Channel

A developer converts a success-state green, rgb(16, 185, 129), and needs to confirm the hex output correctly zero-pads any single-digit hex results.

R:16
G:185
B:129

Calculation

R: 16÷16 = 1 r0 → 10 | G: 185÷16 = 11 r9 → B9 | B: 129÷16 = 8 r1 → 81

Result

Hex result: #10B981 — note the R channel correctly outputs "10" rather than a truncated single character.

Common Mistakes to Avoid

  • Forgetting to zero-pad single-digit hex results — a channel value like 5 converts to hex digit "5", but the correct 2-character representation is "05"; omitting the leading zero produces an invalid or misaligned hex code.
  • Passing values outside the 0–255 range — RGB channels computed programmatically (e.g., after brightness adjustments) can occasionally overflow past 255 or drop below 0 if not clamped, which produces invalid hex output; always clamp RGB math to the valid range before converting.
  • Rounding RGB values inconsistently before conversion — if a channel is computed as a float (e.g., 129.6 from an interpolation), decide on a consistent rounding strategy (typically Math.round) before converting to hex, since truncating versus rounding can shift the final hex code by one value.

Tips & Tricks

  • If you're generating colors programmatically in JavaScript, use toString(16) on each channel and pad with padStart(2, '0') to replicate this conversion directly in code once you've verified the expected output here.
  • Keep a single source of truth for brand colors in hex format in your design tokens file, and treat RGB as a derived/working format for calculations — this avoids subtle drift between hex and RGB representations of the "same" color across a codebase.

RGB to hex conversion is straightforward decimal-to-hexadecimal math applied per channel, but manual conversion is error-prone at scale. Use this tool whenever a programmatically generated or picked RGB color needs to become a static hex reference, and pair it with the Hex to RGB converter for the reverse direction across your color pipeline.

RGB to Hex — Frequently Asked Questions

Related Calculators

Hex to RGB Converter

convert hex codes back to RGB values

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

Hex to RGB

Web & Dev

Aspect Ratio

Web & Dev

Screen Resolution

Web & Dev

Download Time

Web & Dev

File Size

Web & Dev