Sponsored placement
What Is the Difference Between HEX and RGB?
HEX and RGB are two ways to express the same color. Both describe a color by specifying its red, green, and blue component intensities. The difference is only the notation.
RGB notation uses three decimal numbers from 0 to 255 for each channel: rgb(255, 87, 51) is a vivid orange. HEX notation encodes the same three channels as a six-character hexadecimal string prefixed with a hash sign: #FF5733 is the same vivid orange. In hexadecimal, each channel goes from 00 (0 in decimal) to FF (255 in decimal). The first two characters represent red (FF = 255), the middle two represent green (57 = 87), and the last two represent blue (33 = 51).
CSS supports both formats natively. Most design tools (Figma, Sketch, Illustrator, Photoshop) display HEX by default and can switch to RGB. Some CSS properties like rgba() require RGB values because they include an alpha (opacity) channel: rgba(255, 87, 51, 0.8) is the same orange at 80% opacity. HEX codes can also express transparency using an 8-character format like #FF573380, but rgba() is more widely understood.
- HEX: six hexadecimal digits (00–FF) per channel — #RRGGBB format
- RGB: three decimal integers (0–255) per channel — rgb(R, G, B) format
- Both represent the same color — only the notation differs
- RGBA adds opacity: rgba(R, G, B, 0.0–1.0)
- Short HEX: #RGB where each digit is doubled (#F53 = #FF5533)
How to Convert HEX to RGB Manually
To convert a HEX color to RGB: split the six-character HEX string into three pairs (RR, GG, BB), then convert each pair from hexadecimal to decimal. For #FF5733: FF in hex = 255 in decimal, 57 in hex = 87 in decimal, 33 in hex = 51 in decimal. The result is rgb(255, 87, 51).
To convert RGB back to HEX: convert each decimal number to a two-digit hexadecimal value and concatenate them with a # prefix. For rgb(255, 87, 51): 255 in decimal = FF in hex, 87 in decimal = 57 in hex, 51 in decimal = 33 in hex. Result: #FF5733.
The JavaScript calculation is straightforward: parseInt('FF', 16) converts hex to decimal, and n.toString(16).padStart(2, '0') converts decimal to two-digit hex. This converter does this calculation instantly for any input.
When to Use HEX vs RGB in CSS
Both HEX and RGB work equally well in CSS. Use whichever matches your team's convention or design tool output. HEX is more compact for colors without transparency. RGB (or the newer hsl()) is more readable when you want to express colors in terms of human-understandable components.
For colors with transparency, use rgba() or the newer CSS color() function. The modern CSS color-mix() function allows mixing colors without JavaScript. When specifying brand colors in a design system, store both HEX and RGB values so developers can use either format in their context.
Why marketers use this tool
- Convert HEX color codes to RGB values and back in one click
- See a live color swatch to visually confirm the conversion
- Copy both HEX and RGB values for immediate use in CSS or design tools
Frequently Asked Questions
How do I convert a HEX color to RGB?
Split the six-character HEX code into three pairs and convert each from hexadecimal to decimal. For #FF5733: FF=255, 57=87, 33=51, so the result is rgb(255, 87, 51). In JavaScript: parseInt('FF', 16) gives 255. This converter does the math automatically for any HEX input.
What is the difference between HEX and RGBA?
HEX uses six hexadecimal digits to specify red, green, and blue without transparency. RGBA adds a fourth alpha channel for opacity, expressed as a decimal from 0.0 (fully transparent) to 1.0 (fully opaque). Use rgba() when you need semi-transparent colors in CSS.
What does the # symbol mean in a HEX color code?
The # sign is a prefix required by CSS and most design tools to identify the value as a hexadecimal color code. The six characters after # represent the red, green, and blue channel values in hexadecimal notation (00–FF).
What is a three-character HEX code?
A three-character HEX code (#RGB) is a shorthand where each digit is duplicated to form the full six-character code. #F53 expands to #FF5533. Only colors where each channel has matching digits can use the shorthand — #123 = #112233, but #FF5733 cannot be shortened.
Can I use RGB values in Figma or Sketch?
Yes. Figma, Sketch, Photoshop, and Illustrator all support RGB input alongside HEX. In Figma, click the color swatch and switch the format to RGB or HEX using the selector in the color picker. Design tokens and component libraries often store colors in both HEX and RGB formats for flexibility.