How to Convert HEX to RGB (and Back)
HEX and RGB are two ways of expressing the same thing — a color defined by its red, green, and blue channel values. HEX uses hexadecimal notation (#FF6B6B), while RGB uses decimal (rgb(255, 107, 107)). Converting between them is straightforward once you understand the math.
- Convert HEX color codes to RGB values manually or instantly with a free tool.
- What Is a HEX Color Code?.
- The Manual Conversion Formula.
- Covers converting in javascript.
- When to Use Each Format in CSS.
What Is a HEX Color Code?
A HEX color code is a six-character string preceded by a hash sign. Each pair of characters represents one color channel in hexadecimal (base-16): the first two for red, the middle two for green, and the last two for blue. For example, #FF6B6B breaks down as FF (red = 255), 6B (green = 107), 6B (blue = 107). The range for each channel is 00 (0) to FF (255). Shorthand HEX codes like #F00 expand to #FF0000 — each character is doubled.
The Manual Conversion Formula
To convert HEX to RGB, split the six characters into three pairs and convert each pair from hexadecimal to decimal. For #2C3E50: 2C in hex = (2 × 16) + 12 = 44 (red), 3E in hex = (3 × 16) + 14 = 62 (green), 50 in hex = (5 × 16) + 0 = 80 (blue). Result: rgb(44, 62, 80). To go the other direction — RGB to HEX — convert each decimal value to a two-digit hexadecimal number. 44 in decimal = 2C in hex, 62 = 3E, 80 = 50. Combine them: #2C3E50.
Converting in JavaScript
In JavaScript, parseInt with base 16 handles the conversion:
background-size animation or @property registered custom properties instead.const hex = '#FF6B6B';
const r = parseInt(hex.slice(1, 3), 16); // 255
const g = parseInt(hex.slice(3, 5), 16); // 107
const b = parseInt(hex.slice(5, 7), 16); // 107
For RGB to HEX, use toString(16) and pad with leading zeros:
const toHex = (r, g, b) => '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
When to Use Each Format in CSS
Both formats produce identical results in CSS — the browser doesn't care which you use. HEX is more compact and is the default in most design tools (Figma, Sketch). RGB is more readable when you need to understand the channel values at a glance, and RGBA lets you add an alpha transparency channel: rgba(255, 107, 107, 0.5). Modern CSS also supports hex with alpha: #FF6B6B80 (the last two digits are alpha). However, RGBA is still more widely understood for transparency.
Common Conversions Reference
Here are frequently used conversions: White is #FFFFFF / rgb(255, 255, 255). Black is #000000 / rgb(0, 0, 0). Pure red is #FF0000 / rgb(255, 0, 0). Pure green is #00FF00 / rgb(0, 255, 0). Pure blue is #0000FF / rgb(0, 0, 255). The Color Converter tool handles all of these instantly — paste any format and get every other format back, including HSL, CMYK, and CSS named colors.