Skip to content
FileKit
Color And DesignRuns in your browser7 min read

HEX to RGB Converter

This HEX to RGB converter reads any CSS hex colour, in 3, 4, 6 or 8 digit form, and outputs the matching RGB, RGBA, HSL and ready to paste CSS declaration at once. Type or paste a code such as #3b82f6, #06c or #ff5733cc and every format updates immediately, with a live swatch so you can confirm the colour by eye before you use it.

Loading the tool interface
Files never leave your deviceNo upload wait and no queueNo signup, watermark or file limit

HEX and RGB describe the exact same sRGB colour, just written differently. HEX packs red, green and blue into two hexadecimal digits each, which is compact and easy to paste into a stylesheet. RGB spells the same three channels out as decimal numbers from 0 to 255, which is what colour pickers, canvas APIs and most design tools expect as input. Needing both forms in the same afternoon is common, and converting by hand invites arithmetic mistakes that are hard to spot on screen.

Everything happens locally. The hex string is parsed and the maths run in your browser, so nothing about the colour you are working with, or the project it belongs to, ever leaves your machine.

When you need a hex to rgb converter

Designers hand off brand colours as hex codes because that is what shows up in design tools and style guides. Developers frequently need the same colour as RGB or RGBA, because canvas drawing calls, WebGL uniforms, React Native style objects and many charting libraries take numeric channel values rather than hex strings. A hex to rgb converter closes that gap in one step instead of you working out base 16 arithmetic by hand.

It also matters whenever you need partial transparency. Hex alone cannot express an alpha channel unless you use the 4 or 8 digit form, and even then many older tools only accept rgba() syntax. Converting a hex color to rgba gives you the alpha already expressed as a 0 to 1 fraction, ready to drop into a stylesheet or a canvas fillStyle.

  • Pulling a brand hex code into a JavaScript canvas or WebGL project that expects 0 to 255 channel numbers.
  • Adding transparency to a solid colour by switching to rgba() without breaking the exact hue.
  • Checking that a colour picker and a design file actually agree on the same shade.
  • Documenting a palette in more than one format for a style guide or design token file.

Reading 3, 4, 6 and 8 digit HEX correctly

CSS defines four valid hex lengths, and each one expands the same way. A 3 digit code like #0af doubles every digit to produce the 6 digit form, so #0af becomes #00aaff, not #00a0f0 or anything else. A 4 digit code like #0af8 works the same way but the fourth digit is an alpha value, doubled and then divided by 255 to get a 0 to 1 fraction.

The 6 digit form is the one most people write by hand, two hex digits per channel with no alpha. The 8 digit form adds two more digits on the end for alpha, following the same doubling rule as the short forms is not needed because the digits are already paired. Getting this expansion wrong is the single most common source of an incorrect hex to rgb conversion, particularly with the 3 and 4 digit shorthand, so this converter validates the input length before doing anything else and tells you plainly if a code does not match one of the four valid lengths.

Named CSS colours such as rebeccapurple or coral are not hex codes and are not accepted here. Convert them to hex in your browser devtools first, or type the equivalent hex value directly.

RGB, RGBA and the alpha channel

RGB values are integers from 0 to 255 per channel, matching exactly what a hex pair can represent, since 255 is FF in hexadecimal. There is no rounding or precision loss converting between the two, which is one of the few genuinely lossless conversions in colour work. RGBA adds a fourth value, alpha, expressed as a decimal fraction between 0 and 1 rather than 0 to 255, which trips people up when they try to compute it manually from a hex alpha digit pair.

This tool shows both the modern space separated CSS syntax, rgb(59 130 246 / 80%), and the classic comma separated syntax, rgba(59, 130, 246, 0.8), because both are still valid CSS and different codebases and linters prefer different forms. Copy whichever one matches your project's style.

HSL alongside your RGB output

Hue, saturation and lightness describe the same colour on a cylindrical model that is often easier to reason about when you want to darken, lighten or desaturate a colour without shifting its hue. This converter derives HSL from the same RGB values using the standard formula: lightness is the average of the largest and smallest channel, saturation depends on the spread between them relative to that lightness, and hue comes from which channel is largest and by how much.

Having HSL next to RGB means you do not need a second tool when a CSS variable, a Sass function or a design system token calls for hsl() instead of rgb(). All three representations, hex, rgb and hsl, describe one identical sRGB colour, they are just different coordinate systems for the same point in colour space.

How this hex to rgb converter works under the hood

The conversion is pure arithmetic, no image decoding or network calls involved. The hex string is validated against the four accepted lengths, short forms are expanded by digit doubling, then each channel pair is parsed as a base 16 integer with parseInt using radix 16. Alpha, when present, is divided by 255 to produce the 0 to 1 fraction that CSS expects in rgba().

Because this all runs as synchronous JavaScript in your browser, there is no server round trip and no rate limit. You can paste a hex code, read the result, change a single digit and see every output update instantly, which makes this a fast way to sanity check a colour value while you are actively editing a stylesheet.

HEX length compared with what it expands to
HEX formDigitsExampleExpands to
Short3#0af#00aaff
Short with alpha4#0af8#00aaff, alpha 136/255
Full6#3b82f6rgb(59, 130, 246)
Full with alpha8#3b82f6ccrgba(59, 130, 246, 0.8)

How to convert HEX to RGB

  1. 1

    Enter a HEX colour

    Type or paste a hex code in 3, 4, 6 or 8 digit form, with or without the leading #, or pick one from the colour input.

  2. 2

    Check the live swatch

    The swatch fills with the parsed colour immediately, so you can confirm it looks right before copying anything.

  3. 3

    Read the RGB and RGBA values

    Both the space separated and comma separated CSS syntax are shown, along with the matching HSL values.

  4. 4

    Copy the format you need

    Press copy next to RGB, RGBA, HSL or the raw CSS declaration to place it on your clipboard.

Related tools worth bookmarking

Sources and further reading

Frequently asked questions

Common questions about the hex to rgb converter.

Yes. Codes in the form #rrggbbaa are read directly, with the last two digits parsed as an alpha value and divided by 255 to produce the 0 to 1 fraction that rgba() expects. The 4 digit shorthand form, #rgba, is supported as well and expanded the same way CSS itself expands it.

No. Both formats represent the same 0 to 255 integer per channel, hex simply writes that integer in base 16 instead of base 10. There is no rounding, no approximation and no precision lost in either direction, so converting back and forth as many times as you like always returns the exact original value.

CSS defines the 3 digit shorthand as each digit being duplicated, not padded with a zero. #0af expands to #00aaff because the 0 becomes 00, the a becomes aa and the f becomes ff. This keeps the shorthand mathematically equal to a genuine 6 digit colour rather than an approximation of one.

It is a focused version of one. A general purpose css color converter usually tries to handle hex, rgb, hsl and named colours all as input, which adds surface area for mistakes. This tool accepts hex specifically and outputs every other format, which keeps the parsing rules simple and the conversion easy to verify by hand.

Yes. The parser accepts hex input with or without a leading hash character, so 3b82f6 and #3b82f6 both parse identically. Whitespace around the value is trimmed automatically before validation.

The tool checks the input against the four valid lengths, 3, 4, 6 and 8 digits, and against the allowed character set of 0 to 9 and a to f. Anything else produces a clear error message telling you the code is not a valid hex colour, rather than silently guessing at a result.

Not directly, because this converter is scoped to hex input specifically. Most browser developer tools will show you the hex equivalent of any named CSS colour if you hover over it in the styles panel, and you can paste that hex value in here.

Split the six digits into three pairs and read each pair as base 16. The first pair is red, the second is green, the third is blue, and each pair ranges from 00 to ff, which is 0 to 255 in decimal. Doing it by hand is slow and error prone for anything beyond a quick sanity check, which is exactly the gap this hex code to rgb values converter closes.