Hex to RGB Converter with Alpha, Free and Private
Convert hex colour codes to rgb() and rgba() and back in your browser, including #RGBA and #RRGGBBAA, with percentages, HSL, swatch previews and a colour picker. Nothing is uploaded.
0 characters, 0 bytes
0 characters, 0 bytes
About the Hex to RGB Converter
The Hex to RGB Converter turns CSS hex colour codes into rgb() and rgba() values and back. It reads the short and long hex forms, including the alpha forms #RGBA and #RRGGBBAA, and prints each colour as an RGB triple from 0 to 255 or as percentages. Every valid colour is previewed as a swatch with its hex, RGB and HSL text, each ready to copy. Paste one colour per line to convert a whole palette at once. Everything runs in your browser; your colours are never uploaded.
How to use it
Steps
- Type or paste colours, one per line:
#ff8000,#0f0,rgb(255, 128, 0)or a CSS name such asteal. - Choose Convert to: RGB for
rgb()values or Hex for hex codes. - With RGB selected, turn on Percentages to print channels from 0% to 100% instead of 0 to 255.
- Use Pick a colour to choose one with your system's colour picker, or press Swap to feed the output back in and reverse the direction.
- Copy the whole output, or copy a single notation from the swatch list below it.
Privacy
The conversion is plain arithmetic in your browser. Nothing is sent to a server and nothing is stored once you close the tab.
The notations
Hex codes
A hex code writes the red, green and blue channels as two base-16 digits each, from 00 to ff. The three-digit form doubles every digit, so #f80 is #ff8800. CSS Color Module Level 4 adds a fourth channel, alpha, as a fourth digit or a fourth pair: #00ff0080 is green at about half opacity. Upper and lower case mean the same; the output uses lower case. A leading # is optional in the input.
rgb() and rgba()
The legacy syntax separates channels with commas, rgb(255, 128, 0), and uses rgba() with a fourth value from 0 to 1 for alpha. The modern syntax uses spaces and a slash, rgb(255 128 0 / 50%). Channels may be numbers from 0 to 255 or percentages, and alpha a number or a percentage. Both forms are read; the output uses the legacy form, which every browser and design tool accepts.
HSL
Each swatch also shows the colour as hsl(): hue in degrees around the colour wheel, then saturation and lightness as percentages. HSL is handy when you want a lighter or darker shade of the same colour, because only the last number changes.
Rounding
Hex stores each channel and alpha as a whole number from 0 to 255, so percentages and fractional alpha are rounded to the nearest step. That is why 50% alpha becomes 80 in hex and reads back as 0.502. Percentages are printed to one decimal place.
Related tools
To build a full scheme from one colour, use the Color Palette Generator. To read the hex and RGB value of any pixel in a photo, open the Image Color Picker.
Open-source credits
- The parser and formatter are written for this site and follow the hex and
rgb()notations of CSS Color Module Level 4 (W3C). Channel, HSL and keyword handling reuse this site's colour code shared with the Color Palette Generator. - The colour picker is the browser's built-in colour input from the WHATWG HTML standard.
- The tool uses no third-party library.
Frequently asked questions
How do I convert a hex colour to RGB by hand?
Split the six digits into three pairs and read each pair as a base-16 number from 0 to 255. For #ff8000 that is ff = 255, 80 = 128 and 00 = 0, so the colour is rgb(255, 128, 0). A three-digit code such as #f80 doubles each digit first, giving #ff8800.
What do the extra digits in #RRGGBBAA mean?
The last pair is the alpha channel, the opacity, from 00 (fully transparent) to ff (fully opaque). CSS Color Module Level 4 added the 8-digit and 4-digit hex forms, and all current browsers support them. #00ff0080 is green at about 50 percent opacity.
Why does 50% alpha become 0.502 when converted back?
Hex stores alpha as a whole number from 0 to 255, so 50 percent is rounded to 128, which is written 80. Converting 128 back gives 128 / 255 = 0.502. The colour is the same; the small difference comes from the 256 steps hex allows.
Should I use the comma or the space syntax for rgb()?
Both are valid CSS. The modern form rgb(255 128 0 / 50%) uses spaces and a slash before alpha, while the legacy form rgb(255, 128, 0) and rgba() work in every browser and most design tools. This tool reads both and writes the legacy form for the widest compatibility.
Are the colours I paste sent anywhere?
No. Conversion is simple arithmetic done in your browser. Nothing is uploaded and nothing is kept once you close the tab.