What RGB and HEX Actually Represent
An RGB value and a HEX code are not two different colours, or even two different colour models. They are two ways of writing down the same three numbers: how much red, green and blue light a display should emit. rgb(200, 16, 46) and #C8102E describe one colour, written once in decimal and once in hexadecimal. Hex codes are often called HTML color codes, which is where most people first meet them.
On the web, both notations are defined against sRGB, the standard colour space set out in IEC 61966-2-1 and adopted by CSS. sRGB fixes what full red and full green actually look like and how the 0–255 range maps to brightness, so a browser can take either notation and put the same colour on screen. Each channel is one byte — eight bits, 256 possible levels — and three channels give 16,777,216 combinations.
Because the two notations carry identical information, looking up the RGB to HEX code for a colour is exact and loses nothing. That sets it apart from the conversions the rest of this site deals with. Moving from sRGB into CMYK or a Pantone ink is a change of colour gamut, and some colours do not survive the trip. If the difference between colour spaces is new to you, our guide to what each colour space actually measures covers RGB, HSL, HSV and LAB side by side.
How to Convert RGB to HEX by Hand
Hexadecimal is base 16. It counts 0 to 9 and then uses the letters A to F for ten to fifteen, so one hex digit covers 16 values and two digits cover 16 × 16 = 256 — exactly the 0–255 range of a single RGB channel. That is why every channel gets exactly two digits, and why a value below 16 needs a leading zero: 9 is written 09, never 9.
To convert RGB to hexadecimal by hand, take one channel at a time and divide it by 16. The whole-number result is the first digit and the remainder is the second. Here is the worked example for rgb(200, 16, 46):
- Red: 200 ÷ 16 = 12 remainder 8. Twelve is C, so red is
C8. Check: 12 × 16 + 8 = 200. - Green: 16 ÷ 16 = 1 remainder 0, so green is
10. Check: 1 × 16 + 0 = 16. - Blue: 46 ÷ 16 = 2 remainder 14. Fourteen is E, so blue is
2E. Check: 2 × 16 + 14 = 46. - Join the pairs in red, green, blue order behind a hash:
#C8102E.
Going the other way is the same arithmetic reversed: multiply the first digit by 16 and add the second. The table lists the first and last value of every sixteen-value block. The first hex digit tells you which block a value sits in, and the second counts from 0 to F within it.
| Block starts | HEX | Block ends | HEX |
|---|---|---|---|
| 0 | 00 | 15 | 0F |
| 16 | 10 | 31 | 1F |
| 32 | 20 | 47 | 2F |
| 48 | 30 | 63 | 3F |
| 64 | 40 | 79 | 4F |
| 80 | 50 | 95 | 5F |
| 96 | 60 | 111 | 6F |
| 112 | 70 | 127 | 7F |
| 128 | 80 | 143 | 8F |
| 144 | 90 | 159 | 9F |
| 160 | A0 | 175 | AF |
| 176 | B0 | 191 | BF |
| 192 | C0 | 207 | CF |
| 208 | D0 | 223 | DF |
| 224 | E0 | 239 | EF |
| 240 | F0 | 255 | FF |
In code the conversion is a one-liner, and many libraries simply call the function rgb2hex. Doing it once by hand still pays off, because it makes hex codes readable at a glance: a code that starts with FF has its red channel fully on, and one that starts with 00 has no red at all.
Shorthand HEX, 8-Digit HEX and Alpha
CSS accepts four lengths of hex colour, all defined in the W3C CSS Color Module Level 4. Six digits, #RRGGBB, is the standard form. Three digits, #RGB, is a shorthand in which each digit is doubled, so #F0A means #FF00AA.
Shorthand only exists for colours whose channels are all repeated pairs. #CC3366 can be written #C36, but #C8102E cannot be shortened, because C8, 10 and 2E are not doubled digits. And #FFF is exactly the same colour as #FFFFFF, pure white, not a slightly different one.
Eight digits, #RRGGBBAA, add an alpha channel for transparency, and four digits, #RGBA, are its shorthand. The alpha byte runs from 00, fully transparent, to FF, fully opaque, so #C8102E80 is the same red at 128/255, about 50% opacity. Every current major browser supports both forms.
Alpha order is not universal
#AARRGGBB, so #80C8102E in an Android file is the colour CSS writes as #C8102E80. Check which convention a tool expects before pasting an eight-digit code into it. Print has no alpha at all: transparency is flattened into solid colour before anything is imaged on a plate or a sheet.Where HEX Is Required and Where RGB Is
In most software the two are interchangeable, so the choice is about convention and about who reads the value next.
- CSS and HTML. Both work. Hex is the most common form in stylesheets and design tokens because it is compact and easy to search for;
rgb()is handier when you need to read or adjust a single channel. - Design tools. Figma, Sketch and the Adobe colour pickers all show a hex field next to RGB sliders, so either can be typed in. Copying the hex field is the least error-prone way to move a colour between them.
- Brand guidelines. A good guideline lists each brand colour in several systems at once: HEX for the web, RGB for screen and video, CMYK for process colour printing, and a Pantone reference for spot colour. HEX and RGB always agree; CMYK and Pantone are separate decisions that someone has to make and check.
- Print handoff. Printers do not work from hex codes. A file sent to press needs CMYK builds, a Pantone spot colour reference, or both — ideally with a printed proof on the actual substrate.
From Screen to Print: Why HEX Alone Is Not Enough
Turning an RGB colour to HEX is the easy part: any RGB to HEX converter online will hand you the six-digit code. But a hex code tells a display what to do; it says nothing about ink. A monitor mixes coloured light and can reach very saturated reds, greens and blues. A press lays cyan, magenta, yellow and black ink on paper, board or film that absorbs and scatters light. The two colour gamuts overlap, but screen RGB reaches colours that four-colour process printing cannot, and the gap is widest in vivid greens, blues and violets.
There are two routes to press. Process colour builds a colour from CMYK percentages, which is why the converter above also shows a CMYK value — though that figure is an uncalibrated starting point, not a press-ready build. Spot colour prints a pre-mixed ink instead, and the Pantone Matching System is the standard way to specify one. Our RGB to Pantone converter ranks the closest PMS inks for any RGB value, and the HEX to Pantone converter does the same starting from a hex code.
Once you have a Pantone number, the Pantone to CMYK converter gives its process equivalent for jobs that cannot run a spot ink. For the underlying difference between the two models, read CMYK vs RGB explained, and before choosing between a C and a U reference, see why coated and uncoated Pantone colours look different on each paper stock.
Common Mistakes
- Assuming a HEX code carries a colour profile. It does not. CSS treats a hex code as sRGB, but a design file set up in Display P3 or Adobe RGB can show the same six digits as a different colour. When a colour has to match exactly, send the file with its ICC profile embedded, not just the code.
- Rounding through CMYK and back. Converting to CMYK percentages and back is not lossless.
#C8102EbecomesC:0 M:92 Y:77 K:22, which converts back to#C7102E, one step off in red. Keep the original HEX or RGB value as the master and derive CMYK from it, never the other way round. - Trusting an uncalibrated monitor. Two screens can show the same hex code noticeably differently, and a phone in bright light differs again. Judge screen colour on a calibrated display and judge print colour on paper.
- Using a web HEX value to specify ink. A printer cannot mix ink from
#C8102E. Hand over a Pantone reference or an agreed CMYK build, check it against a physical swatch book, and say whether the job runs on coated or uncoated stock. If you are not sure which ink to start from, browse the full Pantone library by name or number.
Quick Reference: 16 Common Colours as RGB, HEX and Closest PMS
These are the sixteen basic colour keywords that every browser has understood since HTML 4: black, white, the primaries and their half-intensity versions. The Pantone column comes from our coated (C) library, ranked the same way as the converter above; the match score shows how close the nearest ink gets.
| Colour | RGB | HEX | CMYK | Closest Pantone (C) | Match |
|---|---|---|---|---|---|
| black | rgb(0, 0, 0) | #000000 | C:0 M:0 Y:0 K:100 | Pantone BLACK-6-C | 89.8% |
| silver | rgb(192, 192, 192) | #C0C0C0 | C:0 M:0 Y:0 K:25 | Pantone COOL-GRAY-4-C | 98.4% |
| gray | rgb(128, 128, 128) | #808080 | C:0 M:0 Y:0 K:50 | Pantone WARM-GRAY-8-C | 97.6% |
| white | rgb(255, 255, 255) | #FFFFFF | C:0 M:0 Y:0 K:0 | Pantone 656-C | 90.1% |
| maroon | rgb(128, 0, 0) | #800000 | C:0 M:100 Y:100 K:50 | Pantone 207-C | 87.4% |
| red | rgb(255, 0, 0) | #FF0000 | C:0 M:100 Y:100 K:0 | Pantone 185-C | 89.8% |
| purple | rgb(128, 0, 128) | #800080 | C:0 M:100 Y:0 K:50 | Pantone 2415-C | 95.6% |
| fuchsia | rgb(255, 0, 255) | #FF00FF | C:0 M:100 Y:0 K:0 | Pantone 807-C | 82.2% |
| green | rgb(0, 128, 0) | #008000 | C:100 M:0 Y:100 K:50 | Pantone 356-C | 88.7% |
| lime | rgb(0, 255, 0) | #00FF00 | C:100 M:0 Y:100 K:0 | Pantone 802-C | 81.8% |
| olive | rgb(128, 128, 0) | #808000 | C:0 M:0 Y:100 K:50 | Pantone 392-C | 98.0% |
| yellow | rgb(255, 255, 0) | #FFFF00 | C:0 M:0 Y:100 K:0 | Pantone 803-C | 93.6% |
| navy | rgb(0, 0, 128) | #000080 | C:100 M:100 Y:0 K:50 | Pantone 2738-C | 96.9% |
| blue | rgb(0, 0, 255) | #0000FF | C:100 M:100 Y:0 K:0 | Pantone BLUE-072-C | 78.8% |
| teal | rgb(0, 128, 128) | #008080 | C:100 M:0 Y:0 K:50 | Pantone 7717-C | 98.4% |
| aqua | rgb(0, 255, 255) | #00FFFF | C:100 M:0 Y:0 K:0 | Pantone 3252-C | 81.3% |
The weakest matches are blue (#0000FF) and aqua (#00FFFF): fully saturated screen colours sit furthest from anything a spot ink reproduces, which is exactly why a printed logo needs its own colour reference. White is a special case — its closest ink, Pantone 656-C, is a pale tint, because print normally gets white from the unprinted paper rather than from ink.