Hex to RGB Converter

Read a hex colour and get its rgb() values

You have been handed a hex code — from a brand style guide, a Figma inspect panel, a ticket, a stylesheet you did not write — and something downstream wants numbers instead. A CSS custom property that needs bare channels, a design tool whose colour field only takes red, green and blue, an SVG attribute, a canvas call, a chart library config. This page turns that hex into rgb(), rgba(), hsl(), hsv(), cmyk() and hwb(), all copyable with one click, and shows you the colour so you can confirm it is the one you meant.

Everything happens in your browser. There is no upload step, no server round trip and no account: the hex you paste into the address bar and the colours you save stay on your machine (saved swatches go into localStorage, nothing else). If you are working with an unreleased brand palette or a client's colours under NDA, that matters more than the conversion itself.

How to load a specific hex on this page

Be aware of one thing before you start, because it surprises people: the format boxes on this page are outputs. They are read-only fields with copy buttons, not a paste-a-hex-here form. There are three practical ways to get your colour into the tool.

• Deep-link it. Append ?color= plus your hex to the URL, with the # percent-encoded as %23 — a raw # in a URL starts the fragment and never reaches the page. So ?color=%231E90FF loads #1E90FF. Three-digit and six-digit hex both work; the %23 is required.
• Dial it in. Drag the saturation/value square and the hue slider, or switch to the Sliders tab and set red, green and blue directly on 0–255 tracks until the HEX field matches the code you were given.
• Reuse it. Once a colour is on screen, save it as a swatch and it comes back on your next visit, or press Share Color to copy a link that reopens this exact colour for a colleague.

The deep-link route is the fast one, and it is worth bookmarking with a placeholder. Note that the HEX field always reports back in uppercase with a leading #, regardless of how you entered it.

What the three byte pairs mean

A six-digit hex code is three numbers wearing a disguise. Split #RRGGBB after every two characters and you have red, green and blue, each written in base 16, each covering exactly the range 00 to FF — 0 to 255 in decimal, one byte per channel. That is the whole encoding. Hex is used instead of decimal because two hex digits fit one byte perfectly, so a colour is always six characters and never needs separators.

Base 16 needs sixteen digit symbols, so after 9 it borrows letters: A is 10, B is 11, C is 12, D is 13, E is 14, F is 15. The left digit of each pair is the sixteens column and the right digit is the units column, which gives you the reading rule: left digit × 16 + right digit.

Case does not matter. #1e90ff, #1E90FF and #1e90FF are the same colour to every browser and to this tool; hex colours are case-insensitive in CSS. The # is required in CSS and required by this page's URL parameter, though plenty of design tools display the code without it.

Worked example: reading #1E90FF by hand

Take the pairs one at a time.

• 1E → 1 × 16 = 16, plus E (14) = 30 red
• 90 → 9 × 16 = 144, plus 0 = 144 green
• FF → 15 × 16 = 240, plus 15 = 255 blue

So #1E90FF is rgb(30, 144, 255): not much red, a bit over half green, blue at maximum. Reading the pairs like this is a useful habit even when a tool is doing the arithmetic, because it lets you sanity-check a colour at a glance. FF in the last pair means blue is pinned; a code where all three pairs are close together, like #808080, is a grey; a code ending in a pair much larger than the other two will be blueish.

Three-digit, six-digit and eight-digit hex

Hex colours turn up in more than one length, and only some of them are the same thing.

The shorthand expansion trips people up because it is doubling, not zero-padding: #1AB is #11AABB, not #01A0B0. It follows that shorthand can only ever express colours whose channel bytes are made of repeated digits, which is why #FFCC00 can be written #FC0 but #FFCC01 cannot be shortened at all.

For the two alpha forms, this tool converts the colour but not the alpha pair. Set opacity with the slider — it runs 0% to 100% — and read the rgba() or hsla() line, which carries alpha as a 0–1 decimal, the form CSS and most design tools actually want.

Common codes and their channel values

Getting a brand hex into a CSS variable

The most common reason to convert a hex you were handed is that modern CSS wants the channels loose rather than glued together. If you store a colour as a hex custom property, you cannot vary its opacity later without redeclaring it. If you store the bare channel triplet, you can:

Define --brand: 30 144 255; and you can then write color: rgb(var(--brand)); for the solid colour and background: rgb(var(--brand) / 12%); for a tinted panel, from the same single source of truth. That triplet is exactly the three numbers this page gives you — copy the RGB line and drop the rgb( wrapper. The same three numbers go straight into an SVG fill="rgb(30,144,255)", a ctx.fillStyle, or a chart library's series colour.

Some design and 3D tools want channels as 0–1 floats instead of 0–255 integers. Divide each channel by 255: #1E90FF becomes roughly 0.118, 0.565, 1.0. Others want percentages: divide by 2.55 instead.

When a hex code will not parse

If a hex refuses to load or produces an obviously wrong colour, it is nearly always one of a short list of causes. Work through them in this order.

• The wrong number of digits. Only 3 and 6 digits are colour codes here. A 4- or 8-digit value carries alpha and will be rejected; strip the alpha pair and set opacity separately.
• A stray prefix. 0x1E90FF is a programming-language integer literal, not a CSS colour. Drop the 0x and add a #.
• Alpha at the front, not the back. Android and several Java APIs write colours as #AARRGGBB, alpha first — the reverse of the CSS #RRGGBBAA order. If a code that should be an opaque blue comes out looking like a dark red, check whether the first pair is really alpha and move it.
• Reversed channel order. Win32 COLORREF values are stored blue-green-red, so a value copied out of one of those APIs reads backwards as a hex colour. If red and blue look swapped, they are: reverse the pairs.
• Invisible characters. A copied code often brings a trailing space, a non-breaking space, or a smart quote along with it. Retype the six characters rather than hunting for the culprit.
• Non-hex letters. Only A–F are valid. A code containing G through Z is not a colour — it is usually a truncated identifier or a variable name.

Questions people actually ask

Is the conversion lossy? No. Hex and 0–255 RGB are two spellings of the same three bytes, so hex → rgb() → hex round-trips exactly. The conversions that do lose precision are the ones through HSL, HSV and CMYK, which this page rounds to whole numbers for readability — fine for picking a colour, not something to chain repeatedly.

Why does the colour look different from the mockup? Hex carries no colour space. Browsers interpret #RRGGBB as sRGB, and a design file tagged with a wider space such as Display P3 can show the same numbers as a more saturated colour. The numbers are right; the rendering assumption differs.

Does my hex get sent anywhere? No. The conversion is arithmetic running in your browser tab. Nothing is transmitted, and there is no server-side log of the colours you looked at.

What about the opposite direction? If you are starting from channel numbers and need the compact code for CSS, use the RGB to hex converter instead — it is the same engine pointed the other way.

Can I check whether the colour is readable? Partly, on this page: the Text & Background Combinations panel shows your colour with white and black text and their WCAG contrast ratios. For a fuller treatment of the thresholds, use the colour contrast checker.