RGB to HEX Converter: Convert Any Color [2026]

Web designers convert colours between RGB and HEX dozens of times a week. A designer hands you an RGB triplet from Figma; a stylesheet uses HEX; a UI library expects HSL; a print spec demands CMYK. Every framework picks its favourite and assumes you’ll convert the rest. Mental math works for greyscale (rgb(255,255,255) = #FFFFFF) but fails for anything in between — converting 91 to 5B in your head is a recipe for typos.

Our RGB to HEX converter handles every direction (RGB ↔ HEX ↔ HSL ↔ HSV ↔ CMYK ↔ OKLCH), preserves alpha channels correctly, and shows a large colour preview alongside every value. Each output also includes the WCAG contrast ratio against pure black and pure white, so you can rule out colours that fail accessibility audits in one glance. This guide covers exactly how the conversion works, why 8-digit HEX matters in modern CSS, and the gotchas that turn a perfect conversion into a wrong one.

Format reference: RGB, HEX, HSL, OKLCH

How the math works

RGB to HEX is a straight base-10 to base-16 conversion of three numbers, padded to 2 digits each:

// rgb(99, 91, 255) → #635BFF
const toHex = (n) => n.toString(16).padStart(2, "0").toUpperCase();
const hex = `#${toHex(99)}${toHex(91)}${toHex(255)}`;
// → "#635BFF"

For 8-digit HEX with alpha, append a fourth pair scaled from 0–1 to 0–255: 0.5 × 255 = 127.5 → rounds to 128 → 0x80. Result: #635BFF80. Note that 8-digit HEX with alpha is widely supported (Chrome 62+, Firefox 49+, Safari 9.1+) — well over 95% of users in 2026 — so you can safely replace rgba(...) with 8-digit HEX in modern stylesheets.

How to convert RGB to HEX in your browser

1. Open the RGB to HEX converter
2. Pick the colour with the visual picker, OR type a value in any format
3. All other formats update in real time below the input
4. Copy any result with one click; the colour preview matches what you’ll get on screen
5. WCAG contrast scores against black and white show inline — useful for accessibility checks

3-digit HEX shorthand and when it works

CSS allows #FFF as shorthand for #FFFFFF, and #F0A for #FF00AA. Each digit duplicates: #ABC means #AABBCC. This works only when each channel pair has identical digits — #635BFF (no duplicate pairs) cannot be expressed in 3-digit form. The shorthand also has a 4-digit alpha variant: #FFF8 means #FFFFFF88 — an alpha of 0x88 (about 53%).

Most minifiers expand 3-digit HEX to 6-digit during build, then the gzipped output ends up similar size. Don’t write code that depends on the format — semantically #FFF and #FFFFFF are identical.

Common gotchas

• HEX is case-insensitive but lowercase is conventional in CSS. #635BFF and #635bff render identically. Modern style guides (Airbnb, Google) lowercase by default; some teams uppercase for visual contrast against text.
• Browser colors object accepts named colours. red → #FF0000, cornflowerblue → #6495ED. Our converter recognises all 147 CSS named colours and shows the matching name where one exists.
• HSL is not perceptually uniform. Two HSL colours with identical L (lightness) can look very different in brightness — yellow at L=50% looks much brighter than blue at L=50%. Use OKLCH if you want perceptually-uniform palettes.
• CMYK conversion is approximate. RGB and CMYK have different gamuts (printers can’t reproduce all RGB colours, and vice versa). Our CMYK output is a naive conversion, not an ICC-profile-based one. For print specs, pick CMYK in Adobe Illustrator with the right profile loaded.
• Alpha precision differs. rgba(255,0,0,0.5) rounds to #FF000080, but 0.5 × 255 = 127.5 rounds up. Round-tripping #FF000080 back gives 0.502. The 1-in-256 quantisation is invisible to the eye.
• OKLCH chroma maxes out around 0.4. Higher values either clamp to the gamut or produce out-of-gamut colours (which browsers display as the closest in-gamut equivalent). Our converter shows when an OKLCH value exceeds the sRGB gamut.

When NOT to use a converter

For programmatic conversion in code, use the language-native API: CSS Color Module 4 in modern browsers (CSS.color()), Color.js or chroma.js for batch conversion, or color npm for Node.js. For design tools (Figma, Sketch, Adobe XD), the built-in colour picker handles every conversion natively. Use this browser tool for one-off conversions, accessibility audits, brand-spec verifications, and learning the relationship between formats.

Frequently asked questions

What’s the difference between RGB and HEX?

Same colour, different notation. RGB writes the three channels as decimal numbers (0–255 each) separated by commas. HEX concatenates the same three channels as 2-digit hexadecimal numbers prefixed with #. rgb(99, 91, 255) and #635BFF are identical to the browser.

Can HEX represent transparency?

Yes — 8-digit HEX includes an alpha channel as the last 2 digits. #635BFF80 is #635BFF at roughly 50% opacity. 8-digit HEX is supported in all modern browsers (Chrome 62+, Firefox 49+, Safari 9.1+) and in CSS Modules 4, so prefer it over rgba() for translucent values.

Why does my converted HEX look slightly off?

Probably alpha quantisation — converting rgba(R,G,B,0.5) to HEX rounds 127.5 to 128 (0x80), and back-conversion gives 0.502. The 1-in-256 step is invisible to the eye. If colours look different by more than a single shade, the issue is gamut conversion (RGB to CMYK or OKLCH out-of-gamut), not arithmetic.

Should I use HEX, RGB, or HSL in my CSS?

HEX for opaque brand colours (most concise). 8-digit HEX or rgba() for translucency. HSL when you want to dynamically adjust lightness with calc() or CSS variables. OKLCH for new design systems where perceptual uniformity matters. All work everywhere — pick what reads best in your codebase.

Is my colour data uploaded?

No. The converter runs in your browser via JavaScript. Colour values you enter never leave your device.

What’s OKLCH and why do designers use it?

OKLCH is a perceptually-uniform colour space (defined in CSS Color Module 4). Lightness, chroma, and hue map to how the eye perceives them — adjust L by 10% and the colour looks 10% lighter regardless of hue. HSL doesn’t have this property: yellow at L=50% looks much brighter than blue at L=50%. OKLCH is supported natively in Chrome 111+, Safari 15.4+, Firefox 113+ — production-safe in 2026.

Related tools and guides

• RGB to HEX Converter
• HEX to RGBA Converter
• Color Shades Generator
• Color Mixer
• All color tools