RGB to Hex Converter Free Tool

Enter red, green and blue color levels (0-255) and press the Convert button:

Red color (R):
Green color (G):
Blue color (B):
Color preview:
	Convert Reset
Hex color code:
RGB color code:
HSL color code:

About RGB to Hex Converter

What This RGB to Hex Converter Actually Does

This tool takes three numbers, red, green, and blue, each from 0 to 255, and turns them into a hex color code the moment you click Convert, along with an rgb() string and an hsl() string in the same click. That's the whole job: one direction, three outputs, one button.

Before you go looking for anything else, here's what it is not, stated plainly so you're not hunting for a feature that isn't on the page. There is no hex input field, so it cannot convert the other way; you can't paste a hex code in and get RGB numbers back. The color swatch preview above the form does update live as you type or drag the channel sliders, but the three output boxes (hex, rgb, hsl) only fill in once you click Convert, and nothing populates them automatically before that.

There's no copy button anywhere next to the results either; you click into a field and select the text yourself. None of that is a flaw. It's just an honest map of the tool before you scroll any further.

What it's genuinely good for: you already have an RGB value, pulled from a design file, read off a color picker, spit out by a browser's dev tools, and you need the hex equivalent for a CSS rule, plus you'd like the rgb and hsl strings for free while you're at it. That's a narrow job, but it's one people run into constantly, and this tool does it correctly every time you use it.

Picture the actual moment this comes up: you're mid-way through building a component, a designer Slacks over "use rgb(34, 197, 94) for the success state," and your CSS file already stores every other color as a hex custom property. Retyping that as hex by hand means converting three numbers to base 16 in your head, which is exactly the kind of small, error-prone arithmetic a tool like this exists to remove. Three fields, one click, done, and you've also got the hsl string sitting there in case a teammate later asks for "10% darker."

RGB and Hex: Two Ways to Describe the Same Color

Both formats describe exactly the same information: how much red, green, and blue light combine on a screen to make a color. Neither one is "more accurate" than the other. They're two different ways of writing the same three numbers, and a browser treats them as fully interchangeable the instant it parses your CSS.

RGB (decimal)

RGB writes each channel as a base-10 integer between 0 and 255. rgb(59, 130, 246) means 59 units of red, 130 of green, and 246 of blue, a mid-tone blue that shows up often in UI design (it's close to a common "brand blue" used across a lot of SaaS dashboards). This is the format you'll see in most eyedropper tools, in a browser's computed-styles panel, and in image-editing software's color sliders, mainly because base-10 numbers are what people read comfortably without translation.

Hex (hexadecimal)

Hex packs the same three channels into one six-character string starting with #, written in base-16 (the digits 0-9 plus the letters A through F) instead of base-10. Each channel becomes exactly two hex digits, and 0-255 in decimal always maps to 00-FF in hex. Walk the math through with that same blue: 59 in decimal becomes 3B in hex, 130 becomes 82, and 246 becomes F6. String them together in R-G-B order and you get #3B82F6. Hex is the default color notation in CSS, in HTML attributes, in SVG fill values, and in the "copy color" output of most design tools, largely because it's compact: one string beats three comma-separated numbers when you're scanning a stylesheet.

Try a second example to see the pattern hold: a warm orange at rgb(249, 115, 22). 249 in decimal is F9 in hex, 115 is 73, and 22 is 16, which gives #F97316. Notice that a lower channel value like 22 still takes up two full hex digits (16, not a bare 16 without padding, since single-digit hex values below 16 get a leading zero). That's the rule this tool applies automatically every time, and it's also the single most common mistake in manual conversion: forgetting the leading zero and shipping a five-character string that no browser will parse correctly.

There's also a shorthand three-character form, #3BF instead of writing out #33BBFF, that CSS accepts whenever both digits inside each channel happen to match. It only covers a small slice of possible colors, so this tool (like most converters) always outputs the full six-digit form, which guarantees it works for any RGB combination you throw at it, not just the tidy ones where the shorthand happens to apply.

How to Use This RGB to Hex Converter

The interaction is short by design. Here's exactly what happens, step by step, matching the real form on this page. No step that isn't actually there, and no shortcut that isn't actually available.

1. Enter a value for Red (R). Type a number from 0 to 255 into the Red field, or drag the red slider next to it. Either one moves the other, and the color swatch above updates right away so you can see that channel's effect on its own.
2. Enter a value for Green (G). Same behavior as Red: type a number or drag the slider, and the swatch preview keeps updating live as you go.
3. Enter a value for Blue (B). Once all three channels have a value, the swatch shows the combined color you're about to convert.
4. Click Convert. This is the step that actually computes the hex, rgb, and hsl strings. Nothing before this point writes anything into those three output boxes, no matter how long you sit typing or dragging the sliders.
5. Read the hex, rgb, and hsl fields. All three appear at once in their own readonly boxes. Click into whichever one you need, select the text, and copy it the normal way (Ctrl+C or Cmd+C). There's no copy icon that does this for you automatically.

If your starting color isn't a number you already know (say, a color from a logo or a live website), you'll need a separate eyedropper or a browser dev-tools color picker to read the RGB or hex value off it first. A tool like our website screenshot generator is a quick way to capture a full page first if you need a still image to sample a color from later. Once you have those three numbers in hand, this tool takes over from there. And if you'd rather start from a hex code or a visual picker instead of typing raw numbers, that's a different tool from this one, covered in the "what this can't do" section below.

What You Actually Get: Hex, RGB, and HSL in One Click

This is the part the old version of this page never actually explained clearly, buried as it was under a claim about a feature that doesn't exist. Click Convert once, and you get back three separate, correctly formatted strings, not just the hex code the tool's name implies.

• Hex output: a six-digit code prefixed with #, always uppercase, always zero-padded so a low channel value like 5 renders as 05 rather than a bare 5 that would break the string's fixed length. For our example blue, that's #3B82F6.
• RGB output: a plain rgb(r,g,b) string with the same three numbers you typed in, comma-separated, with no spaces after the commas in this particular implementation. For example, rgb(59,130,246). Drop this straight into a CSS color or background-color declaration and it works exactly like the hex version.
• HSL output: the same color expressed as hue (a degree on the 0-360 color wheel), saturation, and lightness, both as plain numbers without a trailing % character baked into the string itself, for example hsl(217,91,60). HSL is worth having on hand separately from hex and RGB because it's the easiest format to reason about when you want to nudge a color lighter, darker, or more muted without recalculating three unrelated channel numbers by hand.

Getting all three from one Convert click matters more than it sounds like it should. A brand guideline document might specify a color as RGB, your CSS variables file might store everything as hex, and a teammate adjusting a hover state might ask for "just make it 10% darker," which is a one-number change in HSL and a much fiddlier one in hex. Having all three on screen at once, from a single input, removes three separate round trips to three separate tools, and it's the one genuinely strong feature this tool has that the old copy on this page never actually said out loud.

Why This Conversion Comes Up So Often in Web Design and CSS

In practice, almost nobody stays inside a single color format for an entire project. A brand guidelines PDF lists colors as RGB triplets because that's how a lot of print-and-digital hybrid brand kits get built. A Figma or Sketch file exports hex by default the moment you copy a fill color. A legacy stylesheet somewhere in the codebase uses rgba() because someone needed transparency back in 2019 and never revisited it. Getting a conversion wrong by even one digit produces a color that's subtly off, the kind of bug that sails through code review because nobody's eye catches a one-digit hex mismatch, and only shows up once someone puts the live site next to the actual brand guide.

• Design-to-code handoff. Designers frequently hand off colors as RGB or as named swatches inside a design file; developers need hex (or at minimum a consistently formatted RGB string) for CSS custom properties. Converting once, correctly, keeps that handoff accurate without anyone doing base-16 math by hand.
• Cross-tool consistency. Different software defaults to different notations. Image editors lean on RGB sliders because that matches how camera sensors and displays actually work, while CSS frameworks and CMS theme editors usually expect hex because it's shorter to type and paste. Converting once and reusing the same string everywhere prevents small color drift creeping into a site over months of edits by different people.
• Debugging computed styles. Open a browser's dev tools and inspect an element's color, and it's common to see it reported back as rgb(59, 130, 246) even when the original CSS rule was written with a hex value. Browsers normalize colors internally and don't always echo back the exact notation you wrote. Converting that RGB reading back to hex makes it much faster to search your own codebase for where that color was actually defined in the first place.
• Accessibility and contrast tooling. A lot of contrast-ratio checkers accept either RGB or hex, but rarely both interchangeably in the same input box, and not necessarily the same one your design source used. Converting on demand avoids re-typing values by hand, which is exactly where a transposed digit sneaks in.
• Onboarding a new teammate onto a design system. When a new developer joins a project and inherits a Figma file full of RGB swatches, converting the whole palette to hex once (a few minutes with a tool like this) is faster and less error-prone than eyeballing every value while writing the first round of CSS variables.

A concrete walkthrough helps make this less abstract. Say a designer sends over three brand colors as RGB: a primary blue at rgb(37, 99, 235), a success green at rgb(22, 163, 74), and a warning amber at rgb(217, 119, 6). Run each through this converter and you get #2563EB, #16A34A, and #D97706, ready to paste straight into a CSS :root block as custom properties. That's three trips through the tool, roughly thirty seconds total, versus doing the base-16 conversion by hand three separate times and risking a transposed digit on any one of them.

Common Use Cases

The scenarios below aren't hypothetical; they're the recurring reasons someone lands on a page like this one instead of just guessing at a hex value. Each row pairs a real situation with the specific reason a straight RGB-to-hex conversion is the fastest fix.

The common thread across all seven rows is the same: the source of the color and the place it needs to end up almost never agree on format, and this tool exists to close that one specific gap without any extra steps in between.

RGB vs. Hex vs. Other Color Formats: Which One Applies Here

Hex and RGB aren't the only two ways color gets written on the web, and knowing which format this particular tool actually produces (and which it doesn't) saves a wasted trip looking for output that was never coming. The table below scopes it honestly against this tool's real capability rather than implying it handles everything.

For everyday web and app development, hex, RGB, and HSL cover almost everything you'll actually run into, which is exactly the set this tool produces. CMYK only becomes relevant once a color is also headed to print, and at that point you'd typically get a converted CMYK value from a print vendor or dedicated design software anyway, since screen-to-print conversion depends on the specific printer and paper stock in ways a browser-based tool has no way to account for. If you need RGBA/HSLA with an actual alpha value, or a CMYK reading, that's outside what a converter like this one is built to do, and no amount of clicking Convert here will produce it.

Technical Notes on the Conversion

The underlying math is simple base conversion, but a handful of details are worth knowing if a result ever looks off, or if you're trying to reproduce the same conversion in your own code.

• Each channel converts independently. Red, green, and blue are each turned from a 0-255 decimal integer into a two-digit hex pair on their own, then joined in R-G-B order. There's no blending or averaging between channels at any point in the process.
• Hex is case-insensitive. #3B82F6 and #3b82f6 render as the exact same color in every browser. This tool always outputs uppercase; lowercase is more common in hand-written CSS, but it's purely a style preference with zero functional difference either way.
• Leading zeros matter. A red value of 5 becomes hex 05, never a bare 5. Every channel is exactly two hex digits, or the resulting six-character string would be misread entirely. This tool zero-pads automatically, which is the single most common mistake people make converting by hand.
• Out-of-range numbers get clamped, not rejected. Type a value above 255 or below 0 and click Convert, and the tool clamps it back into the valid 0-255 range before computing the hex code. It doesn't throw an error or leave the field blank; it just treats anything outside the range as the nearest valid boundary.
• The result is deterministic. Because it's pure arithmetic with no rounding ambiguity anywhere in the 0-255-to-00-FF mapping, converting the same RGB triplet will always produce the identical hex string, every single time. There's no "close enough" involved anywhere in the calculation.
• Standard 6-digit hex carries no transparency. If you need an alpha or opacity value alongside a color, that's a fourth number layered on top, as in RGBA or 8-digit hex. This tool's 6-digit hex output doesn't include one, since alpha is a separate value from the base color entirely and isn't something a plain RGB-to-hex conversion is meant to carry.
• The math is portable if you need it elsewhere. If you ever need to reproduce this conversion in your own JavaScript or a build script, it's the same three-line operation this tool runs internally: convert each 0-255 integer to its two-character hex representation, pad with a leading zero if the result is a single character, and concatenate the three pairs in order.

How This Conversion Works in Code, If You're Building Your Own

Sometimes the actual goal isn't a one-off conversion, it's wiring the same logic into a build script, a design-token generator, or a small internal tool. The algorithm behind this converter is short enough to reproduce in a handful of lines, and knowing it makes the "why" behind the earlier technical notes concrete rather than abstract.

function rgbToHex(r, g, b) {
  const clamp = (n) => Math.max(0, Math.min(255, n));
  const toHex = (n) => clamp(n).toString(16).padStart(2, '0');
  return '#' + (toHex(r) + toHex(g) + toHex(b)).toUpperCase();
}

rgbToHex(59, 130, 246); // "#3B82F6"

Three things in that snippet map directly to behavior described earlier on this page. The clamp function is the same out-of-range handling this tool applies before computing a result: anything above 255 or below 0 gets pulled back to the nearest valid boundary rather than throwing an error. The padStart(2, '0') call is the leading-zero rule from the technical notes section, turning a single hex digit like 5 into 05 so every channel is always exactly two characters. And toString(16) is the actual base-10 to base-16 conversion, the same arithmetic this page's worked examples walked through by hand earlier.

If you also want the rgb and hsl strings this tool produces, the rgb string is just a template literal around the same three clamped numbers (`rgb(${r},${g},${b})`), while HSL requires converting the RGB values into hue, saturation, and lightness first, a slightly longer formula involving the minimum and maximum of the three channels. That's genuinely more code than most projects need for a single conversion, which is exactly the gap a small dedicated tool like this one is meant to fill without anyone having to write or maintain that formula themselves.

What This Tool Can't Do

Being upfront about the boundaries here saves you a scroll through the rest of this page looking for something that was never going to show up.

• It cannot convert hex to RGB. There is no hex input field on this page at all, only three RGB number fields that feed into Convert. If you need the reverse direction, our Color Picker tool is the better fit: it accepts typed values in nine different fields (including hex) and reads back HEX, RGB, and HSL together from a full visual picker, rather than a one-direction number-in form like this one.
• It doesn't extract a color from an image. There's no upload button, no eyedropper, and no way to drop in a screenshot or a photo and have the tool sample a pixel color for you. You'll need a separate eyedropper or an OS-level color picker to identify the RGB value first, then bring those three numbers here.
• It doesn't compute CMYK. If you're preparing something for print rather than a screen, this tool's output won't help you directly. CMYK conversion depends on ink and paper behavior that a screen-color calculator has no way to model.
• It doesn't check contrast or accessibility. Getting an accurate hex value is a separate job from confirming that value meets WCAG contrast guidelines against a background color. That needs a dedicated contrast-ratio checker that also factors in text size and font weight.
• It doesn't save anything. There's no history, no saved palette, and no account. Reload the page and your last conversion is gone. Copy down any value you need before you navigate away from the page.

Tips for Getting Accurate Colors

• Pick one source-of-truth format per project. Standardize on either hex or RGB for your CSS custom properties and stick with it across the codebase. Mixing formats makes a future find-and-replace or a theming pass noticeably more painful than it needs to be.
• Double-check colors pulled from screenshots. Screenshot tools and some image compressors, JPEG especially, can shift pixel colors slightly through compression artifacts. If a color needs to match a brand guide exactly, verify it against the guide's own stated RGB or hex value rather than trusting a fresh eyedropper reading off a compressed image.
• Watch the swatch, not just the numbers. Two RGB triplets that look similar as plain numbers on screen can produce visibly distinct colors once rendered. The live swatch above the form catches a transposed digit before you carry the mistake into your CSS file.
• Look for near-duplicate hex values in an older codebase. Projects tend to accumulate several almost-identical colors, like #3B82F6, #3A81F5, and #3C83F7, added by different people at different times. Converting values side by side is a quick way to spot these before they start causing an inconsistent-looking UI.
• Remember hex alone doesn't carry opacity. If a design calls for a translucent color, you'll need to work in RGBA rather than trying to fake transparency with a lighter shade of hex. The two aren't visually equivalent once that color sits over different backgrounds.
• Keep a running note of converted brand colors. If you're converting the same handful of brand colors repeatedly across different projects, jot the hex results down once somewhere you'll actually find them again, rather than re-running the same three RGB triplets through this tool every time you start a new file.

If this converter isn't quite the right fit for what you're doing (say you need a visual picker instead of typing raw numbers, or a different image-related conversion entirely), the rest of our Images Editing Tools category is a short list worth a scroll before you go hunting elsewhere.

Frequently Asked Questions

Can I convert hex to RGB with this tool?

No. This tool only goes one direction: RGB in, hex/rgb/hsl out. There's no hex input field on the page at all, so pasting a hex code in here won't do anything. You'd need a different tool built for the reverse conversion.

Does the result update automatically as I type or drag the sliders?

Partly. The color swatch preview above the form does update live as you type a number or drag a slider, so you can see the color change in real time. But the actual hex, rgb, and hsl output fields only get filled in once you click the Convert button. They don't populate on their own no matter how long you leave the sliders alone.

Is there a copy-to-clipboard button next to the results?

No. The hex, rgb, and hsl output fields are plain read-only text boxes with no icon or button attached to them. Click into a field, select the text, and copy it yourself with Ctrl+C (or Cmd+C on a Mac).

What happens if I enter a number above 255?

The tool clamps it back to 255 before computing the conversion. A red, green, or blue value can't go above 255 or below 0, since that's the full range a single 8-bit color channel can represent (256 total values, matching 00 to FF in hex).

Does this tool give me anything besides the hex code?

Yes. Clicking Convert fills in three fields at once: the hex code, an rgb() string, and an hsl() string, all computed from the same three numbers you entered.

Will the hex value I get here look exactly the same on every screen?

The hex code itself is exact and will never change; the underlying math has no rounding ambiguity. How that color visually appears can still vary slightly between monitors depending on calibration, brightness, and color gamut, but that's a property of digital displays in general, not something specific to this converter.