How to Convert HEX to RGB (and HSL)

Step by step

1. Open the Color ConverterOpen the Color Converter tool. There’s nothing to install and nothing to sign up for — the page loads a small converter that runs directly in your browser.
2. Type a value in any formatEnter a color in whichever format you have — a hex code like #3399ff (or the 3-digit shorthand #39f), an RGB triple like 51, 153, 255, or an HSL value like 210°, 100%, 60%. You only need to fill in one field.
3. Read the other two formats and the previewThe moment you type, the other two fields update to match, and the preview swatch fills with the exact color so you can see what you’re working with. Edit any field and all three stay in sync.
4. Copy the format you needEach format has its own copy button. Grab the hex for a design file, the rgb() for CSS with an alpha channel, or the HSL when you want to nudge the hue or lightness — then paste it wherever you’re working.

What HEX, RGB, and HSL each mean

HEX is the familiar six-character code you see everywhere in web design, like #3399ff. It’s just RGB written in base-16: the first two characters are red, the next two green, the last two blue, each from 00 to ff (0–255). A 3-digit shorthand like #39f is the same color — each digit is simply doubled, so #39f expands to #3399ff.

RGB describes the same color as three channels — red, green, and blue — each from 0 to 255, mirroring how a screen actually mixes light. Its close cousin rgba() adds an alpha channel for transparency, which is why RGB is handy in CSS. HSL takes a different angle: hue (an angle from 0–360° around the color wheel), saturation (how vivid), and lightness (how bright). It maps to how people naturally think about color, which makes it the easiest format for hand-tweaking.

When to reach for each format

Use HEX when you’re copying between design tools, brand guides, and CSS — it’s the shortest and most widely recognized. Use RGB (or rgba) when you need transparency or when you’re thinking in terms of screen channels, since it lines up directly with how displays emit red, green, and blue light.

Reach for HSL when you’re building or refining a palette. Because hue, saturation, and lightness are separate dials, you can hold a color’s hue steady and only lift its lightness to make a hover state, or drop saturation for a muted variant — adjustments that are awkward to eyeball in hex or RGB.

How the conversion works

Under the hood every color is the same trio of red, green, and blue values. Converting HEX to RGB is really just reading each pair of hex characters as a number from 0 to 255; going the other way turns each channel back into two hex characters. Because it’s a direct mapping, HEX and RGB are always exact matches for one another.

HSL is computed from those same RGB channels with a bit of arithmetic that figures out the dominant hue, how far the color sits from gray (saturation), and its overall brightness (lightness). The converter does all of this instantly as you type, so you never have to do the math yourself.

Tips for accurate results

Both 3-digit and 6-digit hex are accepted, and the leading # is optional — #39f, 39f, and #3399ff all work. If a value looks off, double-check that each channel stays in range: 0–255 for RGB, 0–360° for hue, and 0–100% for saturation and lightness.

Keep in mind that HEX and RGB convert back and forth with no loss, but rounding can nudge a value by one when you round-trip through HSL and back — so if you need a pixel-perfect brand color, treat the hex code as the source of truth and copy it directly.

Everything stays on your device

The Color Converter runs entirely in your browser. Nothing you type is uploaded, logged, or sent to a server — the conversion happens locally in JavaScript, so your colors never leave your computer.

That also means it works offline once the page has loaded, and it’s instant: there’s no round-trip to wait on, so every keystroke updates the other formats and the preview swatch immediately.