A hex color code is simply the three RGB channels (red, green, blue, each on a scale of 0–255) rewritten in base 16 and glued together with a leading hash, producing strings like #3b82f6 that web designers use in CSS, HTML, and design software every day. Converting between the two formats by hand is a matter of turning each decimal channel into two hexadecimal digits and concatenating them, which is fast once you have done it a few times and trivial when a calculator handles the math. The RGB To HEX tool at /color/rgb-to-hex/ lets you paste either format and read the other side instantly, with a live preview and matching HSL values sitting beside the input fields so you can sanity-check the result before committing it to your stylesheet.
RGB and HEX describe exactly the same color in two different notations, so the conversion never changes what you see on screen. The difference is purely about who is reading the value. Designers sketching in Figma or Photoshop usually think in RGB because each channel maps to a slider, while front-end developers almost always reach for hex because a six-character string is easy to type, easy to grep across a codebase, and easy to shorten when every channel happens to repeat (#ffffff becomes #fff). Having both numbers in your head makes it quicker to translate a color brief into code without reaching for a swatch picker every time.
RGB and HEX at a Glance
RGB treats color as an additive mix of light, with red, green, and blue channels each taking an integer from 0 to 255. Zero means "no contribution from that channel" and 255 means "full intensity." A pixel set to rgb(0, 0, 0) emits no light and renders black, while rgb(255, 255, 255) blasts all three channels at once and renders white. Pure red is rgb(255, 0, 0), pure green is rgb(0, 255, 0), and pure blue is rgb(0, 0, 255); every other color is some combination in between.
HEX uses the same three channels but writes them in base 16, a numeral system where each digit can be 0–9 or A–F. Two hex digits can represent any value from 0 to 255, which is exactly the range of one RGB channel. Because of that alignment, a hex code is always three pairs of digits after the hash, read as red, green, then blue. The W3C color specification on developer.mozilla.org documents the full syntax, including the three-digit shorthand form CSS allows when each pair is repeated, like #3b82f6 becoming the equivalent #38f only when every pair happens to double.
The Conversion Formula
To turn one channel from decimal into hex, divide by 16 — the whole-number quotient becomes the first hex digit and the remainder becomes the second. For example, the decimal value 59 breaks into a quotient of 3 and a remainder of 11, which writes as the two hex digits 3B. Stack the three channel codes in order (red, then green, then blue) and you have a complete hex value.
The formula written out looks like this: for a channel value V, hex = (floor(V / 16))(V mod 16), where each result is mapped to its hex symbol. Decimals 10 through 15 map to A through F, so the single decimal 59 writes as "3B" rather than "311." Doing this three times for each channel produces a full six-character string.
Worked Example: RGB(59, 130, 246)
Let's walk through the popular Tailwind blue, rgb(59, 130, 246), and convert it by hand. The first channel is 59; dividing 59 by 16 gives a quotient of 3 and a remainder of 11, which becomes the hex pair "3B" (since 11 maps to B). The green channel is 130; 130 divided by 16 leaves a quotient of 8 and a remainder of 2, so the hex pair is "82." The blue channel is 246; 246 divided by 16 produces 15 with a remainder of 6, which becomes "F6" (since 15 is F). Stacking the pairs in order yields the hex code #3B82F6, the same code that backs the well-known "blue-500" swatch in many UI kits. Confirming the conversion in the RGB To HEX tool returns exactly that string and shows the matching live preview, which makes it easy to verify a brand color before pushing it to production.
This is the only hand calculation shown in this guide. For any other value, open the converter, type the numbers, and copy the output rather than doing the arithmetic on paper; even seasoned developers lean on the tool once values get past single digits.
How to Convert RGB to HEX in the Browser
The fastest workflow for converting RGB to HEX today is to use a purpose-built tool rather than a mental math shortcut. The RGB To HEX page keeps both directions of the conversion in one place, so you can flip between formats without losing context, and it pairs the inputs with a live preview swatch so you immediately see whether the paste or the typed numbers are pointing at the right color.
- Open the RGB To HEX converter in your browser; no signup, install, or download is required.
- Type the red, green, and blue numbers into the three RGB fields, each value somewhere between 0 and 255. The page updates the preview and hex output as you type.
- Read the resulting hex code next to the live color preview. Confirm it visually matches the color you intended before copying.
- Click the Copy button on the hex field to grab the string (including the leading #) for pasting into CSS, HTML, Figma, or any other tool that accepts hex.
- To go the other direction, paste a hex value (for example #abc or #3b82f6) into the HEX field; the RGB and HSL fields repopulate instantly and the preview updates to match.
- Copy the RGB or HSL output the same way if you need one of those formats for a design tool or programmatic API.
The same flow works for alpha channels: paste an eight-digit hex like #3b82f6cc or an rgb(...) call with a fourth argument and the tool will read it back without complaint. Treat the HSL readout as a quick sanity check when a hex value feels slightly off from the brief, because HSL makes it easier to spot whether the issue is too much saturation or a hue rotation of a few degrees.
When to Use HEX vs RGB in Your Codebase
Hex wins on brevity and on readability inside stylesheets, which is why most production CSS uses it. A single six-character token is easier to scan in a design system than rgb(59, 130, 246), and shorthand like #fff or #000 removes visual noise from common cases. RGB notation, by contrast, is friendlier when you need to express transparency (rgba(59, 130, 246, 0.5)) or when a value is computed at runtime in JavaScript — channel values are easier to feed to a math operation than a string of hex digits. A common pattern is to keep brand tokens as hex in shared variables and switch to rgba() at the call site wherever alpha is needed.
HSL has its own niche. When a designer hands you a color and asks for a "lighter" or "more saturated" variant, adjusting HSL is much more intuitive than nudging three RGB sliders. That is why many color palette generators such as the one on this site expose HSL as a third representation alongside RGB and hex, letting you iterate without leaving the page.
Common Pitfalls and Quick Fixes
Few conversion mistakes are technically hard, but several come up often enough to be worth flagging. The table below pairs each gotcha with the quickest way to spot it before it reaches production.
| Pitfall | Symptom | Fast Fix |
|---|---|---|
| Swapping channel order | Color reads "off" — green looks reddish, blue looks muddy | Re-check digit order: HEX is always #RRGGBB, matching R, G, B in that sequence |
| Wrong-case letters mixed with digits | Some browsers accept #3B82f6, others reject it inconsistently | Stick to lowercase to match the convention used by most minifiers and linters |
| Shorthand expansion assumption | #3b8 not behaving the same as #33bb88 | Remember shorthand only works when each pair doubles, so #3b8 means #33bb88, not #3b8000 |
| Channel value outside 0–255 | Browser silently clamps to the nearest bound | Validate inputs upstream — CSS will not warn, it will just snap the channel to 0 or 255 |
| Using HEX for print output | Print proof comes back duller than the screen preview | Screen RGB is not the same color space as CMYK; switch to the RGB to CMYK converter before sending to a printer |
A second pitfall is forgetting accessibility. A hex code that looks pleasant in isolation can still produce unreadable text against a chosen background. Before shipping a new color pair, run both the foreground and background through the color contrast checker, which evaluates the combination against WCAG AA and AAA criteria in real time. Designers who skip this step frequently end up rolling back colors after an accessibility audit, so testing early is much cheaper than testing late.
If you are generating a range of related colors rather than a single value — for instance, building out hover, active, and disabled states of one button — a palette generator will save you from guessing the math for each shade. Starting from one base hue and a lightness ramp produces a coherent scale without manual trial and error.
Once you have a hex value in hand and you also need to verify that it looks consistent across random samples — for example, stress-testing a UI by browsing with rotating accents — pairing the converter with a random color generator is a low-cost way to confirm the conversion behaves the same on any source value. Conversely, if you are designing gradients rather than flat fills, the color gradient generator can interpolate smoothly between two hex endpoints and emit the CSS code in one click.
See also: How to Check Color Contrast for Web Accessibility in Seconds.