RGB to HEX Converter
Enter red, green and blue values and get the #hex code instantly.
Need the opposite? HEX to RGB
This RGB to HEX converter turns three channel values, red, green and blue from 0 to 255, into a single hex code you can drop into CSS, Tailwind config or an SVG. Type the numbers, and the #hex code and a live preview swatch appear immediately.
This direction comes up when you are picking colors out of other software. Photoshop's eyedropper, a screenshot color sampler, GIMP, or a game engine will often hand you plain RGB numbers like 34, 139, 34. Web work wants that as #228b22, one compact token you can paste anywhere, search a codebase for, or send to a developer without ambiguity.
The tool runs fully in your browser with no server round-trip. Sliders or number fields, whichever you prefer, update the hex output live, so you can also nudge a channel up or down and watch the color respond.
How to convert RGB to HEX
- Enter the red, green and blue values (0-255), or drag the sliders.
- Watch the preview swatch update as you adjust each channel.
- The hex code appears instantly, in standard #rrggbb form.
- Click Copy to grab the code for your CSS, design token or SVG.
- Going the other way? Use the HEX to RGB converter linked on this page.
What this RGB to HEX converter does
The tool takes three channel values, red, green and blue from 0 to 255, and packs them into a single hex token in standard #rrggbb form, updating live as you type or drag. A preview swatch confirms the color, and a copy button hands you the code ready for CSS, a Tailwind config, an SVG fill or a design-token file.
It is intentionally simple and runs entirely in your browser. Whether you prefer typing exact numbers or nudging sliders to explore nearby shades, the rgb to hex conversion happens instantly with nothing sent to a server and nothing to install.
How the conversion works
Each 0-255 channel is written as a two-digit base-16 number and the three are concatenated. Red 255 is ff, green 102 is 66, blue 0 is 00, so rgb(255, 102, 0) becomes #ff6600. Values below 16 get a leading zero, which is why 10 becomes 0a rather than a; skipping that zero is the single most common hand-conversion bug.
Because hex is just base-16 notation for the exact same sRGB channel values, the conversion is precise in both directions. Every 0-255 value maps to exactly one two-digit pair, so no color information is lost when you move from RGB to hex.
Getting RGB values out of images and apps
If you are trying to match a color from a photo, a competitor's site or a mockup, use an eyedropper first: most image editors, browser dev tools and OS screenshot utilities can sample a pixel and report its RGB values. Feed those three numbers in here and you have a hex code ready for production code.
One thing to watch: some tools report RGB as percentages or as 0-1 floats (0.13, 0.55, 0.91). Multiply floats by 255 and round before converting, or the resulting hex will be wildly wrong.
Why hex is the web's default
A hex code is one short, unambiguous token, which is exactly what code likes. #228b22 is easy to paste, easy to grep across a codebase, and easy to read in a diff, whereas three separate numbers are three chances to transpose a value or lose one. Style guides, linters and design-token systems almost all standardize on hex for that reason.
That does not make RGB obsolete. Scripts, canvas work and any code that manipulates a single channel are far happier with numbers than with a packed string. Converting RGB to hex is about producing the storable, shareable form once you have settled on the color.
Handling transparency
Standard hex covers only the opaque color. If your source has an alpha value, convert it separately: multiply the 0-1 alpha by 255, round, and append it as a fourth hex pair. So rgba(255, 102, 0, 0.5) becomes #ff660080, since 0.5 x 255 is roughly 128, which is 80 in hex.
Support for 8-digit hex is now broad across modern browsers, but if you are targeting an older environment or an email client, keep the color as six digits and express the opacity through rgba() or a separate opacity property instead.
Contrast and accessibility
Accessibility contrast checks operate on RGB channel values, so if you are starting from RGB you already have the numbers a checker needs before you even convert to hex. That makes it easy to confirm text clears the 4.5:1 ratio for body copy, or 3:1 for large text, against its background.
A practical workflow is to test contrast in RGB, adjust a channel or two until the ratio passes, and only then convert the final value to hex for your stylesheet. Because the conversion is exact, the shade you approved is precisely the shade that ships.
Related color tools
The reverse trip is just as frequent, so keep the HEX to RGB converter handy for when a stylesheet or brand guide gives you a hex code you need as channels for rgba() or canvas work. Both directions are lossless.
If you have not fixed on a color yet, the color picker lets you drag to a shade and read HEX, RGB and HSL together, while the CSS gradient generator turns your chosen colors into copy-ready linear and radial backgrounds.
Frequently asked questions
Is this RGB to hex converter free?
Yes. It is free, unlimited and runs entirely in your browser. No account, no data collected.
What range do RGB values use?
Each channel goes from 0 to 255. Values outside that range are clamped. If your source gives 0-1 decimals or percentages, scale them to 0-255 first.
Why is hex preferred in web code?
It is one short, unambiguous token. #228b22 is easier to paste, grep and diff than three separate numbers, and it is the format most style guides, linters and design-token files standardize on.
Is the conversion exact?
Yes. Each 0-255 channel maps to exactly one two-digit hex pair, so rgb(255, 102, 0) is precisely #ff6600. No precision is lost either way.
Can I convert a transparent color?
If you have an alpha value, convert it separately: multiply the 0-1 alpha by 255 and append it as a fourth hex pair. rgba(255, 102, 0, 0.5) becomes #ff660080.
Does this work on iPhone and Android?
Yes. The sliders and number inputs are touch-friendly, so it works fine in any modern mobile browser.