English
العربية
Deutsch
Español
Français
Italiano
Português
Русский
Türkçe
Tiếng Việt
RGB to Hex Converter
Convert red, green, blue values into a hex color code.
A color picker in your design tool gives you rgb(46, 134, 171), but the CSS file you are editing is full of hex codes, and mixing the two formats in the same stylesheet is the kind of small inconsistency that makes a codebase annoying to maintain.
Converting the other direction from hex
Each of the three RGB values, 0 to 255, converts to a two-digit base-16 pair, and the three pairs join with a leading # to make the hex code. Take rgb(46, 134, 171): 46 becomes 2E, 134 becomes 86, and 171 becomes AB, giving #2E86AB, a muted teal blue.
The math is simple but manual conversion invites mistakes, particularly around values near the edges — 15 becomes 0F with a leading zero that is easy to drop by accident, turning a valid hex pair into an invalid one-character value.
RGB to hex, common values
| RGB value | Hex pair | Full example |
|---|---|---|
| 0 | 00 | #000000 (black) |
| 15 | 0F | a dark, easy-to-drop leading zero |
| 87 | 57 | #FF5733 (orange-red) |
| 171 | AB | #2E86AB (teal blue) |
| 255 | FF | #FFFFFF (white) |
RGBA and 8-digit hex with alpha
When a colour needs transparency, RGB gains a fourth value, alpha, written rgba(46, 134, 171, 0.5) for 50% opacity. Hex has an equivalent 8-digit form — #2E86AB80 — where the extra two digits at the end encode that same alpha value on the same 0–255, 00-to-FF scale as the colour channels, not as a percentage directly. Not every context supports 8-digit hex; check that your CSS target or design tool actually reads it before relying on it over rgba().
Checking contrast once you have a hex value
- The Web Content Accessibility Guidelines set a minimum contrast ratio of 4.5:1 between text and its background for normal body text.
- Large text, 18pt and above or 14pt bold, gets a slightly relaxed minimum of 3:1.
- A light grey like
#AAAAAAon white fails this badly — it looks fine to someone with strong eyesight and is genuinely hard to read for many others. - Converting both your text and background colours to hex makes it easy to run them through a contrast checker before you ship a design.
RGB to hex questions
How do I convert a single RGB value, like 171, into its hex pair?
Divide it by 16: 171 divided by 16 is 10 remainder 11. Ten in base-16 is A and eleven is B, giving the pair AB. It is fiddly by hand, which is exactly why a converter is faster.
What does the extra pair of digits mean in an 8-digit hex code?
It represents alpha, or opacity, encoded the same way as a colour channel — FF is fully opaque and 00 is fully transparent, with everything in between as a base-16 value on that scale.
Why do I need a leading zero for some hex pairs?
Hex pairs are always exactly two digits. An RGB value like 5 converts to 05, not just 5, because dropping the zero would make the hex code the wrong length and shift every following pair.
What contrast ratio do I need for body text to pass accessibility guidelines?
WCAG AA requires at least 4.5:1 for normal body text and 3:1 for large text (18pt or larger, or 14pt bold). Converting your colours to hex makes it straightforward to check both against a contrast calculator.
Is rgba() or 8-digit hex better for transparency in CSS?
Both work in modern browsers and represent the same thing. rgba() is slightly more explicit and widely understood; 8-digit hex is more compact. Use whichever matches the rest of your codebase’s style.
