Search DevFox

Search tools and pages.

RGB to HEX

Convert RGB color to HEX

Loading tool...

What is RGB to HEX

Written by Giorgos Kostas. Last reviewed:

RGB to HEX Converter takes an rgb() or rgba() color value with 0–255 channel integers (or 0–1 normalized floats) and returns the equivalent 6-digit hex code. When an alpha channel is present, the output is an 8-digit hex including the alpha byte.

The tool accepts both the legacy comma-separated syntax (rgb(255, 128, 64)) and the modern space-separated syntax (rgb(255 128 64)), and understands percentage inputs (rgb(100%, 50%, 25%)).

Why use it

  • Ship a design-token export (hex) from a runtime-generated RGB value in a framework like Tailwind or styled-components.
  • Normalize legacy rgb()-heavy stylesheets into hex for a compact, readable brand palette file.
  • Convert color picker output in tools like Chrome DevTools or Figma into the hex format your documentation expects.

Features

  • Accepts comma or space-separated rgb()/rgba() syntax as well as bare triples (255,128,64)
  • Supports percentage inputs (rgb(100%, 50%, 25%)) — percentages are mapped to the 0–255 range
  • Emits 8-digit hex with the alpha byte when an alpha channel is provided
  • Always lowercases the hex output (configurable to uppercase for specific brand style guides)
  • Batch mode: paste multiple rgb() values at once and get one hex code per line back

How to use RGB to HEX

  1. Paste RGB values. Type rgb(255, 128, 64), rgb(255 128 64), rgba(255, 128, 64, 0.5), or just 255,128,64 — the parser is permissive.
  2. Read the hex output. The converted hex appears live alongside a color swatch. 8-digit hex is emitted when the alpha channel is present.
  3. Copy and paste into CSS. Click copy on the hex field. The result is ready to drop into a CSS variable, a Tailwind theme extension, or a brand guideline document.
  4. Convert a batch. Open Batch mode, paste a newline-separated list of rgb() values, and download a CSV of matched hex codes for a design-token export.

Example (before/after)

RGB input

Paste your RGB input so it can be converted into HEX for your next step.

HEX output

Get HEX output converted from RGB that is ready to review, copy, or export into the next step of your workflow.

Common errors

Source format does not match the tool

Conversions fail when the pasted input is not actually in the expected source format.

Fix: Verify the source format first, then paste it into the correct converter.

Partial or inconsistent data

Broken rows, missing fields, or incomplete markup can block conversion.

Fix: Use a complete input sample with the structure intact before converting it.

Unexpected output assumptions

Different target formats can flatten, restructure, or serialize values differently.

Fix: Review the converted output and confirm it matches the target system before using it downstream.

FAQ

Will RGB to HEX emit an 8-digit hex when my input has alpha?

Yes. rgba(255, 128, 64, 0.5) becomes #ff804080 — the alpha float is multiplied by 255 and emitted as the last byte. For rgba with alpha 1 (or rgb with no alpha), the output is the standard 6-digit hex form.

What happens if my RGB values use percentages instead of 0–255 integers?

Percentages are mapped to the 0–255 range — rgb(100%, 50%, 25%) becomes rgb(255, 128, 64), which then converts to #ff8040. The tool handles both input forms interchangeably.

Are RGB values outside 0–255 accepted?

No — channels must be in the 0–255 range (or 0–100% for percentages, or 0–1 for normalized floats). Values above the max are clipped with a visible warning; negative values are rejected because they have no meaningful hex representation.

Is the hex output uppercase or lowercase?

Lowercase by default (matches the dominant convention in Tailwind, modern design systems, and most CSS-in-JS libraries). A toggle in the UI switches to uppercase for projects whose brand guidelines mandate it.

Can I paste the output from a Chrome DevTools color picker?

Yes. DevTools emits rgba(r, g, b, a) as its default RGB format, which is exactly what the converter expects. Paste the string as-is — no trimming needed.

Why does my RGB value convert to a hex shorter than I expected?

If all three channel pairs repeat their first digit (e.g. #ff6644 → all high-high repeating), some CSS tools shorten to 3-digit form (#f64). Our converter always emits the full 6-digit form for unambiguous copy-paste; you can post-process with a separate 'hex shorthand' tool if you need the compressed form.