How to Convert HEX to RGB: Master Every Color Code Conversion in One Read

1. Three Common Color Formats

Almost every color notation you will meet on the web or in design tools falls into one of three camps. Getting familiar with what each one looks like makes everything that follows easier.

All three are interchangeable: knowing any one of them, you can derive the other two. HEX to RGB is a pure base conversion and the easiest of the bunch; HEX to HSL takes a detour through an intermediate step.

2. How HEX and RGB Convert

The key fact: each pair of HEX digits maps to one RGB channel. Split #FF6B35 into FF, 6B and 35, convert each pair to decimal, and you have your three RGB numbers.

Converting hexadecimal to decimal

Hexadecimal counts in sixteens. On top of digits 0–9 it borrows the letters A–F for the values 10 through 15. The conversion rule: multiply the high digit by 16, then add the low digit. For 6B that is 6 × 16 + 11 = 107. That is all there is to it.

Here is the full walkthrough for #FF6B35:

So #FF6B35 equals rgb(255, 107, 53). The reverse works the same way: to go from RGB to HEX, divide each channel by 16 — the quotient is the high digit, the remainder is the low digit, both written in hexadecimal. 255 ÷ 16 gives quotient 15, remainder 15, which is FF.

One line of code is enough

In JavaScript, let the browser do the parsing instead of writing the math yourself:

// HEX to RGB
const n = parseInt('#FF6B35'.slice(1), 16);
const r = (n >> 16) & 255;   // 255
const g = (n >> 8) & 255;    // 107
const b = n & 255;           // 53

3. Where HSL Comes From

There is no direct base conversion between HSL and HEX, because HSL uses a completely different coordinate system. HEX and RGB answer "how much of each light does the screen emit", while HSL answers "which color is it, how pure, how bright". The three letters mean:

• H (Hue): an angle from 0 to 360 around the color wheel. 0° is red, 120° is green, 240° is blue, and a full turn brings you back to red.
• S (Saturation): a percentage. 100% is the purest version of the hue; lower values drift toward gray, and 0% is pure gray with no hue at all.
• L (Lightness): a percentage. 0% is black, 100% is white, and 50% is the "standard brightness" of that hue.

Our color #FF6B35 becomes hsl(14, 100%, 61%) — an orange-leaning red, fully saturated, medium brightness. Converting from RGB to HSL means finding the max and min of the three channels and applying a formula; it works but is tedious by hand, so just make sure the meaning sticks. The real payoff is practical: to build a hover state for a button, drop L from 50% to 42% and you get a darker shade of the same hue — far more reliable than blindly nudging three RGB numbers.

4. Cheat Sheet of Common Colors

These colors show up constantly in design work. All three notations are side by side, so you can grab whichever format you need.

5. Convert with an Online Tool

Understanding the mechanics is worth it, but doing arithmetic every day is not. The online color converter on our site handles HEX, RGB, and HSL in any direction: type one format and the other two update instantly, no convert button required.

Two more handy tricks: first, click any color value in Chrome DevTools and you can switch its display between HEX, RGB, and HSL on the spot. Second, a browser eyedropper extension lets you pick colors straight off any page. Combined with our screen color picker, the gap between "I like that color" and "I have it in all three formats" is a few seconds.