How to use the rgb to hex converter
- Enter the red, green and blue values as integers between 0 and 255.
- The converter updates live as you type each channel value.
- Copy the result in your preferred format: uppercase
#RRGGBB, lowercase,0xnotation or the CSSrgb()string.
How RGB to hex conversion works
An RGB color is defined by three channels: red, green and blue. Each channel is an integer from 0 to 255, which fits exactly into one byte or two hexadecimal digits. To convert an rgb to hex color, each decimal value is transformed into base 16 and padded with a leading zero if necessary.
For example, take the rgb to hex code conversion of cornflower blue: R=100, G=149, B=237. In hexadecimal, 100 becomes 64, 149 becomes 95 and 237 becomes ED. Concatenating these gives the final hex color #6495ED.
The formula for a single channel is straightforward: divide the decimal number by 16 to get the first digit, then take the remainder for the second digit. For 149: 149 / 16 = 9 remainder 5, so the hex pair is 95.
Common RGB to hex color reference
This table lists frequently used colors with their RGB and hexadecimal equivalents. Use it as a quick lookup when working on frontend designs or stylesheets.
| Color name | R | G | B | Hex code |
|---|---|---|---|---|
| Black | 0 | 0 | 0 | #000000 |
| White | 255 | 255 | 255 | #FFFFFF |
| Red | 255 | 0 | 0 | #FF0000 |
| Green | 0 | 128 | 0 | #008000 |
| Blue | 0 | 0 | 255 | #0000FF |
| Yellow | 255 | 255 | 0 | #FFFF00 |
| Cyan | 0 | 255 | 255 | #00FFFF |
| Magenta | 255 | 0 | 255 | #FF00FF |
| Silver | 192 | 192 | 192 | #C0C0C0 |
| Gray | 128 | 128 | 128 | #808080 |
Where to use hex color codes
Hexadecimal color codes are the standard way to specify colors in HTML and CSS. You will use them in properties like color, background-color and border-color. They are also common in design tools such as Figma, Sketch and Adobe Photoshop, where you can paste a hex value directly into the color picker.
In JavaScript and other programming languages, the 0x prefix notation (for example 0xFF0000) represents the same value as a numeric literal. This is useful when manipulating colors programmatically through bitwise operations.
If you need to go the other direction, use the hex to rgb converter. For print workflows that require CMYK values, the cmyk to hex and hex to cmyk tools handle those conversions.
Common mistakes when converting RGB to hexadecimal
The most frequent error is entering a value outside the valid range. Each channel must be an integer from 0 to 255. Values like 256 or negative numbers are invalid and will produce incorrect results or errors in CSS.
Another mistake is using percentages instead of integers. While CSS supports rgb(100%, 0%, 0%), this converter expects the 0 to 255 integer scale. Convert percentages first by multiplying by 2.55 and rounding.
Finally, forgetting to pad single-digit hex values with a leading zero is a common bug. The decimal value 5 must become 05 in hex, not just 5. Without padding, the resulting six-character string will be misaligned and represent a completely different color.
Understanding the CSS rgb() function
Alongside the hex output, this tool provides the CSS rgb() functional notation. In modern CSS, the syntax uses space-separated values without commas: rgb(255 0 0). Older stylesheets may still use the comma-separated form rgb(255, 0, 0), and both are widely supported by browsers.
The rgb() function is sometimes preferred over hex because it is easier to read at a glance, especially for designers who think in terms of light intensity rather than base-16 arithmetic. However, hex remains more compact and is the dominant format in design specifications and style guides.
Worked examples
| Example | Input | Result |
|---|---|---|
| Pure red | Red (R): 255; Green (G): 0; Blue (B): 0 | HEX (uppercase): #FF0000; hex (lowercase): #ff0000; 0x notation: 0xFF0000; CSS rgb(): rgb(255 0 0) |
| White | Red (R): 255; Green (G): 255; Blue (B): 255 | HEX (uppercase): #FFFFFF; hex (lowercase): #ffffff; 0x notation: 0xFFFFFF; CSS rgb(): rgb(255 255 255) |
| Black | Red (R): 0; Green (G): 0; Blue (B): 0 | HEX (uppercase): #000000; hex (lowercase): #000000; 0x notation: 0x000000; CSS rgb(): rgb(0 0 0) |
| Cornflower blue | Red (R): 100; Green (G): 149; Blue (B): 237 | HEX (uppercase): #6495ED; hex (lowercase): #6495ed; 0x notation: 0x6495ED; CSS rgb(): rgb(100 149 237) |
| CSS default blue | Red (R): 0; Green (G): 0; Blue (B): 255 | HEX (uppercase): #0000FF; hex (lowercase): #0000ff; 0x notation: 0x0000FF; CSS rgb(): rgb(0 0 255) |
FAQ
What is the valid range for RGB values?
Each channel (red, green, blue) must be an integer from 0 to 255. A value of 0 means no intensity for that channel, while 255 means full intensity.
Why does my hex code have six characters?
Each of the three RGB channels is represented by two hexadecimal digits. Since one hex digit covers 0 to 15, two digits cover 0 to 255, giving a total of six characters after the hash symbol.
Is there a difference between uppercase and lowercase hex?
No. CSS and HTML treat #ff0000 and #FF0000 as the exact same color. Uppercase is often preferred in design specs for readability, while lowercase is common in code.
Can I use a three-character shorthand hex code?
Yes, but only when each pair of digits is identical. For example, #AABBCC can be shortened to #ABC, but #6495ED cannot be abbreviated.
How do I convert a percentage-based RGB value?
Multiply the percentage by 2.55 and round to the nearest integer. For instance, 50% becomes 128 (since 50 x 2.55 = 127.5, rounded to 128).
Does this tool work offline?
Yes. The conversion logic runs entirely in your browser using JavaScript. No data is sent to any server, so it works without an internet connection once the page has loaded.