Does it handle alpha (transparency)?

Yes — 8-digit hex like #aabbccdd or rgba(r, g, b, a) both round-trip correctly. The alpha channel maps to the 4th byte (0–255) or the 4th rgba argument (0–1).

What about shorthand 3-digit hex?

Supported. #abc expands to #aabbcc — each hex digit is doubled. Useful for terse code but limited to 4096 colors instead of the full 16M of 6-digit hex.

Uppercase or lowercase hex?

Both inputs work. Output defaults to lowercase (the CSS convention) but can be toggled. CSS treats them identically.

Is my data sent to a server?

No — everything runs entirely in your browser. You can paste internal brand colors with no exposure.

hex ↔ rgb · live · local · 6/8 digit · 3-digit

Convert HEX ↔ RGB in one click

Paste a HEX color or RGB triplet and get the other format instantly. Supports 3, 6 and 8-digit HEX (with alpha). Runs entirely in your browser.

HEX ↔ RGB Converter

Mode

HEX→RGB

direction

HEX

#3b82f6

byte

RGB

59,130,246

0-255

Status

valid

live

input · color

HEX value

Swatch

output · preview

HEX

#3b82f6

RGB

rgb(59, 130, 246)

Quick Start

How to convert HEX and RGB

Pick a direction, paste your value, copy the other format. No server roundtrip.

01
Choose direction
Toggle HEX→RGB or RGB→HEX depending on what you have.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
modeOKLCHCSS Color 4perceptuallive
mode · colorhex→rgb · sRGB
```
HEX → RGB
```
loaded · normalisedOKLCH · ready
02
Paste the value
Accepts #RGB, #RRGGBB, #RRGGBBAA or any r,g,b.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
inputhex · rgb · hslP3gamut-mappedlive
input · optionshex · live
```
#3b82f6
```
options applied · livelive
03
See live preview
The swatch updates instantly so you can sanity-check the color.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
previewWCAG 2.2APCAAA · AAAcontrast
swatch · convertedlive · ready
```
rgb(59, 130, 246)
```
converted · liveWCAG-aware
04
Copy and ship
One click copies the converted value to clipboard.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
copyclipboardCSS varspalette JSONblob
✓ · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to use HEX ↔ RGB

Stylesheets, design tokens, theming, debugging.

CSS rewrites

Convert HEX paste from a designer into RGB for rgba() with alpha. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Design tokens

Normalize to one format across your token system. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Theming

Match brand colors to the format your framework expects. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Debugging

Compare two color values quickly side-by-side. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick math

Avoid mental hex arithmetic when adjusting one channel. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Move colors between Figma, IDE, and stylesheet. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

What HEX formats are supported?

3-digit (#RGB), 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) including alpha.

Does it handle alpha?

Yes — 8-digit HEX includes alpha which is parsed and preserved in the RGBA output.

Why my RGB returns nothing?

RGB→HEX needs three numbers separated by commas or spaces, e.g. 59, 130, 246.

Are color channels rounded?

Yes — HEX uses byte precision so values are rounded to 0-255 integers.

Is anything sent to a server?

No — conversion runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!