RGB to Hex Converter

Enter red, green and blue values from 0–255 and get the matching hex colour code straight away, with a live swatch you can copy into CSS, SVG, or any design tool.

Three channels, six digits

A hex colour code packs the three RGB channels into a base-16 string. The converter takes each channel value (0–255), converts it to a two-digit hexadecimal number, and joins the three pairs in red-green-blue order, prefixed with #. Values outside 0–255 are clamped. Because one hex digit covers 0–15, two digits cover the full 0–255 range of a channel, so the result is always #rrggbb.

Example

Convert rgb(59, 130, 246):

• 59 → 3b
• 130 → 82
• 246 → f6
• Result: #3b82f6

It all runs in your browser — nothing is uploaded.

Common RGB to hex reference values

Designers frequently need the hex codes for a handful of pure and commonly-used colours. Here are the most referenced:

Where hex codes are used vs RGB

Both formats describe exactly the same colour — the choice between them is purely about context:

Use hex when:

• Writing CSS or SCSS (the color: #3b82f6 syntax is the most common form in stylesheets)
• Copying a colour from a design tool (Figma, Sketch, Adobe XD all display hex by default)
• Specifying brand colours in a style guide or design token

Use RGB when:

• You need to manipulate individual channels mathematically (for example, fading a colour by reducing all three channels proportionally)
• Writing CSS with an alpha channel: rgba(59, 130, 246, 0.5) for 50% opacity (hex alpha as #3b82f680 is valid in modern browsers but less widely supported in older tools)
• Working in a programming context where you are computing colours dynamically

Interpreting a hex code without a converter

If you are reading a hex code and want a rough sense of the colour without a tool, notice:

• The first two digits control how red the colour is (ff = maximum red, 00 = no red)
• The middle two control green
• The last two control blue
• Equal values across all three digits produce a grey (#888888, #cccccc)
• #ffffff (all max) is white; #000000 (all zero) is black

The conversion as code

In JavaScript, the whole conversion is one expression using bit shifts:

const hex = "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");

Shifting red left 16 bits and green left 8 bits packs the three bytes into a single 24-bit integer — exactly the number a 6-digit hex code represents. padStart matters: without it, a colour whose red channel is 0 (say rgb(0, 130, 246)) would lose its leading zeros and produce an invalid 5-or-fewer-digit code. The reverse trip is just as short: parseInt(hex, 16) then mask each byte back out.

Alpha, and the newer colour syntaxes

Modern CSS also accepts an 8-digit hex form, #rrggbbaa, where the last pair is alpha (opacity): #3b82f680 is Tailwind’s blue-500 at ~50% opacity (0x80 = 128 of 255). The 4-digit shorthand #rgba works the same way as #rgb. Both are defined in the CSS Color Module Level 4 specification, and MDN’s hex-color reference documents browser behaviour and the accepted forms.

Level 4 also introduced space-separated syntax — rgb(59 130 246 / 0.5) — and wider-gamut colour spaces (oklch(), color(display-p3 ...)) that can express colours a 6-digit hex cannot. For design-token and stylesheet work targeting sRGB screens, hex remains the compact standard; if you are working in P3 or OKLCH, convert at the end, not the start, to avoid clipping.

A contrast reminder before you ship the colour

Converting a colour is the easy half; checking it against its background is the half that affects users. Text colours need a contrast ratio of at least 4.5:1 against their background to meet WCAG 2.1 AA (3:1 for large text). A hex code that looks fine on a designer’s bright display can fail badly on a dim phone — so once you have your #rrggbb value, run the foreground/background pair through a contrast checker before committing it to a stylesheet or design token. This is quick to do and is the difference between a palette that is merely attractive and one that everyone can read.