Convert Hex to RGB
Convert hex colors to RGB/RGBA/HSL with live preview. Supports 3/4/6/8-digit hex with alpha. Batch mode, CSS variable format. Free, offline, client-side.
Convert hex color codes to RGB, RGBA, HSL, or CSS-variable format. Live color preview. Supports 3-, 4-, 6-, and 8-digit hex with optional alpha - the # is optional. Batch mode for multi-color palettes.
How to Use Convert Hex to RGB
- Type or paste hex colors, one per line. Accepts 3-digit (
#f00), 4-digit with alpha (#f00a), 6-digit (#ff0000), and 8-digit (#ff0000aa) forms. Case-insensitive,#optional. - Pick an output format:
rgb()/rgba()auto (uses rgba when alpha is not 255), rgba() always, raw numbers (spreadsheet-friendly), CSS custom property, or all-formats tab-separated. - Check the live color preview - the swatch next to the format selector updates with each keystroke, using the checkerboard background so alpha is visible.
- Press Convert (or Ctrl+Enter / Cmd+Enter). Auto-convert runs 200 ms after your last keystroke.
- Read the breakdown: each valid color shows its swatch, normalized hex, rgb/rgba output, HSLA equivalent, and raw component values.
- Invalid colors are flagged in the error list below with the exact position of the bad character; valid colors still render.
- Copy or Download: Copy places the primary output on your clipboard; Download saves a
.txtfile.
Frequently Asked Questions
Which hex formats does the tool accept?
All four standard forms, with or without a leading #, case-insensitive. 3-digit (#RGB) expands each nibble (#f00 → #ff0000). 4-digit (#RGBA) adds an alpha nibble. 6-digit (#RRGGBB) is standard CSS. 8-digit (#RRGGBBAA) includes a full alpha byte.
How is the RGB conversion calculated?
Each pair of hex digits is a byte (0-255). 0xFF = 255, 0x57 = 87, 0x33 = 51. So #FF5733 splits into R=255, G=87, B=51. For 3-digit shorthand, each nibble is doubled first: #F57 → #FF5577. Alpha bytes follow the same pattern and get divided by 255 to give the 0-1 scale CSS expects.
What’s the difference between the output formats?
rgb()/rgba() auto uses rgb() for opaque colors and rgba() when alpha is less than 1. Raw numbers (255, 87, 51) are handy for spreadsheets or custom CSS. CSS variable (--color: 255 87 51;) matches the modern CSS space-separated syntax used with rgb(var(--color) / 0.5). All formats emits tab-separated columns – drop straight into Excel.
Why does the tool also show HSL?
HSL (Hue-Saturation-Lightness) is often easier to reason about for design work – shifting hue rotates through the color wheel, adjusting lightness makes things paler or darker predictably. Every valid input shows its HSL and HSLA equivalents in the breakdown so you don’t need a separate conversion step.
How does the alpha channel work?
For 4- and 8-digit hex, the alpha nibble/byte represents transparency from 0 (fully transparent) to 255 (fully opaque). The tool divides by 255 to give the 0-1 scale CSS uses. #FF000080 → alpha byte 128 → alpha 0.502 (about 50% transparent red). The preview swatch shows this against a checkerboard so you can see the transparency clearly.
What happens to invalid hex?
Only that line fails. The tool processes each line independently, so a stray character becomes one red entry in the error list (“Line 3: invalid hex character ‘Z’ at position 2”) while every other valid line still converts. You don’t lose your other inputs to a typo.
Can I paste a full color palette at once?
Yes – batch mode is on by default. Paste one color per line; the tool processes each independently. Great for extracting a design system’s palette from a Figma export, converting a Tailwind color list, or batch-processing brand colors for a CSS variable sheet.
Is my color data sent anywhere?
No. All parsing and conversion runs in your browser’s JavaScript engine. No network requests fire during conversion, no server stores or logs your hex values. You can verify with your browser’s Network tab. The tool works offline after the initial page load.
How do I reverse the conversion (RGB to hex)?
Use our “RGB to hex” converter. Or in code: '#' + [r, g, b].map(n => n.toString(16).padStart(2, '0')).join('') in JavaScript. The round trip is lossless for all four hex digit counts.
Why is the CSS variable format useful?
Because modern CSS separates color channels from alpha for cleaner variable reuse. With --brand: 79 70 229; you can write color: rgb(var(--brand)), background: rgb(var(--brand) / 0.1), etc. – one variable powers opaque and semi-transparent uses without duplication. This format gives you exactly that syntax.