Hex to RGB Color Conversion Guide: How It Works (2026)

What Is a Hex Color Code?

A hex color code is a six-character string prefixed with #that represents a color in the RGB color model using base-16 (hexadecimal) notation. It’s the most common color format you’ll encounter in CSS and design tools like Figma, Sketch, and Adobe XD.

According to W3Techs (2026), CSS is used by 96.3% of all websites as a styling language — meaning hex color codes appear on virtually every corner of the internet. And a 2024 Stack Overflow Developer Survey found that CSS and HTML are among the top 3 most-used technologies, used by 52.9% of all professional developers. If you work on anything for the web, you will encounter hex codes constantly.

The #symbol is purely a prefix. It tells browsers and code parsers that what follows is a hex color string. The six characters after it encode three color channels — red, green, and blue — two characters each.

How the Base-16 Number System Works

Most of us think in base-10: digits run from 0 to 9. Hexadecimal (base-16) extends that by adding six letters. The digits are: 0 1 2 3 4 5 6 7 8 9 A B C D E F.

In hex, A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. A two-digit hex value can represent numbers from 00 (decimal 0) to FF (decimal 255), giving 256 possible values per channel.

That’s why the CSS Color specification (Level 4, W3C) supports 16.7 million colors using 24-bit RGB: 256 × 256 × 256 = 16,777,216 distinct colors. Three channels, two hex digits each, packed into six characters.

Converting a Single Hex Pair to Decimal

Each hex digit position represents a power of 16. For a two-digit hex number like B4:

• Left digit B = 11, multiplied by 16¹ = 176
• Right digit 4 = 4, multiplied by 16&sup0; = 4
• Total: 176 + 4 = 180

So B4 in hex equals 180 in decimal. You don’t need to do this math manually — use our Hex to RGB Converter and it handles the calculation instantly.

Step-by-Step Hex to RGB Conversion

Let’s walk through converting #FF5733 to RGB.

Step 1: Remove the # prefix. You’re left with: FF5733

Step 2: Split into three two-character pairs.

• Red channel: FF
• Green channel: 57
• Blue channel: 33

Step 3: Convert each pair from hex to decimal.

• FF = (15 × 16) + (15 × 1) = 240 + 15 = 255
• 57 = (5 × 16) + (7 × 1) = 80 + 7 = 87
• 33 = (3 × 16) + (3 × 1) = 48 + 3 = 51

Result: RGB(255, 87, 51) — a warm orange-red tone.

Shorthand Hex Codes

CSS also supports 3-digit shorthand hex codes. #F53 expands to #FF5533 by doubling each digit. This only works when each pair consists of two identical digits, so #ABC = #AABBCC, but #A1B has no valid shorthand equivalent.

Color Reference Table

The sRGB color space (IEC 61966-2-1:1999) became the default for web browsers in the 1990s and remains the standard display color space per the W3C. Every color in this table uses sRGB values — the same space your monitor, browser, and design tool all default to.

Hex, RGB, and HSL: When to Use Each

All three formats represent the same underlying colors. The choice comes down to context and what you’re trying to do.

Hex — Best for Copy-Paste and Design Handoffs

Hex is the most compact format and the one design tools output by default. It’s ideal for solid, opaque colors where you need to quickly drop a value into CSS or pass it between tools. Copy #C75B3Afrom Figma and paste it straight into your stylesheet — no conversion needed.

The limitation: standard 6-digit hex doesn’t support opacity. You can use 8-digit hex (#FF5733CC) in modern browsers, but browser support for this is uneven in older tooling.

RGB — Best for Opacity and JavaScript Manipulation

When you need a semi-transparent color, rgba(255, 87, 51, 0.8) is the standard approach. The fourth parameter (alpha) accepts values from 0 (fully transparent) to 1 (fully opaque). This is the go-to format for overlays, tooltips, modal backdrops, and hover states.

RGB is also preferable when generating colors in JavaScript. Incrementing or interpolating numeric values is straightforward: adjusting a red channel from 200 to 255 is just arithmetic. Doing the same in hex requires string manipulation.

HSL — Best for Themes and Color Relationships

HSL stands for hue, saturation, lightness. The hue value (0–360) maps to a position on the color wheel — red at 0, green at 120, blue at 240. Saturation controls how vivid the color is (0% is gray, 100% is fully saturated). Lightness controls how bright it is (0% is black, 100% is white).

This makes HSL intuitive for building color systems. Want a lighter version of your brand color? Increase the lightness value. Want a muted, desaturated tone for a background? Drop the saturation. You can generate entire palettes by keeping the same hue and varying lightness from 10% to 90%.

According to research from the Institute for Color Research, color increases brand recognition by up to 80%. Getting your color system right — and being able to generate consistent tints, shades, and semantic variants — is where HSL shines.

Converting RGB to HSL

Once you have RGB values, converting to HSL involves a few steps. For RGB(255, 87, 51):

Step 1: Normalize to 0–1 range.
R′ = 255/255 = 1.0, G′ = 87/255 = 0.341, B′ = 51/255 = 0.200

Step 2: Find max and min values.
Cmax = 1.0 (R), Cmin = 0.200 (B), Delta = 0.800

Step 3: Calculate Lightness.
L = (Cmax + Cmin) / 2 = (1.0 + 0.200) / 2 = 0.600 = 60%

Step 4: Calculate Saturation.
S = Delta / (1 − |2L − 1|) = 0.800 / (1 − |1.2 − 1|) = 0.800 / 0.800 = 1.0 = 100%

Step 5: Calculate Hue.
Since Cmax = R: H = 60 × ((G′ − B′) / Delta) mod 6 = 60 × ((0.341 − 0.200) / 0.800) mod 6 = 60 × 0.176 ≈ 10.6°

Result: HSL(11, 100%, 60%)

The math is tedious to do by hand — which is exactly why tools exist. Our Hex to RGB Converter outputs hex, RGB, and HSL simultaneously.

A Brief History of Web Colors

Color on the web wasn’t always this rich. The first standardized web palette was the "Web Safe Palette" — a set of 216 colors chosen because they rendered consistently across all monitors in the 1990s, regardless of whether the display supported 8-bit, 16-bit, or 24-bit color. These 216 colors used only hex values from the set {00, 33, 66, 99, CC, FF} for each channel, producing the characteristic “posterized” look of early websites.

As 24-bit displays became universal through the 2000s, the full 16.7 million color space became available to designers. The W3C formalized CSS color syntax through successive specifications — CSS1 introduced basic named colors, CSS2.1 added system colors, and CSS Color Level 3 standardized hsl() and rgba(). The current CSS Color Level 4 specification extends this with LCH, Lab, and display-p3 color spaces for HDR displays.

Frequently Asked Questions

How do you convert hex to RGB?

Split the hex code into three two-character pairs. Convert each pair from base-16 (hexadecimal) to base-10 (decimal). For example, #FF5733splits into FF (red), 57 (green), 33 (blue). FF in decimal is 255, 57 is 87, 33 is 51 — giving RGB(255, 87, 51).

What does # mean in a hex color code?

The #symbol is simply a prefix that tells CSS and HTML interpreters the following string is a hexadecimal color value. It has no numeric meaning — it’s just a convention established in the early web standards to distinguish hex color strings from other values.

What is the difference between hex and RGB colors?

Hex and RGB represent the exact same colors using different notations. Hex uses base-16 notation (0-9 and A-F) compressed into a 6-character string. RGB uses three decimal numbers from 0–255. #FF0000 and rgb(255, 0, 0)are both pure red — just written differently. Hex is shorter and more common in design tools; RGB is easier to read and manipulate programmatically.

How do I convert hex to RGB in CSS?

CSS accepts both formats natively. You can write color: #FF5733 or color: rgb(255, 87, 51) — both produce the same result. If you need transparency, use rgba(255, 87, 51, 0.8) — hex doesn’t support alpha directly (though 8-digit hex like #FF573380 does in modern browsers).

What is the RGB value of #FFFFFF?

#FFFFFFis pure white. FF in hexadecimal equals 255 in decimal. So all three channels are at maximum: RGB(255, 255, 255). In HSL, this is hsl(0, 0%, 100%) — zero saturation, 100% lightness.

Can I use RGB instead of hex in HTML/CSS?

Yes, absolutely. CSS has supported the rgb() function since CSS1. You can use rgb(255, 0, 0) anywhere you would use #FF0000. Modern CSS also supports rgba() for transparency, hsl() for hue-saturation-lightness, and color() for advanced color spaces. All major browsers support all these formats.