Hex to RGB

Convert hexadecimal color codes to RGB values and vice versa with color preview and CSS output formats.

100% client-side No signup Free forever
#000000
#000000
rgb(0, 0, 0)
rgba(0, 0, 0, 1)
hsl(0, 0%, 0%)
// reference

Common Colors

// how to use

How to Use Hex to RGB

How to Use the HEX to RGB Converter

  1. Enter HEX code: Type a HEX color code with or without the # symbol (e.g., #3B82F6 or 3B82F6).
  2. Or enter RGB values: Input R, G, and B values (0-255) in the respective fields.
  3. View all formats: See the color converted to HEX, RGB, RGBA, HSL, and HSLA.
  4. Preview the color: A color swatch shows you the exact color.
  5. Copy any format: Click to copy the format you need.

Conversion Math

HEX to RGB: Each pair of HEX digits converts to a decimal 0-255.
Example: #3B = 3×16 + 11 = 59 (Red value)

RGB to HEX: Each decimal converts to two HEX digits.
Example: 130 = 8×16 + 2 = 82 (in HEX)

// features

Features

  • HEX to RGB conversion
  • RGB to HEX conversion
  • Real-time color preview
  • HSL output included
  • HSLA and RGBA formats
  • Short HEX support (#RGB)
  • Alpha channel/transparency
  • Color picker integration
  • Copy any format with one click
  • Input validation
  • Mobile-friendly design
  • No registration required
// about

About Hex to RGB

Web colors use two primary formats: hexadecimal (#FF5733) and RGB (rgb(255, 87, 51)). Designers and developers frequently need to convert between them for different contexts. Our converter handles both directions with visual color preview.

Color Format Details

  • Hexadecimal: #RRGGBB where each pair is 00-FF (0-255 in decimal)
  • Shorthand Hex: #RGB expands to #RRGGBB (e.g., #F53 = #FF5533)
  • RGB: rgb(red, green, blue) with values 0-255
  • RGBA: rgb() with alpha channel for transparency

When to Use Each

Hex codes are compact and widely used in CSS and design tools. RGB values are clearer for programmatic color manipulation—adjusting brightness means changing numeric values. RGBA adds transparency control not available in basic hex. Our converter provides all formats simultaneously.

Color Preview

Seeing the actual color prevents errors. A typo in hex code produces unexpected colors. Our visual preview confirms you're working with the intended shade before copying values into your project.

// faq

Frequently Asked Questions

What is the difference between HEX and RGB colors?
Both represent the same colors, just in different formats. HEX uses hexadecimal (#FF5733), while RGB uses decimal values (rgb(255, 87, 51)). HEX is more compact for writing; RGB is more intuitive for understanding color components. They're interchangeable in CSS and design software.
How do I convert HEX to RGB manually?
HEX colors have 6 digits: pairs for Red, Green, Blue. Convert each pair from hex to decimal. Example: #FF5733 → FF=255, 57=87, 33=51 → rgb(255, 87, 51). Our converter does this instantly and also provides HSL, CMYK, and other formats.
What is the alpha channel in RGBA?
The alpha channel controls transparency, ranging from 0 (fully transparent) to 1 (fully opaque). RGBA extends RGB with this fourth value: rgba(255, 87, 51, 0.5) is 50% transparent. In HEX, alpha can be added as a fourth pair: #FF573380 (80 = 50% opacity in hex).
Why do some HEX codes have 3 digits instead of 6?
Three-digit HEX is shorthand where each digit is doubled: #F53 = #FF5533. This only works when each color pair has identical digits. Our converter accepts both formats and can output in either. Use 6-digit for precision, 3-digit when the shorthand is valid and you want brevity.
Which color format should I use in my code?
For CSS, HEX is most common and compact. RGB is useful when you need to manipulate color values programmatically. RGBA/HSLA when you need transparency. HSL is intuitive for adjusting hue, saturation, or lightness. Most design tools accept all formats - choose based on your needs.
Can I convert colors from images or screenshots?
Yes! Use our color picker tool or upload an image to extract colors. Click anywhere on the image to get the color in all formats. This is useful for matching colors from designs, screenshots, or inspiration images. You'll get HEX, RGB, HSL, and CMYK values instantly.