Free tool
HEX to RGB Converter for Every Colour Format You Meet
Type a colour in almost any form and see it in all the others at once, each ready to copy. A list of colours converts in one go, which saves time when a style guide arrives as a column of codes.
Convert a list
Reads hex (3, 4, 6 or 8 digits, with or without #), rgb(), hsl(), hwb(), lab(), lch(), oklch(), CSS names like rebeccapurple, three numbers like 124 82 255, and cmyk(51, 68, 0, 0).
CMYK here is the plain formula. A print shop converts with its own colour profile, so printed colours can differ.
Colours are converted in your browser and nothing is uploaded. Your last colour, your list and a few recent colours stay on this device only.
The handover problem this solves
A designer sends colours as HEX. A developer wants RGB for a script, HSL for a theme, or a Swift line for an app. A print contact asks for CMYK. Each one is a small sum, and doing it by hand across a dozen colours is slow and easy to get wrong.
Type the colour in the box at the top, or use the colour picker beside it. The page then shows the same colour in every format together, and a click on any value copies it. The red, green and blue numbers are shown separately in the side column, so you can read each channel without cutting up the string.
What you can type in
| Form | Example |
|---|---|
| HEX, 3, 4, 6 or 8 digits, with or without # | 7c52ff or #f0a |
| rgb(), hsl(), hwb() | rgb(124, 82, 255) |
| lab(), lch(), oklch() | oklch(0.6 0.2 290) |
| CSS colour names | rebeccapurple |
| Three plain numbers | 124 82 255 |
| cmyk() | cmyk(51, 68, 0, 0) |
Anything your browser accepts as a CSS colour works, because the browser itself reads it. If a value is not recognised, the page tells you instead of guessing.
What comes out
Besides HEX and RGB, you get HSL, HSV, HWB, OKLCH and CMYK. There are also red, green and blue values as numbers from 0 to 1, and lines of code for Swift, Android and Flutter. The page shows the closest CSS colour name, contrast against white and against black, tints and shades, and a few matching colours.
The Capital letters in hex switch controls whether HEX codes are written as ff5733 or FF5733. Pick the style your codebase already uses so diffs stay clean.
Eight-digit HEX carries see-through as the last two digits. If your design file has a colour at partial opacity, check that the alpha survives the trip.
Converting a whole list
Open Convert a list, paste one colour per line and choose the format in the As menu. Then press Copy all. This is the quick way to turn a palette from a brand guide into the format your project needs.
- Paste the codes, one on each line.
- Pick the output format.
- Copy all and paste into your stylesheet or tokens file.
If you are working in a Webflow project, the colours then sit well as variables. Our Webflow development page describes how we set up builds.
A note on CMYK and print
The CMYK shown here comes from the plain formula, with no printer profile applied. A print shop converts using its own colour profile, so a printed result can look different from what you see on screen. Use the CMYK figures as a rough starting point and ask the printer for a proof before a large run.
Screen to screen conversions, such as HEX to RGB or HSL, are exact within rounding.
Slips that happen when colours change format
- Dropping the alpha. A six digit code has no see-through. If a design uses a colour at 50 percent, keep the eight digit form or use rgba.
- Rounding drift. Going HEX to HSL and back can move a value by one step. Keep your original HEX as the source of truth in your notes.
- Mixing letter case. ff5733 and FF5733 are the same colour, but a plain text search treats them differently, so choose one style.
- Trusting CMYK on screen. It is a rough figure, as described above.
If a conversion looks wrong, compare the red, green and blue numbers in the side column against the HEX pairs. Those three numbers are the simplest check you have.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs, such as 7c, 52 and ff, and read each pair as a number from 0 to 255. The tool does this as you type and also gives HSL, CMYK and more.
Can I enter a colour without the hash sign?
Yes. Three, four, six and eight digit codes work with or without the leading #.
What does an eight digit HEX code mean?
The first six digits are the colour and the last two are the alpha, which is how see-through the colour is.
Is the CMYK result safe to send to a printer?
Treat it as a guide only. It uses a plain formula, and a print shop applies its own colour profile, so printed colours can differ.
Can I convert many colours together?
Yes. Use Convert a list, paste one colour per line, choose a format and copy the whole result.
What are the Swift, Android and Flutter lines for?
They give you the colour as code for those platforms, so a mobile developer can paste it straight into a project.
More free tools
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- Lighten and darken colour tool: Lighten or darken a colour, build 50 to 950 scales, and copy them as CSS, Tailwind, SCSS or JSON.
- Color contrast checker: Test colours against WCAG 2.2, fix them, check a palette and share a link.
- Random colour generator: Roll random colours by mood, lock favourites and copy HEX, RGB, HSL, CSS or a PNG strip.
- Image colour picker: Pick exact colours from a picture, average noisy pixels and build a palette from the image.