CSS hex notation is the shorthand designers and developers use to package red, green, blue, and optional alpha into one compact string beginning with #, and converting it to RGB means unpacking each two-digit byte into an integer from 0 to 255. A valid CSS token is exactly 3, 4, 6, or 8 hexadecimal digits after the hash; for example, #1A2B3C unpacks to red 26, green 43, and blue 60, while #1A2B3C7F appends an alpha byte of 127. Three- and four-digit short forms work by duplicating each nibble, so #F80 means #FF8800 and #0F08 means #00FF0088. This strict CSS rule is the rule that the HEX to RGB Converter follows, and it is also the rule that palette codes published in design systems and style guides usually obey. Once you know the format, a hex palette becomes a list of RGB triplets that can be handed to a canvas call, a design token file, a test fixture, or any API that takes integer channels.
CSS Hex Formats the Converter Accepts
The CSS Color Module Level 4 defines four hexadecimal shapes that a converter targeting web palettes needs to recognize. The accepted syntax requires a leading hash and a strict count of digits drawn from 0 through 9 and A through F. Uppercase and lowercase letters are equivalent, embedded whitespace is rejected, and doubled hashes are rejected so that an invalid token never silently turns into a guessed color. The four shapes, what each one expands to, and how the alpha byte behaves are summarized in the table below.
| Format | Example | Digits | Alpha behavior | Channel bytes (R, G, B, A) |
|---|---|---|---|---|
| #RGB | #F80 | 3 | Implicitly opaque | 255, 136, 0, 255 |
| #RGBA | #0F08 | 4 | Explicit | 0, 255, 0, 136 |
| #RRGGBB | #1A2B3C | 6 | Implicitly opaque | 26, 43, 60, 255 |
| #RRGGBBAA | #1A2B3C7F | 8 | Explicit (CSS alpha-last) | 26, 43, 60, 127 |
The #RGB row shows that a three-digit input expands by duplicating each nibble, which is the same rule the CSS shorthand defines. Three- and six-digit inputs are treated as fully opaque for the preview because no alpha byte was supplied; the resulting alpha in the table is shown as 255 only to make the byte column uniform across rows, not because the input declared it. Four- and eight-digit inputs include a real alpha byte and are the only rows where the preview transparency comes from the source value itself.
Turn a Hex Palette Into RGB Channel Values
The workflow below takes a list of palette ideas expressed as hex codes and turns each one into the channel bytes you can drop into code or a design file. Everything runs locally in the browser, so the colors never leave the page.
- Paste a CSS hex color beginning with # into the input field. Use 3, 4, 6, or 8 digits after the hash and avoid embedded whitespace.
- Read the normalized hexadecimal value, the CSS rgb() or rgba() string, and the individual channel bytes shown next to the preview.
- For translucent colors, copy the alpha byte or the normalized eight-digit HEX so the rounded rgba() decimal does not introduce small precision drift.
- Repeat for each color in the palette and assemble the channel values into the format your target system expects.
How Short Hex Expands Into Bytes
Short hex notation saves keystrokes by letting each nibble stand in for a full byte, but the bytes still have to be present before a channel value is meaningful. The expansion rule is simple: duplicate every digit. The shorthand #F80 becomes #FF8800 because F is duplicated to FF, 8 to 88, and 0 to 00, giving red 255, green 136, and blue 0. The same rule applies to alpha in four-digit inputs: #0F08 becomes #00FF0088, which unpacks to red 0, green 255, blue 0, and alpha 136.
Once the value is in six- or eight-digit form, each pair of hex digits is a base-16 number that maps directly to an integer from 0 to 255. The pair "FF" is 15 × 16 + 15 = 255, and the pair "00" is 0. There is no division, no scaling, and no rounding involved at this stage. The expansion is mechanical, and the same rule is documented in the hex to RGB channel math walkthrough for designers who want to verify the math by hand.
The digit pair "FF" appears at both ends of the channel range: 00 for no contribution, FF for full contribution. This is why the endpoints of the CSS rgb() range are always written as 0 and 255 rather than as percentages in code that consumes integers. Any palette generator, design system, or canvas call that needs separate channels can rely on this 0–255 mapping without additional conversion.
Where Alpha Lives in an Eight-Digit Hex
CSS places alpha at the end of the hex string, which is why the canonical eight-digit form is written #RRGGBBAA. Some conventions used outside the web, notably older Android color resources, place alpha first as #AARRGGBB. A converter that targets CSS will not reorder the bytes based on visual appearance, and it should never interpret an #AARRGGBB string as if it were #RRGGBBAA, because the two tokens describe entirely different colors. The HEX to RGB Converter parses strictly as CSS, which means the final byte of an eight-digit input is always the alpha.
Alpha itself is stored as an integer byte from 0 to 255, and CSS displays it as a decimal opacity from 0 to 1. The conversion is a single division: byte ÷ 255. For the value 136 used earlier, 136 ÷ 255 = 0.53333…, which the converter shows as approximately 0.533 in the rgba() string. The original byte (136) and the normalized HEX (#0F08, expanded to #00FF0088) are still visible alongside the rounded decimal, so an exact round-trip back to the source is always possible without losing precision.
This is the reason the panel keeps the exact byte visible even when the displayed decimal is rounded: a rounded opacity such as 0.502 cannot be multiplied back to a clean integer byte (128 ÷ 255 = 0.5019607…), and rounding to three decimals still leaves a small residual that a strict round-trip would not recover. Keeping the eight-digit HEX or the alpha byte is the safe choice whenever a downstream system stores the color as an integer.
Read the Result: Normalized HEX, Bytes, or CSS Output
The converter exposes three outputs for the same input, and choosing between them depends on where the value will be consumed. The normalized hexadecimal is the safest choice for round trips: it preserves the byte-for-byte information of the source value, including alpha. The CSS rgb() or rgba() string is the right choice for stylesheets and inline styles that accept functional notation. The individual channel bytes, exposed as integers, are what an API call, a canvas operation, a test fixture, or a design token needs when each component must be set independently.
Palette ideas published as hex codes rarely need more than one of these representations at a time. A web designer copying colors into CSS only needs the rgba() string. A graphics programmer feeding colors into a canvas call only needs the four integers. A design tokens file that stores colors as hex strings only needs the normalized eight-digit form. Reading the wrong output into the wrong place is a common source of subtle bugs, especially when alpha is involved, so the table below summarizes the typical use cases without trying to enumerate every possible downstream system.
| Output | Best used for | What it preserves |
|---|---|---|
| Normalized HEX (six or eight digits) | Round-trip storage, design tokens, configuration files | Exact bytes, including alpha |
| CSS rgb() or rgba() | Stylesheets, inline styles, CSS variables | Human-readable CSS, decimal alpha to three places |
| Individual channel bytes | Canvas calls, image editors, test fixtures, API payloads | Independent integer values from 0 to 255 |
The percentages shown in the result panel are derived from the alpha byte and follow the same byte-to-decimal mapping, displayed to two decimal places. They are useful as a quick visual sanity check rather than as a precise intermediate value, which is why the converter always keeps the underlying byte within reach.
Where Palette Ideas Come From and What to Convert
Hex-based palette ideas travel through design communities as published swatch lists: a brand mood board, a style guide, an open-source design system, or a screenshot of a favorite site. Each palette usually arrives as a flat list of six-digit codes such as #111827, #374151, #9CA3AF, and #F9FAFB. Once the codes are in hand, the conversion step is mechanical: paste each one into the converter, read the channel bytes, and feed them to whatever target needs integers or rgba() syntax.
A few practical habits keep the conversion clean. Copy the complete CSS token including the hash, because a missing leading character is the most common reason a strict parser rejects an otherwise valid value. Confirm the expected digit count matches the form you intended, because a three-digit shorthand silently expands to a six-digit color that may not be the one you remembered. When transparency is part of the palette, verify that the source actually uses CSS alpha-last ordering rather than the older #AARRGGBB convention used in some Android color resources. If a code is empty or invalid, the converter clears the previous result and shows a clear error, so a stale successful conversion is never displayed against the current input.
The preview swatch rendered next to the result is useful as a quick sanity check for channel order, but it is not a color-management reference. The same numeric sRGB value can appear differently on different screens, brightness levels, ambient lighting, and wide-gamut profiles, so the preview is there to catch an obvious mistake rather than to certify perceptual identity. For accessibility work, a separate contrast check against the intended background is the right next step, and for print, a process-color estimate should not be treated as a substitute for a managed profile and a proofing workflow.
Related reading: RGB to CMYK on Windows: Quick Browser Method.