Convert any hex color code to RGB in your browser — 3-digit, 6-digit, and 8-digit alpha hex all supported. Free, instant, no signup, your colors never leave the page.
Tints
Shades
Tones
Harmonies
— — — — — A hex to RGB converter is a small utility that turns a hex color code (`#FF5733`) into the three integer channel values it represents (`rgb(255 87 51)`). Hex and RGB are the two formats every web stylesheet, design tool, and image-pixel pipeline has been built around since the late 1990s, and the conversion between them is the single most common operation in color tooling. Hex is the terse copy-paste format that Figma, Sketch, Photoshop, and every brand-guidelines PDF export by default — a 6-character base-16 string that fits in a CSS custom property comfortably and reads at a glance once your eyes learn the patterns. RGB is the channel-addressed format that hardware APIs, canvas drawing calls, image-buffer manipulation, OpenGL color attributes, and most graphics SDKs expect — three separate 0-255 integers (or 0-1 normalized floats) that map directly to the red, green, and blue subpixels of an LCD or the phosphors of a CRT. Converting between them is mechanical: split the hex into three 2-digit pairs and read each pair as a base-16 number. This tool runs that conversion live as you type, with no "Convert" button to click, and surfaces every other common color format (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, plus the 148 CSS named colors) alongside the RGB output for free.
**The RGB format itself deserves a closer look.** Standard 24-bit sRGB encodes each channel as an 8-bit unsigned integer from 0 to 255 — 256 values per channel, 16,777,216 colors total (256³). The reference standard is IEC 61966-2-1, the 1996 sRGB specification anchored to the CRT phosphor primaries that dominated displays at the time. CSS exposes RGB through the `rgb()` function in three syntactic flavors. The original CSS 1 form uses comma separators: `rgb(255, 87, 51)`. CSS Color 4 (W3C Candidate Recommendation since 2022) added a modern space-separated form: `rgb(255 87 51)`, with an optional alpha channel after a slash: `rgb(255 87 51 / 0.5)`. Both forms are interchangeable and ship in every evergreen browser. RGB also accepts percentage channels: `rgb(100% 33% 20%)` is equivalent to `rgb(255 87 51)`, sometimes preferred in hand-written stylesheets for readability. Alpha specifically has a separate `rgba()` function for legacy support — `rgba(255, 87, 51, 0.5)` is the canonical form that works everywhere down to IE 9. CSS Color 4 also added a `color(srgb 1 0.341 0.2)` syntax for explicit sRGB addressing, and parallel `color(display-p3 ...)` and `color(rec2020 ...)` functions for wide-gamut values that hex can't encode.
The conversion math goes both directions cleanly. **HEX to RGB**: parse the 6-digit hex `#RRGGBB` as three 2-digit base-16 numbers via `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)`. For 3-digit shorthand `#RGB`, expand each digit by duplicating it (`#F73` → `#FF7733`) before parsing — this is *not* a left-pad. For 8-digit alpha `#RRGGBBAA`, parse the trailing pair the same way and divide by 255 to get the 0-1 alpha float. For 4-digit alpha shorthand `#RGBA`, expand each digit first (`#F738` → `#FF773388`). **RGB to HEX** is the inverse: for each channel, call `value.toString(16).padStart(2, '0')` to get the 2-digit hex pair (the `padStart` matters — without it, channel value 5 would serialize as `'5'` instead of `'05'`, producing invalid hex), then concatenate. Both directions are bit-exact in either direction: 16² = 256, exactly matching the 0-255 byte range each channel occupies, so a HEX → RGB → HEX round-trip produces the original input verbatim with no float drift.
**Why hex versus RGB?** Hex is shorter, design-tool-native, and the format your eye learns over time — most front-end developers can identify `#3b82f6` as Tailwind blue-500 at a glance. RGB is explicit-channel-addressing, easier to compute against in JavaScript, and the only of the two that accepts alpha and percentages cleanly. The two formats coexist because they solve different problems. Web stylesheets and brand guidelines lean hex because copy-paste cost dominates. Canvas drawing calls, image processing, hardware-LED APIs, and any code that does per-channel arithmetic lean RGB because indexing into a tuple beats slicing a string. The shift between them happens dozens of times in a typical web project — paste a hex from Figma, convert to RGB integers for a `ctx.fillStyle = ...` call, convert back to hex for a CSS variable definition.
This tool's HEX → RGB workflow is one direction of a 5-spoke family that all share the same underlying unified color converter. The dedicated unified color converter is the hub — it shows all 9 formats simultaneously editable and is the right tool when your workflow needs more than just hex and RGB. The single-direction spokes target specific Google search intents: the reverse RGB to hex converter for the inverse direction, the hex to HSL converter for the legacy designer-cognitive space, the hex to OKLCH converter for modern perceptually-uniform design systems (Tailwind v4 and shadcn both default to OKLCH now), and the hex to CMYK converter for print-prep approximations. All five spokes and the hub share the same parsing engine and the same conversion math, so the results are guaranteed identical across the family. Every conversion runs locally in your browser — your hex codes are never uploaded, never logged, and zero network requests fire as you type. Verify in DevTools.
// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
let h = input.trim().replace(/^#/, '');
// Expand 3-digit and 4-digit shorthand by duplicating each digit
if (h.length === 3 || h.length === 4) {
h = h.split('').map(c => c + c).join('');
}
if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
throw new Error(`Invalid hex: ${input}`);
}
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
return [r, g, b, a];
}
console.log(parseHex('#FF5733')); // [255, 87, 51, 1]
console.log(parseHex('#F73')); // [255, 119, 51, 1]
console.log(parseHex('#FF573380')); // [255, 87, 51, 0.5019607843137255] 3-digit `#F73`, 4-digit alpha `#F738`, 6-digit `#FF5733`, 8-digit alpha `#FF5733CC`, plus the no-`#` variant for each (`F73`, `FF5733`, etc.). The parser normalizes all of them into the same internal RGB tuple before display, so you can paste whichever shape your source uses without manually expanding shorthand first. Capitalization is also normalized — `#ff5733` and `#FF5733` produce identical output.
The RGB field surfaces the value in CSS Color 4's modern form: `rgb(255 87 51)` for opaque colors, `rgb(255 87 51 / 0.5)` for alpha-bearing ones. Both shapes work in every evergreen browser (Chrome 65+, Safari 13+, Firefox 52+). The legacy comma form `rgb(255, 87, 51)` is one mechanical replace away if your target needs it; the modern syntax is preferred in new code because it aligns with CSS Color 4's other functional syntaxes.
HEX → RGB is integer-to-integer math: `parseInt(hex, 16)` returns an exact 0-255 value with zero float involvement. The reverse direction (`.toString(16).padStart(2, '0')`) is equally exact. A round-trip HEX → RGB → HEX → RGB → HEX produces the original input verbatim, indefinitely. The OKLCH internal source-of-truth means even the longer chain HEX → RGB → HSL → OKLAB → HEX stays bit-stable, which legacy converters routing through HSL don't guarantee.
8-digit and 4-digit hex with alpha (`#RRGGBBAA` and `#RGBA`) are parsed correctly. The trailing pair maps to a 0-1 alpha float: `00` → 0, `80` → 0.502, `FF` → 1. The output uses CSS Color 4's slash syntax (`rgb(255 87 51 / 0.5)`) by default; the legacy `rgba(255, 87, 51, 0.5)` form is one replace away. Useful for design-token migration where alpha values may have been buried in 8-digit hex codes.
The same hex you paste also drives HSL, HSV, HWB, OKLCH, OKLAB, CMYK, and the closest CSS named color — all visible at a glance on the same page. You're never locked into hex → RGB only. If a teammate needs the OKLCH triple for a Tailwind v4 token, the closest named color for documentation prose, or the CMYK approximation for a print quote, the values are already there with their own Copy buttons.
Pass a hex through and the contrast row immediately scores it against both white and black using WCAG 2.1 (regulatory floor: 4.5:1 for body text, 7:1 for AAA) and APCA Lc (proposed WCAG 3 successor: target `|Lc| ≥ 75` for body text). Useful when you've just converted a brand hex to RGB and want to verify it's actually readable as a body-text color before shipping it.
Below the picker, the Copy as code section turns the current color into ready-to-paste snippets for five platforms: CSS custom property (`--color-brand: rgb(255 87 51)`), Tailwind v4 `@theme` token, SwiftUI `Color(red:green:blue:)` literal, Jetpack Compose `Color(0xFFFF5733)` constant, Flutter `Color(0xFFFF5733)`. The exact syntax each platform expects, ready to drop into an iOS asset catalog, Android theme file, or Flutter `ThemeData`.
All hex parsing, RGB conversion, contrast scoring, and palette generation runs locally in your browser. Your hex codes are never transmitted, never logged on any server, never analyzed. Zero network requests as you type — verify in DevTools. Safe for unannounced brand palettes, internal design tokens, draft mockups under NDA, and any other confidential color work.
The current color encodes into the URL hash as `#hex=ff5733` automatically on every change. Copy the URL, paste into a Slack thread or a GitHub issue, and anyone who opens it lands on the same hex with the same RGB result. The hash lives only in your address bar and is never transmitted to the server (browsers don't include URL fragments in HTTP requests), so even sharing the link doesn't leak the color to any third party.
The default Google result for "hex to rgb" — a single-direction form with hex in, RGB out, no other formats visible. Useful for one-off lookups when arriving from search. Lacks OKLCH, contrast checking, gamut detection, alpha handling, and the multi-format simultaneous view. This tool wins on every axis except the bare-bones single-conversion case.
Long-running per-color SEO pages with deep metadata: conversions, palettes, harmonies, gradients for any hex you query. UI is dated (early-2010s), no OKLCH support, no APCA contrast, no wide-gamut handling. Strong for SEO discovery of a specific hex via Google; weaker for active conversion workflows where typing into a unified-field UX is faster.
Beginner-friendly HEX/RGB/HSL toggle on a teaching-focused page, ubiquitous in search results. No OKLCH, no alpha handling beyond rgba, no advanced features. Useful as a reference next to W3Schools' explainer content. This tool wins on every other axis: more formats, perceptual math, gamut + contrast + CVD features, modern code export for Tailwind v4 / SwiftUI / Compose / Flutter.
Chrome, Firefox, and Safari DevTools all ship a color picker that converts hex to RGB inline when you click a color swatch in the CSS pane. Free, no install, always available. Lacks OKLCH, lacks shareable URLs, lacks code-export for non-web platforms (SwiftUI, Compose). Reach for DevTools when you're already debugging CSS; reach for this tool when you need cross-platform output.
Bundled with every Mac since OS X — hover over any pixel and read the RGB / hex / linear values. Excellent for sampling pixel colors from any app on screen. Doesn't convert pasted hex values; it's a screen-sampler, not a converter. Use the EyeDropper button in this tool's picker (Chromium browsers only) for the same screen-sampling capability inside the browser.
Per-color SEO pages covering many spaces (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Lacks modern OKLCH support and the unified-field editing UX. Auto-generated content pages feel content-farm-ish but the conversion data is correct. Good for spelunking individual color metadata via Google; this tool is faster for active workflows.
#FF5733
RGB output: `rgb(255 87 51)`. The classic use case — a designer dropped a brand color into Figma, you screenshotted it, an eyedropper gave you the hex, and now you need the channel integers for a canvas drawing call, a hardware LED strip, or pixel-math against an image buffer. The CSS Color 4 space-separated syntax shown is the modern form; the legacy comma form `rgb(255, 87, 51)` is identical in meaning and supported in every browser since IE 3.
#3b82f6
RGB output: `rgb(59 130 246)`. Adobe's Color picker (in Photoshop, Illustrator, and InDesign) accepts RGB integers in the 0-255 range as its native input — paste 59 / 130 / 246 into the three channel boxes and you've matched Tailwind's `blue-500` exactly. Useful when a designer needs to mock up a web color in a print-aware layout app, or when you're sampling brand colors into a swatch library for image edits.
#FF573380
RGB output: `rgb(255 87 51 / 0.5)`. The last pair (`80`) decodes as `128/255 ≈ 0.502`, surfaced as the alpha channel via CSS Color 4's slash syntax. The equivalent legacy form is `rgba(255, 87, 51, 0.5)`, which is still supported everywhere and what older preprocessors expect. 8-digit hex shipped natively in all evergreen browsers in 2018; before that, alpha had to be expressed via the `rgba()` function.
#F73
RGB output: `rgb(255 119 51)`. The CSS spec defines 3-digit hex as a shorthand where each digit is duplicated to form the 6-digit equivalent: `#F73` expands to `#FF7733`, so R = `FF` = 255, G = `77` = 119, B = `33` = 51. This is *not* a left-pad — `#F73` is **not** `#000F73`. Many beginners get this wrong; the tool's expansion behavior makes the rule visible at a glance.
Reference table of the 10 most-converted hex codes and their RGB equivalents — pure primaries, pure secondaries, and two real-world brand colors from the Tailwind palette.
Pure black. All three channels at zero — the absence of emitted light. RGB triple (0, 0, 0).
#000000 → rgb(0 0 0) Pure black on a screen is rarely the right design choice — try `#111` or OKLCH lightness 0.1-0.15 for softer body text.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Pure white. All three channels at their maximum value (255). The brightest color in sRGB.
#FFFFFF → rgb(255 255 255) Pure white backgrounds can produce eye strain in dark environments — consider `#fafafa` or OKLCH 0.98 for warmer alternatives.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Pure red. R channel at maximum, G and B at zero. The first of the three sRGB primaries.
#FF0000 → rgb(255 0 0) Pure red is highly saturated and rarely fits a brand palette — most "red" brand colors sit closer to #DC2626 or #E53935.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Pure green. G channel at maximum, R and B at zero. CSS named color `lime` (not `green`, which is #008000).
#00FF00 → rgb(0 255 0) The CSS keyword `green` resolves to #008000 (half-bright), not #00FF00 — a frequent source of confusion. Use `lime` for pure RGB green.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Pure blue. B channel at maximum, R and G at zero. The third sRGB primary.
#0000FF → rgb(0 0 255) Pure blue on a white background fails WCAG AA contrast (3.7:1) — consider darker brand blues like #1D4ED8 (Tailwind blue-700) for body text.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Cyan — green and blue at maximum, red at zero. One of three sRGB secondaries. CSS named color `cyan` (or equivalently `aqua`).
#00FFFF → rgb(0 255 255) Cyan and aqua are exact synonyms in CSS — both resolve to #00FFFF. Pick one and stay consistent across your stylesheet.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Magenta — red and blue at maximum, green at zero. CSS named color `magenta` (or equivalently `fuchsia`).
#FF00FF → rgb(255 0 255) Magenta and fuchsia are exact synonyms in CSS — both resolve to #FF00FF. Common in test patterns and developer-tool overlays.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Yellow — red and green at maximum, blue at zero. The brightest of the three sRGB secondaries by perceived luminance.
#FFFF00 → rgb(255 255 0) Yellow is the highest-luminance non-white color on screen — yellow text on white backgrounds is nearly invisible, even though hex looks fine on paper.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Tailwind CSS's default blue-500 brand color — the canonical "web blue" of the mid-2020s. Used in countless dashboards, marketing sites, and admin tools.
#3b82f6 → rgb(59 130 246) Tailwind v4 redefines blue-500 in OKLCH (`oklch(0.629 0.193 263.4)`) for perceptually-uniform ramps — the hex stays the same as a fallback.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Tailwind CSS's default rose-500 — a high-saturation pink-red used commonly for accent buttons, alert states, and brand contrast.
#f43f5e → rgb(244 63 94) Rose-500 passes WCAG AA (4.6:1) against white for large text but fails for body text — pair with rose-600 (#e11d48) or darker for body copy on white.
Need OKLCH instead? Try the dedicated hex to OKLCH converter for perceptually-uniform output.
Drop any hex value into the HEX input — with or without the leading `#`, in 3-digit shorthand (`#F73`), 6-digit full form (`#FF5733`), 4-digit alpha shorthand (`#F738`), or 8-digit alpha full form (`#FF5733CC`). The tool normalizes all five input shapes to the same canonical color internally. Capitalization doesn't matter (`#ff5733` and `#FF5733` parse identically). Invalid characters or wrong digit counts produce a quiet inline error; valid hex updates every other format field in real time.
The RGB field below the HEX field shows the matching `rgb()` value in CSS Color 4's modern space-separated syntax: `rgb(255 87 51)` for an opaque color, `rgb(255 87 51 / 0.5)` for an alpha-bearing one. Each channel is a 0-255 integer; alpha is normalized to 0-1. The values are bit-exact — `parseInt('FF', 16)` returns 255, with no float arithmetic involved, so a round-trip back to hex produces the original input verbatim.
Each format card has a Copy button on the right. One click and the value lands on your clipboard — the button label briefly flashes "Copied!" so you know. The copied string is the canonical CSS Color 4 syntax (`rgb(255 87 51)`); if your target needs the legacy comma form, the conversion is mechanical (replace spaces with `, `). For platform-specific output (SwiftUI, Compose, Flutter, Tailwind v4), use the Copy as code section below the picker.
The same hex you paste lights up the other format fields too — HSL for legacy CSS, OKLCH and OKLAB for perceptually-uniform design systems, HSV and HWB for designer color-picker workflows, CMYK for print estimates, and the closest CSS named color for documentation and prose. You're never locked into hex → RGB only; if you also need the OKLCH triple to drop into a Tailwind v4 `@theme` block, it's right there in the OKLCH field with its own Copy button.
Below the format grid is an SL square + hue slider + alpha slider for visual exploration. Drag any control and every text field updates in real time, including the HEX and RGB you started with. On Chromium-based browsers (Chrome, Edge, Brave) the EyeDropper button activates the native `EyeDropper` API for sampling any pixel on screen, including outside the browser window — useful when you want to capture a hex from another app's UI without screenshotting first.
3-digit shorthand `#RGB` expands by *duplicating each digit*, not by left-padding with zeros. `#F73` becomes `#FF7733` (bright orange), not `#000F73` (dark blue). This is the single most-mistaken corner of CSS color syntax; beginners frequently assume the shorthand is some kind of zero-pad and end up with wildly wrong colors. The same rule applies to 4-digit alpha shorthand `#RGBA` — each digit duplicates to form the 8-digit equivalent.
Assume #F73 left-pads to #000F73: expected: dark blue rgb(0, 15, 115) actual: bright orange rgb(255, 119, 51)
3-digit shorthand duplicates each digit: #F73 → #FF7733 → rgb(255, 119, 51) Verified by the tool's live expansion as you type.
Converting RGB back to hex requires each channel's `toString(16)` to be left-padded to 2 digits. Without `padStart(2, '0')`, single-digit channel values produce invalid hex: `rgb(5, 87, 51)` would serialize as `#55733` (5 characters) instead of `#055733` (6 characters). Many ad-hoc converters skip the pad and produce broken output for any channel under 16. The standard idiom is `value.toString(16).padStart(2, '0')` for each of R, G, B.
Skip padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produces invalid 5-character hex. Use padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Valid 6-character hex; works correctly for all channel values 0-255. CSS 8-digit hex is `#RRGGBBAA` — alpha is the *trailing* pair. Some color libraries (notably older Android `Color.parseColor()`) use the opposite ordering `#AARRGGBB` with alpha as the *leading* pair, which is incompatible with CSS hex. A web hex `#FF573380` (orange at 50% alpha) interpreted as `#AARRGGBB` becomes alpha=255, R=87, G=51, B=128 — a dark cyan at full opacity. Always verify the target platform's alpha ordering before round-tripping 8-digit hex.
Paste CSS 8-digit hex into legacy Android Color.parseColor(): #FF573380 interpreted as #AARRGGBB → wrong color and wrong alpha entirely.
Use the target platform's documented format: for Android Compose: Color(0xFFFF5733) with alpha as first byte for CSS: #FF573380 with alpha as last byte Don't cross-paste between the two without re-ordering.
RGB channels are gamma-encoded, not linear. Averaging two RGB values gives a perceptually-wrong midpoint. `(255, 0, 0)` averaged with `(0, 255, 0)` produces `(127, 127, 0)`, a muddy dark olive, not the bright yellow midpoint you'd expect from mixing red and green light. For correct blending, decode to linear-RGB first via the sRGB transfer function (CSS Color 4 §11.2), average in linear space, then re-encode. Or work in OKLAB / OKLCH where perceptual distance is uniform.
Average gamma-encoded RGB directly: (rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0) Looks like dark olive, not bright yellow.
Average in linear-RGB: decode → linear-RGB → average → re-encode → rgb(188, 188, 0) Visibly bright yellow, matching what physical light mixing produces.
Conversion Tools
Convert between binary, hex, decimal, octal and any base (2-36) instantly. Free, private — all processing in your browser.
Conversion Tools
Convert HEX to RGB, HSL, OKLCH, OKLAB and CMYK in your browser — copy any format with one click. Free, no signup, your colors never leave the page.
Conversion Tools
Convert HEX colors to CMYK in your browser. Naive sRGB-based approximation for print previews. Free, no signup, your colors stay local.
Conversion Tools
Convert any hex color to HSL in your browser — 3-digit, 6-digit, 8-digit alpha all supported. Free, instant, no signup, your colors never leave the page.
Conversion Tools
Convert HEX to OKLCH for Tailwind v4 design tokens. Live perceptually-uniform output with Display P3 gamut warnings. Free, browser-only.
Conversion Tools
Compress JPEG, PNG, WebP & AVIF up to 80% smaller — in your browser, no upload. Batch 20 images, resize, compare before & after, download as ZIP. Free & private.