Color converter

HEX to RGB and RGB to HEX

Type a hex code or an rgb() color and the other notations appear as you type, alpha included. Every value has a copy button, and the batch box below converts a whole list.

The converter needs JavaScript. The result shown is for #D3AF37, and the worked examples below read without it.

Result

Opaque

HEX: #D3AF37
8-digit HEX: #D3AF37FF
Modern CSS: rgb(211 175 55)
Legacy CSS: rgb(211, 175, 55)

R: 211
G: 175
B: 55
A: 1

Open its color page See it in 34 notations

Batch

Convert a whole list

Paste one color per line, in any form the converter above reads. Up to 500 lines at a time; blank lines are skipped.

Colors, one per line

5 converted 1 not read

The list, converted
Line	Input	HEX	Modern CSS	Legacy CSS
1	`#D3AF37`	`#D3AF37`	`rgb(211 175 55)`	`rgb(211, 175, 55)`
2	`#FA0`	`#FFAA00`	`rgb(255 170 0)`	`rgb(255, 170, 0)`
3	`#1D4ED8CC`	`#1D4ED8CC`	`rgb(29 78 216 / 80%)`	`rgba(29, 78, 216, 0.8)`
4	`rgb(17 34 51 / 25%)`	`#11223340`	`rgb(17 34 51 / 25%)`	`rgba(17, 34, 51, 0.25)`
5	`211, 175, 55`	`#D3AF37`	`rgb(211 175 55)`	`rgb(211, 175, 55)`
6	`#12345`	A hex color has 3, 4, 6 or 8 digits. Digits typed: `5`

CSS copies the list as custom properties, with each hex beside it as a comment. CSV copies every line, including the ones that could not be read and why, ready for a spreadsheet.

The arithmetic

How a hex code becomes RGB

A hex color is three bytes, red, green and blue, each written as two base-16 digits.

RGB to HEX runs the same sum backwards: each channel from 0 to 255 becomes two digits.

RedD313 × 16 + 3211
GreenAF10 × 16 + 15175
Blue373 × 16 + 755

Base 16 counts 0 to 9 and then A to F for 10 to 15, so the first digit of a pair counts sixteens and the second counts ones. Backwards, 211 ÷ 16 is 13, which is D, with 3 left over: D3.

Shorthand doubles each digit

#FA0 is short for #FFAA00, and #FA08 for #FFAA0088: each digit is written twice. Only colors whose bytes are pairs of the same digit have a shorthand, so 4,096 of the 16,777,216 six-digit colors do.

Alpha is a fourth byte

In #RRGGBBAA the last pair is opacity, from 00 (transparent) to FF (opaque). It is read as the byte divided by 255, so 80, which is 128, means 128 ÷ 255 = 0.502, not 0.5.

Going the other way, 50% of 255 is 127.5, which rounds up to 128. That is why 50% becomes 80 and reads back as 50.2%: no byte is exactly one half. Some values do land exactly: CC is 204, and 204 ÷ 255 is 0.8, which is why CSS Color 4 gives #0000ffcc as the same color as rgb(0 0 100% / 80%).

How this page rounds

Channels are whole numbers from 0 to 255. A fraction rounds to the nearest whole number and a half rounds up, as CSS Color 4 asks: 127.5 becomes 128.
Percentages are of 255, so 50% is 127.5 and becomes 128.
Values outside the range are clamped, as browsers do: 300 becomes 255 and −20 becomes 0.
Alpha is written as a percentage to one decimal place in the modern syntax, and as a number to three decimal places in rgba(). Either is precise enough to give back the same byte.
The none keyword, allowed only in the space syntax, counts as 0.

What the converter reads

#RGB #RGBA #RRGGBB #RRGGBBAA Hex, in either case, with or without the #.
rgb(211 175 55 / 50%) The space syntax: numbers, percentages or none, with alpha after a slash.
rgba(211, 175, 55, 0.5) The comma syntax: all numbers or all percentages; rgb() and rgba() are the same function.
211, 175, 55 Bare numbers, read as rgb().

Examples

Worked examples

Each row is the converter's own output, and a test re-runs every row. The alpha column is the byte the 8-digit hex stores and the opacity it reads back as.

Each example, converted
Input	HEX	Modern CSS	Legacy CSS	Alpha	Why
`#D3AF37`	`#D3AF37`	`rgb(211 175 55)`	`rgb(211, 175, 55)`	FF → 100%	Six digits: three bytes, no alpha
`#FA0`	`#FFAA00`	`rgb(255 170 0)`	`rgb(255, 170, 0)`	FF → 100%	Shorthand: each digit is written twice
`#0F08`	`#00FF0088`	`rgb(0 255 0 / 53.3%)`	`rgba(0, 255, 0, 0.533)`	88 → 53.3%	Four digits: the fourth is alpha
`#0000FFCC`	`#0000FFCC`	`rgb(0 0 255 / 80%)`	`rgba(0, 0, 255, 0.8)`	CC → 80%	The CSS Color 4 example: exactly 80%
`rgb(211 175 55 / 50%)`	`#D3AF3780`	`rgb(211 175 55 / 50%)`	`rgba(211, 175, 55, 0.5)`	80 → 50.2%	Half of 255 rounds up, so the byte reads back a little over half
`rgb(50% 50% 50%)`	`#808080`	`rgb(128 128 128)`	`rgb(128, 128, 128)`	FF → 100%	Percentages are of 255, and the half rounds up
`rgba(17, 34, 51, 0.25)`	`#11223340`	`rgb(17 34 51 / 25%)`	`rgba(17, 34, 51, 0.25)`	40 → 25.1%	A quarter of 255 is not a whole number either
`rgb(300 -20 128)`	`#FF0080`	`rgb(255 0 128)`	`rgb(255, 0, 128)`	FF → 100%	Out of range: clamped, as browsers do
`211, 175, 55`	`#D3AF37`	`rgb(211 175 55)`	`rgb(211, 175, 55)`	FF → 100%	Bare numbers are read as rgb()

Where to go from here

RGB says how much of each light to mix; it says little about how light or vivid a color looks. For that, use OKLCH.

Method

Sources and testing

Conversions run in your browser with the site's shared color code; nothing you type is sent anywhere.
An automated test recomputes every example on this page, and the converter itself is unit-tested against the CSS Color 4 examples.
Checked with a keyboard, the axe engine and Playwright in Chromium, in light and dark themes at phone and desktop widths. It has not yet been checked with a screen reader.

Found a mistake? Tell us and we will correct it.