CalculatorSwitch
Calculator Switch
Conversions

Hex to RGB Converter

Last updated:

How to Use This Calculator

Step 1: Select Hex to RGB or RGB to Hex.

Step 2: Enter hex code (#FF5733) or RGB values (0-255 each).

Step 3: Click Calculate for the converted code plus CSS format.

Hex and RGB Colors

Screens mix Red, Green, Blue at intensities 0-255. Hex codes represent RGB compactly: #RRGGBB. #FF5733 = Red:255, Green:87, Blue:51.

Both work in CSS. Hex is shorter (#FF5733), RGB is more readable (rgb(255,87,51)).

Conversion Formula

Hex to RGB: Split into 3 pairs, convert base-16 to base-10.
#FF5733: FF=255, 57=87, 33=51

RGB to Hex: Convert each 0-255 to 2-digit hex.
255=FF, 87=57, 51=33 = #FF5733

Common Colors

ColorHexRGB
White#FFFFFF255,255,255
Black#0000000,0,0
Red#FF0000255,0,0
Green#00FF000,255,0
Blue#0000FF0,0,255
Yellow#FFFF00255,255,0
Orange#FF8C00255,140,0
Purple#800080128,0,128

Examples

Example 1: #3498DB = rgb(52,152,219)

Example 2: rgb(0,99,219) = #0063DB

Example 3: #F00 = #FF0000 = rgb(255,0,0)

Color Tips

Shorthand: #FC0 = #FFCC00 when digits repeat.

Primaries: #FF0000=red, #00FF00=green, #0000FF=blue.

Equal RGB = gray. rgb(200,200,200) = light gray.

# is optional in most tools.

Frequently Asked Questions

What is the difference between hex and RGB color codes?
They represent the exact same color information in different formats. Hex uses base-16 notation in a compact 6-character string (#FF5733), while RGB expresses each color channel as a decimal number from 0 to 255 (255, 87, 51). Hex is more common in CSS stylesheets because it is shorter. RGB is more intuitive for programmatic color manipulation — for example, making a color 20% darker by reducing each channel.
Can I use 3-digit hex codes?
Yes. Three-digit hex codes are a shorthand where each digit is doubled to form the full 6-digit code. For example, #F00 becomes #FF0000 (pure red), #39F becomes #3399FF, and #000 becomes #000000 (black). This converter accepts both 3-digit and 6-digit codes. The shorthand only works when each pair of digits is identical — #F37 is valid shorthand, but you cannot shorten #F3A7B2.
What about transparency and RGBA?
RGBA extends RGB by adding an alpha channel that controls transparency, ranging from 0 (fully transparent) to 1 (fully opaque). In CSS, you write it as rgba(255, 87, 51, 0.5) for 50% opacity. In hex, transparency is sometimes represented as a 4th byte: #FF573380. This converter handles fully opaque colors — to add transparency, append the alpha value to your CSS rgba() declaration manually.
How do I find the hex code of a color on my screen?
Several built-in tools can help. In Chrome, open DevTools (F12), go to the Styles panel, and click any color swatch to open the color picker. On Mac, use the built-in Digital Color Meter app (found in Applications > Utilities). On Windows, install PowerToys and use the Color Picker tool (Win+Shift+C). Design tools like Figma, Photoshop, and Sketch all display hex codes in their color panels.
What is the difference between RGB and CMYK?
RGB (Red, Green, Blue) is an additive color model used for screens — it creates colors by adding light. When all three channels are at maximum (255, 255, 255), you get white. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used for printing — it creates colors by absorbing light from white paper. The same color can look different on screen versus print because the two systems have different color ranges, called gamuts.
Why do some hex codes start with # and others do not?
The # symbol is a CSS and HTML convention that tells the browser the following characters represent a hexadecimal color value. Without it, the browser might interpret the value as a class name or other identifier. In design tools like Photoshop, Illustrator, and Figma, the # is often omitted because the context (a color picker) makes the meaning obvious. Both formats represent exactly the same color.

Related Calculators

Was this useful?