ColorKitFree rgb to hex converter
RGB to HEX with the arithmetic shown
Free and without a signup: move the three sliders or type each channel from 0 to 255, and the six-digit code updates with every step of the conversion visible beside it — the byte in binary, the 15×16 + 9 that turns 249 into f9, and the finished pair. Switches give you the same color uppercase, without the leading #, or in the three-digit shorthand when the shorthand is lossless, and the packed 0xRRGGBB integer is there for the Android and shader code that wants one number rather than three.
- 100% free
- No signup
- Sliders and typed input
- Binary per channel
- Packed 0xRRGGBB
#f97316
rgb(249, 115, 22)
Press Ctrl+V anywhere on the page to drop in an rgb() string — no need to click the field first.
Where each pair of digits comes from
| Channel | Byte | Binary | Arithmetic | Hex |
|---|---|---|---|---|
| Red | 249 | 11111001 | 15×16 + 9 | f9 |
| Green | 115 | 01110011 | 7×16 + 3 | 73 |
| Blue | 22 | 00010110 | 1×16 + 6 | 16 |
One hex digit covers 0-15, so a pair covers exactly one byte and the six digits are the three bytes a GPU stores, in order.
The same color as one number
- Packed integer
- 16347926
- C-style literal
- 0xF97316
- CSS Color 4 syntax
- rgb(249 115 22)
Android, Java and OpenGL code passes colors around as that single integer; it is the six hex digits read as one base-16 number.
How to convert RGB to a hex code
Three steps that also leave you able to do the easy ones in your head.
Set the three channels
Drag a slider when you are still deciding, or type into the number beside it when a script, a canvas readout or a colleague's screenshot has already fixed the value. Values above 255 or below 0 snap back to the ends, matching how a browser handles rgb(300 -20 40). If you have the whole string, paste rgb(249, 115, 22) or rgb(98%, 45%, 9%) and all three fields fill at once.
Follow a byte across the table
Each row shows the channel as a decimal, as eight binary bits, as the arithmetic that produces its digits, and as the finished pair. Red 249 reads 11111001 in binary and 15×16 + 9 in the arithmetic column, and 15 is f, so the pair is f9. One hex digit spans 0-15, which is why two of them hold exactly one byte and why six digits hold a color.
Shape the output and copy it
Three switches decide what lands on your clipboard: uppercase or lowercase digits, with or without the leading #, and the three-digit form. That third one turns itself off unless both digits match in all three pairs, because collapsing #ffcc01 would hand you a different color — #ffcc00 collapses to #fc0 honestly, #ffcc01 cannot.
Technical specifications
| Channel range | 0-255 per channel; typed values outside it clamp to the ends and fractions round half up, so 128.5 converts as 129 |
|---|---|
| Slider resolution | One step per byte, 256 stops per channel and 16,777,216 colors reachable from the three of them |
| Percentage input | The paste field takes rgb(98%, 45%, 9%) as well as bytes; each percentage is multiplied by 2.55 and rounded |
| Output switches | Case, leading # and three-digit collapse combine into 8 forms of one color, from #f97316 to F97316 |
| Three-digit collapse | Enabled only when both digits match in all three pairs: #ffcc00 becomes #fc0, #ffcc01 stays at six |
| Packed integer | rgb(249, 115, 22) is 0xF97316 and decimal 16347926 — the same digits as one base-16 number |
| Neutral grays | 256 of them, where all three channels match; the middle byte 128 is #808080, whose relative luminance is 0.216 rather than half of white's |
| Work done per drag frame | Three divisions and a string join, under a millisecond, entirely inside this tab with nothing sent out |
Frequently asked questions
How do you convert 249 to hex by hand?
Divide by 16 and write the quotient and remainder as digits: 249 is 15 sixteens with 9 left over, 15 is f, so 249 is f9. Every byte works this way, which is why the table on this page shows the multiplication rather than only the answer — after a few colors the common values stop needing a tool at all. 255 is 15 sixteens and 15 left over, which is why full intensity is ff.
What does a browser do with rgb(300, -20, 40)?
It clamps each channel into 0-255 and renders rgb(255, 0, 40), and this page does the same so the hex you copy is the color you will actually see. The clamp happens per channel, not per color, so an out-of-range red does not disturb green or blue. Fractions are a separate matter: CSS accepts rgb(128.5 …) and rounds it, and 128.5 becomes 129 here.
Can every color be written as a three-digit hex code?
No — only 4,096 of the 16,777,216 sRGB colors have a three-digit form, one in every 4,096. The shorthand is not a compression scheme; it simply repeats each digit, so it can only reach colors whose pairs are made of two identical digits. The switch on this page stays disabled for the other 16,773,120 rather than rounding your color to the nearest one that fits.
Does it matter whether the letters are uppercase or lowercase?
Not to any parser — CSS treats hex digits as case-insensitive and #FF6600 and #ff6600 produce identical pixels. It matters to your repository, where a project that mixes the two collects pointless diff noise; most formatters settle on lowercase, while brand guidelines are usually written in uppercase. Pick one convention per codebase and let the switch here match it.
Why does the hex I read off a screenshot differ from the design file?
Almost always color management rather than a conversion error. A screenshot taken on a wide-gamut display is tagged Display P3, and any tool that converts it to sRGB shifts the numbers a few points — saturated reds and greens move most. Sample the color in the design tool itself, or compare two values that came through the same pipeline, before concluding a converter is wrong.
What is the packed integer used for?
It is the same six digits read as one base-16 number, which is how colors travel in Java, Android, OpenGL and most shader code. rgb(249, 115, 22) is 0xF97316, decimal 16347926, and Android's Color int is the same number with an alpha byte in front — 0xFFF97316 for fully opaque. Shifting it apart is the reverse trip: red is the value shifted right 16 bits and masked with 0xFF.
Should a stylesheet hold hex codes or rgb() values?
Hex if the color is a constant, rgb() if any part of it has to vary, since the bytes are identical either way. The useful middle path is storing the channels alone in a custom property — --brand-rgb: 249 115 22 — and writing rgb(var(--brand-rgb) / 40%) wherever the same color is needed at a different opacity, which saves defining a second variable for every transparency level in the design system.
About turning three numbers into six digits
Base 16 was not chosen to look technical. One hex digit covers exactly the sixteen values four bits can hold, so a pair covers one byte precisely, and a color made of three bytes lands on six characters with no padding and no ambiguity about where one channel stops. Decimal cannot do that: rgb(249, 115, 22) needs separators because 249 and 115 are different widths, while f97316 splits at fixed positions. That is the whole argument, and it is why the notation has outlived every attempt to replace it in CSS.
What the six digits do not carry is a color space. A hex code is read as sRGB by every browser, so the same string is a slightly different color on a wide-gamut display unless the page opts into color(display-p3 …), and it says nothing whatever about ink. A brand guide that lists a hex value next to a Pantone chip and a four-number build is not repeating itself — those are three different systems that happen to agree approximately, and the gap between them is what RGB to CMYK measures, with CMYK to RGB covering the return leg.
Sliders are the right control for landing on a value and the wrong one for changing a color you already have. Nudge red on an orange and you do not get a lighter orange, you get a redder one, because the three axes each carry a mix of brightness and hue. When the goal is a tint, a shade or a hover state, move the color into hue-based coordinates with RGB to HSL, adjust lightness there, and bring it back through HSL to RGB. Reading in the other direction, from a code somebody handed you to the channels behind it, is what HEX to RGB is for.
Where the slider values go
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The three channel numbers live in this page's state and nowhere else — they are not written to local storage or put in the URL, which is why a reload starts again at 249, 115, 22 rather than at the color you were working on.