You can convert a hex code from an image to RGB channels by pasting any CSS hexadecimal color — #RGB, #RGBA, #RRGGBB, or #RRGGBBAA — into the HEX to RGB Converter. Once you paste, you immediately see the normalized lowercase hexadecimal value, the individual red, green, and blue channel bytes as integers from 0 to 255, an optional alpha byte, and a CSS rgb() or rgba() string ready to drop into a stylesheet. If your image color picker, screenshot tool, or design application handed you a code like #1A6FE3 or #1A6FE380, the converter expands short forms, preserves your alpha byte, and shows a live preview right next to the numbers so you can spot a channel-order mistake at a glance. All parsing, formatting, validation, and preview rendering happen locally in the current browser, so the color string never leaves your device. That makes the tool a quick bridge between a hex value you already grabbed from an image and the channel-level inputs an API, canvas operation, or design token actually expects.
Many design tools, screenshot utilities, and browser color pickers show the color they sampled from a pixel as a hex string. That hex is convenient for sharing, but the moment you need to feed the color into a canvas API like fillStyle, an analytics script, a CSS custom property pair, or a code review comment, you typically want the integer red, green, and blue values laid out separately. The converter does exactly that translation, and it does it strictly, so you can trust the numbers it returns.

What the Converter Accepts
The input parser follows the W3C CSS Color Module Level 4 hexadecimal notation rather than every shorthand a design tool might tolerate. A leading hash is required, and the value must be exactly 3, 4, 6, or 8 ASCII hexadecimal digits using the characters 0 through 9 and A through F. Uppercase and lowercase letters mean the same thing. Ordinary whitespace around the complete value is trimmed, but the converter rejects missing hashes, doubled hashes, embedded whitespace inside the digits, and any character outside the hexadecimal alphabet. That strict boundary keeps an invalid CSS token visible instead of silently guessing what you meant.
Three- and six-digit inputs do not specify alpha and are treated as fully opaque for the preview. Four- and eight-digit inputs include transparency. Short notation expands by duplicating each nibble, so #123 means #112233 and #0f08 means #00ff0088. Red comes first, green second, blue third, and alpha last when alpha is present. That last point is important because some eight-digit color conventions outside CSS place opacity first, but the converter never reorders an input based on its apparent visual result — it follows the CSS rule.
| Form | Example | Expands to | Has alpha | CSS output |
|---|---|---|---|---|
| #RGB | #1A6 | #11aa66 | No | rgb(17,170,102) |
| #RGBA | #1A6F | #11aa66ff | Yes (opaque) | rgba(17,170,102,1) |
| #RRGGBB | #1A6FE3 | #1a6fe3 | No | rgb(26,111,227) |
| #RRGGBBAA | #1A6FE380 | #1a6fe380 | Yes (~0.502) | rgba(26,111,227,0.502) |
How to Convert a Hex Code From an Image to RGB
The workflow is the same whether you got the hex from a Photoshop eyedropper, a browser color picker, or a screenshot annotation tool: copy the hex string the picker handed you, paste it into the converter, and read the structured output. The whole cycle is immediate and does not require any sign-up or upload step.
- Copy the hex code from your image color picker, screenshot tool, or design application, making sure the leading hash is included in the selection.
- Open the HEX to RGB Converter and paste the value into the input field.
- Read the normalized lowercase hexadecimal value at the top of the output — this is the expanded six- or eight-digit form the converter uses internally.
- Check the individual channel bytes for red, green, and blue (each shown as an integer from 0 through 255), and the alpha byte when your input included transparency.
- Copy the CSS rgb() or rgba() string for a stylesheet, or the channel bytes if an image processing API expects them as separate numbers.
- Glance at the live preview to confirm the channel order matches what you expect; if the swatch looks wrong, re-check whether the source tool used a non-CSS convention like #AARRGGBB.
- For translucent colors, retain the normalized eight-digit HEX value when sharing an exact round trip, because a rounded decimal alpha can lose a small amount of precision.
Reading the Channel Bytes and CSS Output
Each two-digit component of a normalized hex color is a base-16 integer from 00 through FF, which corresponds to a channel value from 0 through 255. The endpoints are 0 and 255, and every value in between is a single integer — there are no fractions inside the channel itself. When you paste #1A6FE3, the converter reads 1A as red (26), 6F as green (111), and E3 as blue (227), then prints rgb(26,111,227) for the CSS form. Use the integer bytes when an API, canvas operation, image editor, test fixture, or design token expects separate numeric inputs, and use the CSS output for styles that accept rgb() or rgba().
The normalized HEX is always lowercase and is always expanded to the canonical six- or eight-digit form. That means you can paste #abc and read #aabbcc back, or paste #1A6FE380 and read #1a6fe380. The expansion is a pure formatting step, so the underlying color does not change. The MDN hex-color reference documents the same expansion rule, which is why short and long forms of the same color return identical channel bytes.
Alpha Placement and Decimal Rounding
CSS places alpha at the end of an eight-digit hex value, so the order is always #RRGGBBAA. The converter does not treat the first byte as alpha, and it never reorders an input. If a source tool gives you an eight-digit code that looks like #AARRGGBB, the converter still parses the first pair as red, and you should expect a result that looks completely different from what the source tool showed. That is the most common channel-order mistake when a hex comes out of an image or from a code library that does not follow CSS conventions.
Once the alpha byte is parsed, the converter divides it by 255 to produce an opacity from 0 through 1. For readable CSS output, a non-endpoint alpha value is displayed to three decimal places with trailing zeros removed, while the exact alpha byte remains visible alongside it and the percentage is shown to two decimal places. The byte 0x80 is stored as 128 and displayed as approximately 0.502 opacity; 0x00 is exactly 0 and 0xFF is exactly 1. This display rounding does not change the original normalized eight-digit hexadecimal value, so you can still paste it back and get the same byte. When you need exact round-trip precision, share the normalized HEX; when a decimal is fine, share the rgba() output.
What the Tool Does Not Do
The converter is a strict CSS hex parser, not a general color workbench. It does not sample pixels from an image, so you still need a separate color picker to extract a hex from a photo or screenshot — once you have that hex, the converter turns it into RGB. It also does not parse named colors such as rebeccapurple, hsl(), lab(), lch(), color(), system colors, CSS variables, gradients, or comma-separated palettes. There is no conversion between color spaces, no contrast measurement, no accessible-foreground suggestion, and no claim that two colors look identical. Hexadecimal CSS colors represent sRGB channel values; they are not Pantone, CMYK, printer ink recipes, or physical measurements.
If you need a contrast ratio for accessibility, the Color Contrast Checker accepts the same hex inputs and returns WCAG-aligned numbers. If you need a basic process-color estimate for print, the RGB to CMYK Converter translates the channel bytes, while remembering that real print production still needs a managed profile and a proofing workflow. For readers who want a fuller walkthrough of how the channel math works end to end, the channel-bytes and alpha guide expands the same examples with more detail.
Invalid or empty input replaces the prior conversion with a clear error, so a stale successful result is never presented as though it belongs to the current value. If the parser rejects your input, re-check for a missing hash, an extra digit, embedded whitespace, or a non-hex character, then paste the corrected value back in. The preview is generated from the same CSS color string your browser would use, which makes it a useful sanity check for channel order, but it is not a color-management reference — screens, browser profiles, display brightness, ambient light, and wide-gamut workflows can make the same numeric sRGB color appear visibly different.
Related reading: Should You Use Average Color From an Image? A Checklist.