Hex to RGB Converter — Convert Hex Color Codes to RGB & HSL

Designers think in hex, developers’ tools speak every dialect at once, and CSS keeps adding new ones — so colour conversion is a small job that comes up constantly. This hex to RGB converter takes any hex colour code and gives you the whole family in one glance: the normalised hex, RGB and RGBA values, HSL, and CSS-ready rgb() and hsl() lines you can copy straight into a stylesheet. It handles the short 3-digit form (#0f8 means #00ff88), the 4- and 8-digit forms with an alpha channel for transparency, and a colour picker if you would rather hunt for the shade visually than type it. The conversion is plain arithmetic — each pair of hex digits is one colour channel from 0 to 255 — done instantly in your browser, with a live swatch so you can see the colour you are actually describing before you ship it.

How hex colours map to RGB

A hex colour is three numbers written in base 16 and glued together. In #0f766e, the pairs are 0f (red = 15), 76 (green = 118) and 6e (blue = 110) — the exact values the RGB line above shows. Each channel runs from 00 (none) to ff (full, 255), which is why an RGB value is just the hex pairs read as ordinary numbers. The 3-digit shorthand doubles each digit, so #f80 becomes #ff8800; the 4- and 8-digit forms add an alpha pair for transparency, converted here to the 0–1 decimal CSS uses (80 hex = 128/255 ≈ 0.5). HSL is the same colour described differently — hue as an angle around the colour wheel, saturation and lightness as percentages — which is why designers find it easier to adjust: keep the hue, nudge the lightness, and you have a hover state.

Which format should you use where?

Hex is the compact default for CSS and design tools, and the format brand guidelines are written in. RGB exists because some contexts need the numbers visible: canvas drawing code, image-processing scripts and anywhere a colour is computed rather than chosen. RGBA earns its place for overlays, shadows and disabled states — anywhere the colour must blend with whatever sits behind it. HSL is the thinking tool: palettes are far easier to build by holding hue steady and stepping lightness in even increments than by guessing at hex values. Practical tip: when a design tool gives you hex with alpha as a separate percentage, the 8-digit hex packs it all into one string, and this converter shows both so nothing gets lost between design and code.

Common colour mistakes this prevents

The classic mix-ups are quiet ones. Reading a hex pair as a decimal number (0f is 15, not “zero f”). Forgetting that 3-digit hex doubles its digits, so #123 is a light-ish #112233, not a very dark colour. Dropping the alpha pair when copying an 8-digit hex, which turns a subtle overlay fully opaque. And assuming a colour that looks right on your screen is specified right — monitors differ, but the numbers do not, which is the whole point of converting instead of eyeballing. If the swatch above does not match what you expected, the input was not the colour you thought it was; trust the swatch and the pairs, and check whether your source used RGB order or the older ARGB arrangement some mobile frameworks prefer.

Frequently asked questions

What does the alpha value in an 8-digit hex mean?

The last pair is transparency: 00 is fully transparent, ff is fully opaque. CSS expresses it as a decimal from 0 to 1, so hex 80 (128) becomes 0.5 — a half-transparent colour.

Can I convert RGB back to hex here?

The normalised HEX line always shows the hex form of the colour you entered, and the picker lets you start from any colour visually. For a dedicated reverse conversion, the RGB to hex converter on this site does the same job in the other direction.

Is #fff the same as #ffffff?

Yes. Short hex doubles each digit: #fff expands to #ffffff (255, 255, 255), pure white. The shorthand only works when each pair would be a doubled digit.

Why does my colour look different on another screen?

Because screens render differently, not because the value changed. The hex and RGB numbers are the specification; two devices displaying the same numbers can still differ slightly in brightness and calibration.

Related tools

Versión en español: Conversor de HEX a RGB — Convierte Colores Hexadecimales a RGB y HSL. You may also like: Base64 Encode Decode — Free Online Base64 Encoder & Decoder · MD5 Hash Generator — Generate MD5 Checksums Online Instantly.


Embed this tool on your website — free

Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top