UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free HEX to RGB converter does
Colour codes come in many notations, and designers, developers and marketers swap between them all day. A brand guide lists a HEX code, a style sheet wants rgb(), a theme uses HSL, a printer asks for CMYK and a mobile app expects Swift or Kotlin code. This free online HEX to RGB converter translates a colour between all of them at once, in both directions.
Type or paste a colour in any format, or edit any field, and every other field updates instantly: HEX, RGB, HSL, HSV, HWB, CMYK, CIE Lab, LCH, OKLab, OKLCH and decimal. A bulk converter handles whole lists, a code tab writes snippets for 20 languages and tools, and a searchable table lists all 148 CSS named colours. Everything runs in your browser.
How to convert HEX to RGB and RGB to HEX
- HEX to RGB: paste the HEX code, with or without the #, into the top box or the HEX field. The RGB fields show the red, green and blue values.
- RGB to HEX: type the three numbers into the R, G and B fields. The HEX field updates as you type.
- Other formats: edit HSL, CMYK, Lab, OKLCH or the decimal field in the same way.
- Copy: press Copy next to the format you need in the ready-to-copy list.
- Many colours: use the Bulk converter tab.
The coloured bars and digit boxes show how the HEX digits map to red, green and blue, which is handy when you are learning or teaching how colour codes work.
How HEX colour codes work
A HEX code is written in base 16 (hexadecimal), which uses the digits 0 to 9 and the letters A to F, where A is 10 and F is 15. Two hex digits can show 256 values, from 00 (0) to FF (255), exactly the range of one colour channel. A six-digit code is therefore the red pair, the green pair and the blue pair in a row.
Manual method: multiply the first digit of the pair by 16 and add the second. For #0369A1: 03 gives 0×16+3 = 3, 69 gives 6×16+9 = 105 and A1 gives 10×16+1 = 161. To go back, divide by 16: 255 gives 15 remainder 15, which is FF; 99 gives 6 remainder 3, which is 63; and 71 gives 4 remainder 7, which is 47, so rgb(255, 99, 71) is #FF6347.
3-digit, 6-digit and 8-digit HEX, and transparency
| Form | Example | Meaning |
|---|---|---|
| 3 digits | #F60 | Shorthand for #FF6600 |
| 4 digits | #F608 | Shorthand for #FF660088 with alpha |
| 6 digits | #FF6600 | Red, green, blue |
| 8 digits | #FF660080 | Red, green, blue and alpha |
| Opacity | Alpha pair | Opacity | Alpha pair |
|---|---|---|---|
| 100% | FF | 50% | 80 |
| 90% | E6 | 40% | 66 |
| 80% | CC | 30% | 4D |
| 70% | B3 | 20% | 33 |
| 60% | 99 | 10% | 1A |
Alpha is the last pair in CSS (#RRGGBBAA), but Android resources put it first (#AARRGGBB). The Bulk converter can output either, so you do not have to remember.
RGB, HSL, HSV, HWB and CMYK compared
RGB mixes red, green and blue light and is how screens work. HSL describes the same colour as a hue angle, a saturation and a lightness, which suits tweaking and theming. HSV or HSB swaps lightness for brightness and is common in design-app colour pickers. HWB describes hue plus how much white and black to add, a simple model that is now part of CSS. CMYK mixes cyan, magenta, yellow and black ink for print.
| HEX | RGB | HSL | Name |
|---|---|---|---|
| #FF0000 | 255, 0, 0 | 0, 100%, 50% | red |
| #00FF00 | 0, 255, 0 | 120, 100%, 50% | lime |
| #0000FF | 0, 0, 255 | 240, 100%, 50% | blue |
| #FFFF00 | 255, 255, 0 | 60, 100%, 50% | yellow |
| #FFA500 | 255, 165, 0 | 39, 100%, 50% | orange |
| #800080 | 128, 0, 128 | 300, 100%, 25% | purple |
| #808080 | 128, 128, 128 | 0, 0%, 50% | gray |
| #0369A1 | 3, 105, 161 | 201, 96%, 32% | steelblue (closest) |
Lab, LCH, OKLab and OKLCH: perceptual colour
RGB numbers are not evenly spaced for human vision: adding 20 to the blue channel looks different from adding 20 to green. CIE Lab and LCH were designed to fix that, with a lightness axis and colour axes that follow how people see. OKLab and OKLCH improve on them, and are now supported in CSS with the oklch() function. They make it easy to build palettes with even steps, adjust lightness without changing hue and blend gradients smoothly. This converter shows all four, using the D50 white point for Lab and LCH as CSS does.
If you type a very vivid value that an ordinary screen cannot show, the tool adjusts it to the nearest sRGB colour and tells you. To explore these values visually, use the Color Picker or build gradients in OKLab with the CSS Gradient Generator.
For developers: bulk conversion and code snippets
Developers rarely convert one colour. The Bulk converter takes a pasted list from a style guide, a spreadsheet or a design file, accepts any mix of formats and converts every line to the one you choose, including Android #AARRGGBB and Flutter or Kotlin 0xAARRGGBB. Invalid lines are flagged and the rest still convert. Download the result as CSV.
The Code snippets tab writes the current colour for CSS, SCSS, custom properties, Swift UIColor and SwiftUI, Android XML, Kotlin Compose, Java, Flutter, Unity, C#, Python, R, GLSL and VBA. Floating-point values are rounded to three decimals, which is accurate to well under one colour step.
Web-safe colours and CSS named colours
CSS defines 148 named colours, from aliceblue to yellowgreen, including both gray and grey spellings and rebeccapurple (#663399). The Named colours tab lists them with HEX and RGB, filters by name, and loads any of them into the converter with one click. The tool also flags web-safe colours, the 216 colours whose channels are multiples of 51, which are rarely needed now but still appear in older guides. To find what a colour is called, use the Color Name Identifier.
Checking and troubleshooting conversions
- Off by one. Rounding is the usual cause. Convert from the original format when you can.
- CMYK looks different in print. The tool does a simple conversion. Printers use profiles and inks.
- HEX has the wrong length. Use 3, 4, 6 or 8 digits. Five or seven digits are not valid.
- Lowercase or uppercase. Both mean the same. Use lowercase for CSS if your style guide says so.
- Alpha in the wrong place. CSS uses #RRGGBBAA, Android uses #AARRGGBB.
- Colour changes in an app. Check the colour profile. Display P3 images can look more vivid than sRGB.
Accuracy, limits and responsible use
All conversions use published formulas and run in your browser. Values are rounded for display, so converting through several formats can drift by one step. The tool assumes sRGB, which is what the web uses by default. It does not manage colour profiles and CMYK is not profile-based, so use professional colour management for print, packaging and brand-critical work. Treat this free online converter as a quick, accurate aid for web, app and design tasks.
Frequently asked questions
How do I convert HEX to RGB?
Split the HEX code into three pairs and convert each pair from base 16 to decimal. For #0369A1, 03 is 3, 69 is 105 and A1 is 161, so the RGB value is rgb(3, 105, 161). The tool does this instantly when you paste the code.
How do I convert RGB to HEX?
Convert each of the red, green and blue numbers to a two-digit base-16 value and join them. For rgb(255, 99, 71), 255 is FF, 99 is 63 and 71 is 47, giving #FF6347. Type the numbers into the RGB fields to see it.
What is a HEX colour code?
A HEX colour code is a six-digit base-16 number, written after a hash sign, that gives the amount of red, green and blue in a screen colour. #000000 is black and #FFFFFF is white.
What is the difference between HEX and RGB?
They describe the same colours. HEX writes the three channel values in base 16 as one code, while RGB writes them as three decimal numbers from 0 to 255.
What does a 3-digit HEX code mean?
It is shorthand where each digit is doubled. #F60 means #FF6600. Only colours whose pairs have matching digits can be shortened.
What is an 8-digit HEX code?
The last two digits are opacity. #0369A180 is the colour #0369A1 at about 50 percent opacity, because 80 in base 16 is 128 out of 255.
How do I convert HEX to HSL?
Paste the HEX code and read the HSL fields. The tool converts to hue in degrees, then saturation and lightness in percent, for example #0369A1 becomes hsl(201, 96%, 32%).
How do I convert HEX to CMYK?
Paste the HEX code and read the CMYK fields. The result is a simple mathematical conversion. Printers use colour profiles, so the printed colour can differ.
Can I convert many colours at once?
Yes. Open the Bulk converter tab, paste one colour per line in any format and choose an output format. You can copy the results or download them as a CSV file.
Which colour formats can I paste?
HEX with 3, 4, 6 or 8 digits, rgb(), rgba(), hsl(), hsla(), hsv(), hwb(), cmyk(), lab(), lch(), oklab(), oklch(), CSS colour names, and plain numbers such as 255, 99, 71.
What is OKLCH and why convert to it?
OKLCH is a modern CSS colour format that describes lightness, chroma and hue in a way that matches human vision. It is useful for building palettes where equal steps look equal.
What is a web-safe colour?
A web-safe colour is one whose red, green and blue values are each 0, 51, 102, 153, 204 or 255. They were useful on 256-colour displays and are rarely needed today.
How do I convert a colour to a decimal number?
Multiply red by 65536, green by 256 and add blue. The tool shows this in the Decimal field. For example #0369A1 is 223649.
How do I use the colour in Swift, Android or Flutter?
Open the Code snippets tab. It lists ready-to-paste code for UIColor, SwiftUI, Android XML, Kotlin, Java, Flutter, Unity, C#, Python, R and more.
Why is my converted value off by one?
Colour values are rounded to whole numbers for display. Converting through HSL or CMYK and back can differ by one step in a channel because of rounding.
Does it work with transparent colours?
Yes. Use the opacity field or an 8-digit HEX or rgba() value. The tool shows rgba(), hsla() and 8-digit HEX results.
Is this HEX to RGB converter free?
Yes. It is free online with no sign-up and no limits, and nothing you enter is sent to a server.
Sources and further reading
- W3C, CSS Color Module Level 4, hex notation, rgb(), hsl(), hwb(), lab(), lch(), oklab() and oklch(), and the named colours.
- MDN Web Docs, <hex-color>.
- Björn Ottosson, A perceptual color space for image processing.
- Bruce Lindbloom, Useful colour equations and conversion matrices.
- Wikipedia, Web colors.
- Android Developers, Color resources.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.