Hex to RGB Converter -- HEX, RGB, HSL Colors

Convert Color Codes

The hex to RGB converter translates hexadecimal color codes into RGB, RGBA, HSL, and CSS values. Enter a hex code or pick a color to see all formats instantly.

Common Colors — Click to Convert

Click any color to load it into the converter and see all format values:

How Hex to RGB Conversion Works

A hex color code is a compact way to write an RGB color value. The conversion is straightforward: split the hex string into three pairs and convert each pair from base-16 to base-10.

The Formula

For a hex code #RRGGBB:

• Red = (first hex digit × 16) + second hex digit
• Green = (third hex digit × 16) + fourth hex digit
• Blue = (fifth hex digit × 16) + sixth hex digit

Hex digits map to decimal: 0–9 = 0–9, A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. The conversion is case-insensitive — #ff0000 and #FF0000 are the same color.

Shorthand Hex Codes

Three-character hex codes like #F00 are shorthand. Each character is doubled to create the full six-character code:

Shorthand only works when each channel's two digits are identical. #3B82F6 has no shorthand equivalent.

Hex Digit Reference

Hexadecimal (base 16) uses digits 0–9 and letters A–F. Here is the complete mapping:

Two hex digits together represent values from 00 (0) to FF (255), giving 256 possible values per color channel. Total colors: 256 × 256 × 256 = 16,777,216.

Color Format Comparison

Here is how the same color appears in different CSS formats:

Common Hex-to-RGB Conversions

Reference table for frequently searched hex color values:

Common Use Cases

• CSS development: Convert hex values from design tools into rgb() or hsl() for your stylesheets — especially when you need transparency (rgba) or programmatic color adjustments.
• Design handoff: Developers receive hex codes from Figma, Sketch, or Adobe XD and need RGB values for certain frameworks or native app development (iOS, Android).
• Accessibility testing: Convert colors to RGB to calculate contrast ratios and verify WCAG compliance for text readability.
• Data visualization: Chart libraries like D3.js, Chart.js, and Plotly often accept rgb() or rgba() values for setting bar, line, and area colors with transparency.
• Email templates: Some email clients handle RGB better than hex in certain contexts, particularly for background colors in Outlook.
• Game and app development: Game engines and UI frameworks often use RGB tuples or normalized 0-1 float values rather than hex strings.
• Tailwind CSS: Matching a design's hex colors to the closest Tailwind utility class (this converter shows the closest match automatically).

Common Mistakes

• Missing the # prefix: CSS requires the # before hex values. color: 3B82F6 is invalid; color: #3B82F6 is correct. This converter accepts input with or without the hash.
• Confusing RGB 0-255 with percentages: RGB values range from 0 to 255, not 0 to 100. rgb(100, 100, 100) is a dark gray, not white. HSL uses percentages for saturation and lightness — but RGB does not.
• Mixing up hex channel order: Hex codes are always Red-Green-Blue (#RRGGBB). Confusing the order gives you completely different colors. #FF0000 is red; #0000FF is blue.
• Forgetting alpha format differences: In rgba(), alpha is 0 to 1 (decimal). In 8-digit hex, alpha is 00 to FF (hexadecimal). rgba(0,0,0,0.5) = #00000080 — not #00000050.
• Assuming hex is case-sensitive: It is not. #3b82f6 and #3B82F6 are identical. Lowercase is slightly more common in modern CSS.
• Using 8-digit hex in older browsers: The #RRGGBBAA format is not supported in Internet Explorer or older Safari versions. Use rgba() for broader compatibility when transparency is needed.

Frequently Asked Questions

How do I convert a hex color code to RGB?

Split the six-character hex code into three pairs (RR, GG, BB). Convert each pair from hexadecimal to decimal. For example, #FF5733 becomes R=255 (FF), G=87 (57), B=51 (33), giving rgb(255, 87, 51). Paste any hex code into the converter above to get all format values instantly.

What is the difference between hex and RGB?

They represent the same colors using different notation. Hex uses a compact six-character base-16 string (#3B82F6), while RGB uses three separate decimal values (rgb(59, 130, 246)). Both encode 16.7 million colors. Hex is more common in CSS and design tools; RGB is more readable for programmatic manipulation.

Can hex codes include transparency?

Yes. An eight-character hex code (#RRGGBBAA) adds an alpha channel. The last two characters range from 00 (fully transparent) to FF (fully opaque). For example, #3B82F680 is approximately 50% opacity. Modern browsers support this, but for older browser compatibility, use rgba().

What does each pair of characters in a hex code represent?

The first pair is red intensity, the second is green, the third is blue. Each pair is a hexadecimal number from 00 (0) to FF (255). In #FF8C00: red = 255 (maximum), green = 140 (moderate), blue = 0 (none) — that is the color dark orange.

What is a shorthand hex code?

A three-character code like #F00 where each character is doubled to form the full code: #FF0000. This only works when both digits in each pair are the same. #3B82F6 cannot be shortened because its pairs (3B, 82, F6) contain different digits.

How do I convert hex to HSL?

First convert hex to RGB (split and parse each pair). Then convert RGB to HSL by calculating hue from the dominant channel, saturation from the range between maximum and minimum channels, and lightness from their midpoint. This converter does both steps automatically.

Is hex or RGB better for CSS?

Both work equally well. Hex is shorter and more common in stylesheets. RGB is easier to read and adjust programmatically. For transparency, rgba() has wider browser support than 8-digit hex. For color palette work, HSL is often more intuitive since you can adjust brightness independently of hue.

Why does the same hex color look different on different screens?

The hex code defines a numerical value, but how it renders depends on the display hardware: color gamut, brightness, contrast, and color profile calibration. Two monitors showing #3B82F6 may display subtly different blues. Calibrated monitors minimize this variation.

What are the hex codes for black, white, and gray?

Black is #000000 (all channels 0). White is #FFFFFF (all channels 255). Gray values have equal R, G, and B: #808080 is medium gray (128, 128, 128). #C0C0C0 is silver (192, 192, 192). #333333 is dark gray (51, 51, 51).

How many colors can hex represent?

Standard six-digit hex codes represent 16,777,216 colors (256 × 256 × 256 = 2²⁴). Each channel has 256 possible values. With 8-digit hex including alpha, there are 256⁴ = 4,294,967,296 possible color and transparency combinations.

How do I find the hex code for an RGB value?

Convert each decimal RGB value to a two-digit hexadecimal number. For rgb(59, 130, 246): 59 → 3B, 130 → 82, 246 → F6, giving #3B82F6. Enter RGB values in the converter above to get the hex code instantly.

Does this converter send my data to a server?

No. All conversion happens in your browser using JavaScript. No color values are transmitted. You can verify this by disconnecting from the internet and using the tool — it works entirely offline after the page loads.

Related Tools

• RGB to Hex Converter — convert RGB values back to hex color codes
• HSL to RGB Converter — convert HSL color values to RGB
• RGB to HSL Converter — convert RGB colors to HSL format
• Color Contrast Checker — test WCAG contrast ratios for accessibility
• Color Palette Generator — create harmonious color schemes
• Color Picker — pick and explore colors visually

Privacy & Limitations

• Client-side only. No color data is sent to any server. No cookies, no tracking of values entered.
• sRGB color space. This converter works in the standard sRGB color space used by CSS and web browsers. It does not convert to or from display-specific profiles like Adobe RGB or DCI-P3.
• Tailwind matching is approximate. The closest Tailwind color is based on Euclidean distance in RGB space, which does not account for perceptual color differences. The match is a starting point, not an exact recommendation.
• Browser color picker. The built-in color picker appearance and features depend on your browser and operating system. Some browsers support eyedropper functionality; others show a simple palette.

Hex to RGB Converter FAQ