RGB to HEX Converter
Convert RGB (Red, Green, Blue) color values to HEX color codes. HEX is the standard format for colors in web development, CSS, and HTML. This converter translates RGB values instantly to their hexadecimal equivalents.
Understanding the Conversion
RGB uses decimal values (0-255), while HEX uses hexadecimal (00-FF). Each RGB component converts to a two-character HEX value:
| RGB Value | HEX Value |
|---|---|
| 255 | FF |
| 128 | 80 |
| 0 | 00 |
| 200 | C8 |
Conversion Formula
To convert RGB to HEX: 1. Convert each decimal value (0-255) to hexadecimal (00-FF) 2. Combine as #RRGGBB
Example: rgb(255, 128, 64)
- 255 → FF
- 128 → 80
- 64 → 40
- Result: #FF8040
Common RGB to HEX Conversions
| Color | RGB | HEX |
|---|---|---|
| Red | rgb(255, 0, 0) | #FF0000 |
| Green | rgb(0, 255, 0) | #00FF00 |
| Blue | rgb(0, 0, 255) | #0000FF |
| Yellow | rgb(255, 255, 0) | #FFFF00 |
| Cyan | rgb(0, 255, 255) | #00FFFF |
| Gray | rgb(128, 128, 128) | #808080 |
Using HEX in CSS
``css
.element {
color: #FF5733;
background-color: #F0F0F0;
border-color: #333333;
}
`
Shorthand HEX
When each pair has identical digits, use 3-character shorthand:
#FF0000 → #F00- #336699 → #369
Use this converter for quick RGB to HEX translation in your web projects.RGB and HEX
RGB HEX Syntax rgb(255 99 71) in modern CSS, rgb(255, 99, 71) in the legacy comma form #RRGGBB, or #RGB shorthand, or #RRGGBBAA with alpha Channels red, green, blue — 0–255 or 0–100% red, green, blue — each 0–255 written as two hex digits Precision 8 bits per channel as normally written; CSS accepts fractional values 8 bits per channel, 16.7 million colours Support Universal. The space-separated form needs a 2020-or-later browser. Universal. The 8-digit alpha form needs a 2020-or-later browser. Best for Programmatic colour manipulation, canvas work, image pixel data. Design handoff, CSS, anywhere a colour is written as a single token.
A Worked Example
Taking CSS tomato through every format:
| Format | Value |
|---|---|
| HEX | #FF6347 |
| RGB | rgb(255, 99, 71) |
| RGBA | rgba(255, 99, 71, 0.5) |
| HSL | hsl(9, 100%, 64%) |
| HSB | hsb(9, 72%, 100%) |
| CMYK | cmyk(0%, 61%, 72%, 0%) |
Doing It in Code
`javascript
// HEX to RGB
const hexToRgb = (hex) => {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};
// RGB to HEX
const rgbToHex = (r, g, b) =>
'#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
`
Modern CSS can do a lot of this without any conversion at all: color-mix() blends two
colours, and relative colour syntax — hsl(from var(--brand) h s calc(l + 10%))` — derives
a lighter shade without you ever computing one.