Home › Converters › Hex to RGB Converter

Hex to RGB Converter

Use this free hex to RGB converter to change any color between hex, RGB, and HSL. Type a hex code, drag the red, green, and blue sliders, or adjust hue, saturation, and lightness — every field updates together, and the live preview swatch shows the color as you work. Common-color presets are included to get you started.

Common colors

How it works

Every color on a screen is made from three channels of light: red, green, and blue. Each channel can be set from 0 (off) to 255 (fully on), so a color is really just three numbers. Pure red is rgb(255, 0, 0), pure white is rgb(255, 255, 255) with all three channels on, and black is rgb(0, 0, 0) with all three off. Mix the channels and you get all 16.7 million colors a screen can show.

Hex is the same three numbers written in hexadecimal, or base 16. Instead of writing 37, 99, 235, you write each number as two hex digits: 37 becomes 25, 99 becomes 63, and 235 becomes EB, giving #2563EB. Hex digits run 0–9 then A–F, where A is 10 and F is 15, so 63 in hex means 6 × 16 + 3 = 99 in decimal. Web designers love hex because it is short — six characters after the hash — and it pastes straight into CSS.

HSL describes the same color in a way that matches how people think about color. Hue is the position on the color wheel, from 0 to 360 degrees: 0 is red, 120 is green, 240 is blue, and 360 wraps back to red. Saturation is how vivid the color is, from 0 percent (a grey) to 100 percent (fully vivid). Lightness is how bright it is, from 0 percent (black) through 50 percent (the pure color) to 100 percent (white). HSL makes it easy to build a palette: keep the same hue and change lightness for shades and tints.

Converting between the three formats is pure arithmetic. Hex to RGB means splitting the six hex digits into three pairs and converting each pair from base 16 to decimal. RGB to HSL means finding the largest and smallest channel, working out lightness from their average, saturation from how far apart they are, and hue from which channel is largest. RGB to hex is the reverse: convert each channel to two hex digits. This converter does all of it instantly, in any direction — change the hex and the sliders move; move a slider and the hex updates.

The preview swatch matters because numbers alone do not tell you what a color looks like. Two colors can have similar numbers and look very different, and a small change in lightness can turn a readable button into an unreadable one. Always check the swatch against the background the color will sit on, and check text contrast too: light text on a light color, or dark text on a dark color, is hard to read no matter how good the numbers look.

Short hex is a handy shortcut worth knowing. When both digits in each pair are the same, CSS lets you write three digits instead of six: #F00 is the same as #FF0000, #0F0 is #00FF00, and #FFF is white. This converter accepts both forms — type #F00 and it expands to #FF0000 automatically. It also accepts hex with or without the leading hash, and upper or lower case letters.

Worked example

Convert the hex color #2563EB to RGB and HSL.

Step 1: Split the hex into three pairs — 25, 63, EB.
Step 2: Convert each pair from base 16 to decimal — 25 is 2 × 16 + 5 = 37, 63 is 6 × 16 + 3 = 99, and EB is 14 × 16 + 11 = 235.
Step 3: Read the RGB — rgb(37, 99, 235).
Step 4: Work out HSL — the largest channel is blue (235) and the smallest is red (37), giving a lightness of 53%, a saturation of 83%, and a hue of 221 degrees.

The answer is #2563EB = rgb(37, 99, 235) = hsl(221, 83%, 53%). As a check, pure red #FF0000 converts to rgb(255, 0, 0) and hsl(0, 100%, 50%), exactly as expected.

FAQ