RGB to Hex Converter

What Is an RGB to Hex Converter?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Key Features

RGB to Hex Converter Alternatives

RGB to Hex Examples

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Common RGB → Hex Conversions

Reference table of the 10 most-converted RGB tuples and their hex equivalents — pure primaries, pure secondaries, and two real-world brand colors from the Tailwind palette.

How to Use the RGB to Hex Converter

1. 1

   Type or paste an RGB tuple into the RGB field

   Drop any `rgb()` value into the RGB input — modern space-separated `rgb(255 87 51)`, legacy comma `rgb(255, 87, 51)`, with alpha via slash `rgb(255 87 51 / 0.5)` or via the `rgba(255, 87, 51, 0.5)` form, or percentage channels `rgb(100% 34% 20%)`. The tool normalizes all input shapes to the same internal RGB tuple before computing hex. Invalid characters, out-of-range integers, or malformed syntax produce a quiet inline error; valid RGB updates every other format field in real time.

2. 2

   Read the hex code from the HEX field

   The HEX field above the RGB field shows the matching hex value: `#FF5733` for an opaque color, `#FF573380` for an alpha-bearing one (8-digit form). The output uses uppercase hex digits by default for consistency with most brand guidelines; lowercase (`#ff5733`) is one mechanical replace away and equally valid CSS. The conversion is bit-exact — a round-trip RGB → HEX → RGB recovers the original tuple verbatim with no float drift.

3. 3

   Click Copy to grab the hex string

   Each format card has a Copy button on the right. One click and the value lands on your clipboard — the button label briefly flashes "Copied!" so you know. The copied string includes the leading `#` so it pastes directly into a CSS rule, a Figma color field, a SwiftUI hex extension, or an Android `colors.xml`. For platform-specific syntax (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, Tailwind v4 `@theme` tokens), use the Copy as code section below the picker.

4. 4

   Also visible: HSL, OKLCH, OKLAB, CMYK, named color

   The same RGB you paste lights up the other format fields too — HSL for legacy CSS, OKLCH and OKLAB for perceptually-uniform design systems, HSV and HWB for designer color-picker workflows, CMYK for print estimates, and the closest CSS named color for documentation and prose. You're never locked into RGB → hex only; if you also need the OKLCH triple for a Tailwind v4 `@theme` block, it's right there in the OKLCH field with its own Copy button.

5. 5

   Use the picker for visual tweaks

   Below the format grid is an SL square + hue slider + alpha slider for visual exploration. Drag any control and every text field updates in real time, including the RGB and HEX you started with. On Chromium-based browsers (Chrome, Edge, Brave) the EyeDropper button activates the native `EyeDropper` API for sampling any pixel on screen, including outside the browser window — useful when you want to capture an RGB tuple from another app's UI without screenshotting first, then immediately read the hex.

Common RGB / Hex Mistakes

Skip padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produces invalid 5-character hex.

Use padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Valid 6-character hex; works correctly for all channel values 0-255.

Skip rounding:
(0.5 * 255).toString(16) → '7f.8'
Produces invalid hex with a decimal point.

Round to integer first:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Valid 2-digit hex pair; matches CSS Color 4 normalization.

Emit Android leading-alpha hex into CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (Android format)
CSS parses as alpha=128, R=255, G=87, B=51 — wrong color entirely.

Use the target platform's documented format:
for CSS: #FF573380 (alpha as last byte)
for Android Compose: Color(0x80FF5733) (alpha as first byte)
Don't cross-paste between the two without re-ordering.

Average gamma-encoded RGB directly:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Looks like dark olive, not bright yellow.

Average in linear-RGB:
decode → linear-RGB → average → re-encode → rgb(188, 188, 0)
Visibly bright yellow, matching what physical light mixing produces.

Who Uses RGB to Hex

Frontend Devs Converting Canvas RGB to CSS Hex

Canvas API drawing functions report and accept colors as RGB tuples (`ctx.fillStyle = 'rgb(255 87 51)'`), but the surrounding CSS stylesheet wants hex variables (`--color-fill: #FF5733`). Pasting the RGB once produces the matching hex, ready to drop into a CSS custom property. Useful when extracting brand colors from a canvas-rendered chart or data visualization for reuse in static UI.

Designers Converting Photoshop RGB to Figma Hex

Adobe's Color picker (in Photoshop, Illustrator, and InDesign) reports RGB as three 0-255 integers across three channel boxes. Figma, by contrast, displays color values as hex by default in its design panels. Paste the three Photoshop integers as `rgb(...)` here, copy the hex output, drop into Figma's color field. Matches the original Photoshop color exactly without a screenshot-and-eyedropper detour.

Hardware Devs Converting LED Sensor RGB to Web Hex

Addressable LED strips, color sensors, and hardware RGB cameras all report channel values as 0-255 integers. When the readings need to drive a web dashboard ("the lamp is currently glowing this color"), the matching hex code is what the CSS `style="background: ..."` attribute expects. Paste the sensor's RGB triple, copy the hex, plug into the dashboard markup.

Game Devs Exporting Unity Color to Web Mockup

Unity's `Color` and Unreal's `FLinearColor` constructors take normalized 0-1 floats; multiplying each by 255 gives the matching RGB integers. Paste the resulting `rgb(...)` here, copy the hex, drop into the web mockup or marketing site that needs to match the in-game accent color exactly. The simultaneous OKLCH view also surfaces the perceptual lightness so the mockup palette can be hand-tuned to match the game's brightness levels.

Accessibility Engineers Auditing Photoshop Brand Colors

When the brand-style guide reports colors as RGB integer triples ("the brand orange is RGB 255 / 87 / 51") but the WCAG audit tool wants hex codes, this converter is the bridge. Paste the RGB triple, copy the hex, run through the audit. The WCAG and APCA contrast badges in this tool also surface the verdict in one step, so you don't need to bounce between three separate tools.

Email Devs Migrating rgba() to 8-Digit Hex

Modern email-client HTML supports 8-digit hex (`#FF573380`) for alpha-bearing colors, but legacy templates often store the same value as `rgba(255, 87, 51, 0.5)`. Pasting the rgba() here and reading the 8-digit hex output makes the migration mechanical. The HEX field shows `#FF573380` for the 50% alpha case; the legacy `rgba()` form remains in the RGB field for fallback contexts that still need it.

Developers Documenting Brand Tokens With Both Formats

Design-token documentation often shows the same color in both RGB and hex forms: hex for the CSS code block, RGB for the prose annotation ("the brand orange is `#FF5733`, equivalent to RGB 255 / 87 / 51"). Having both visible side-by-side lets a doc writer copy each in one pass instead of running two separate tools. The shareable URL hash also lets readers click through to the exact color under discussion.

QA Engineers Asserting Pixel Colors Against Hex Specs

Visual regression tests sometimes capture pixel colors as RGB integers (`expect(pixel).toMatchRgb([255, 87, 51])`), while the underlying spec is given in hex ("buttons must render as `#FF5733`"). Pasting the captured RGB here produces the matching hex, which the QA engineer can compare directly to the spec. The bit-exactness of the conversion means the comparison won't flake on float-drift differences.

RGB to Hex Math & Serialization

toString(16).padStart(2, '0') Is the One-Line Implementation

The entire RGB-to-hex conversion fits in one expression per channel: `value.toString(16).padStart(2, '0')`. JavaScript's `toString(16)` converts a decimal integer to its base-16 string representation. The `padStart(2, '0')` is the easy-to-forget detail — without it, channel value 5 would serialize as `'5'` instead of `'05'`, producing an invalid 5-character hex like `#55733` when joined with the other channels. The standard idiom is `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` followed by a `'#'` prefix.

Percentage Normalization: × 255 / 100, Then Round

CSS Color 4 allows percentage channels in `rgb()`: `rgb(100% 34% 20%)` is equivalent to `rgb(255 87 51)`. The normalization rule is `Math.round(percent × 255 / 100)`. `50% × 255 / 100 = 127.5` rounds to 128 (banker's rounding away from .5). The same rule applies to alpha when expressed as a percentage (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Integer and percentage forms produce identical hex output after normalization; the tool surfaces the canonical integer form in the RGB field after re-normalizing.

Alpha to Hex: Multiply by 255, Round, Encode as Trailing Pair

Alpha-bearing RGB (`rgb(255 87 51 / 0.5)`) emits 8-digit hex by multiplying alpha by 255, rounding to the nearest integer, and encoding as a 4th hex pair appended after RGB. `0.5 × 255 = 127.5`, rounded to 128 = `0x80`, output `#FF573380`. The CSS Color 4 spec uses banker's-rounding (round-half-to-even) for this conversion, which the tool follows. The 8-digit form drops back to 6-digit when alpha is exactly 1 to avoid leaking trailing `FF` pairs into stylesheets.

RGB Input: CSS Color 4 Space-Separated and Legacy Comma Both Accepted

The parser accepts both the modern CSS Color 4 form `rgb(255 87 51)` and the legacy CSS 1 form `rgb(255, 87, 51)`. The modern form aligns with the other CSS Color 4 functional notations (`hsl()`, `lab()`, `oklch()`, `color()`) which all use space separation and slash-for-alpha. The legacy comma form is still supported in every evergreen browser and remains common in older codebases. Both produce identical hex output; the tool's hex serializer doesn't care which input shape arrived.

OKLCH Internal Source-of-Truth for Round-Trip Stability

Even though this spoke targets RGB → HEX specifically, the shared underlying converter holds the canonical color as an OKLCH triple internally. This means RGB → HEX → HSL → OKLAB → CMYK → RGB round-trips without per-step float drift; legacy converters that route through HSL or sRGB as their pivot accumulate rounding error at each conversion. The choice of OKLCH (over OKLAB) preserves Hue as a stable axis so dragging the hue slider doesn't accidentally cross-fade through gray. Per Björn Ottosson's 2020 OKLAB paper.

Channel Encoding: 8-Bit Unsigned, sRGB Gamma-Encoded

Each RGB channel is an 8-bit unsigned integer (0-255), encoded in the sRGB color space defined by IEC 61966-2-1 (1996). The values are *gamma-encoded* — meaning the relationship between channel value and perceived brightness is non-linear, following the piecewise sRGB transfer function (roughly a 2.4 exponent with a small linear segment near zero). This matters when you're doing color math: averaging two RGB values in their gamma-encoded form gives the wrong perceptual midpoint. For correct color blending, decode to linear-RGB first (CSS Color 4 §11.2), then average, then re-encode. The tool's OKLCH internal model makes this transparent.

Best Practices for RGB / Hex Workflows

Prefer Uppercase Hex in Brand Guidelines, Lowercase in Code

Brand guidelines, marketing PDFs, and designer-facing documentation typically use uppercase hex (`#FF5733`) for visual consistency — the all-caps look reads as a brand identifier. Code (CSS, JSON, JavaScript source) typically uses lowercase (`#ff5733`) by convention because lowercase is faster to type and more common in autogenerated linter output. Both are valid CSS and parse identically; pick one for each context and stay consistent. The tool emits uppercase by default; one mechanical replace flips to lowercase.

Emit 8-Digit Hex Only When Alpha < 1

When alpha equals 1 (fully opaque), drop back to the 6-digit form. A trailing `FF` pair (`#FF5733FF`) is legal CSS but visually clutters stylesheets and confuses some legacy parsers into mis-rendering. The 8-digit form should appear only when alpha is meaningfully transparent. This tool follows that rule automatically — opaque colors emit 6-digit hex, alpha-bearing colors emit 8-digit hex, and the cutoff is exact (alpha = 1.0 emits 6 digits; alpha = 0.9999 emits 8 digits to preserve the data).

Don't Average RGB Channels Directly for Color Math

RGB channels are gamma-encoded — averaging two RGB values gives the wrong perceptual midpoint. `(255, 0, 0)` averaged with `(0, 255, 0)` produces `(127, 127, 0)`, a muddy dark olive, not the visually-bright yellow midpoint you'd expect. For correct color blending, decode to linear-RGB first (CSS Color 4 §11.2), then average, then re-encode. Or, better, work in OKLAB or OKLCH where perceptual distance is uniform — that's exactly what design-system palette generators do.

Prefer Hex for CSS Variables, RGB for Hardware

When you're writing a CSS custom property or a Tailwind config token, prefer hex — it's terser and fits cleanly in JSON or YAML. When the consuming code does per-channel arithmetic (canvas calls, image manipulation, hardware LED drivers, OpenGL color attributes), the RGB integer form is faster to consume. The two formats describe the same color; the choice is purely about who's reading and writing, not about correctness. This tool's simultaneous-field view makes both equally cheap.

Validate Alpha Range Before Multiplying by 255

When implementing your own RGB → 8-digit-hex converter, validate that the alpha float falls inside `[0, 1]` before the `× 255` step. Out-of-range alpha (negative, or > 1) silently produces invalid hex pairs that some parsers accept and some reject — a fragile failure mode. Clamp first (`Math.max(0, Math.min(1, alpha))`), then multiply, then round, then hex-encode. The tool surfaces a quiet inline error for out-of-range alpha rather than emitting a broken hex string.

Use the URL Hash to Share Live Color Decisions

Every color change updates the URL hash as `#hex=ff5733` automatically. Copy the URL into a Slack thread or GitHub issue and anyone who opens it lands on the same color with the same hex. This is more reliable than pasting an RGB tuple in chat — recipients sometimes typo commas or drop a channel when manually entering the value — and lets a design-review thread reference an exact color rather than "the orange we discussed Tuesday." The hash is never transmitted to the server.

Frequently Asked Questions