How to Convert HEX to RGB (and Any Colour Format)
Convert a HEX colour code to RGB, HSL, CMYK, OKLCH or code for Swift, Android and Flutter instantly — plus how the conversion works by hand.
3 min read ·
To convert a HEX colour to RGB, open the Color Code Converter and paste the code — for example #3b82f6. Every other format appears instantly: rgb(59, 130, 246), HSL, HSV, HWB, CMYK, LAB, LCH, OKLab, OKLCH, XYZ, the nearest CSS colour name, and ready-to-paste code for CSS, Tailwind, SwiftUI, UIKit, Android, Flutter, .NET, Java and Python. Click any row to copy it.
Convert a colour step by step
- Open the Color Code Converter.
- Paste or type a colour: a HEX code (#39f, #3b82f6, #3b82f6cc), an rgb() or hsl() value, a CSS name like rebeccapurple, a CMYK value, or a decimal number.
- Check the Read as line to confirm how your input was understood.
- Drag the alpha slider if you need a semi-transparent version.
- Click any row to copy that value — or Copy all / JSON for everything.
How HEX to RGB works
A six-digit HEX code is three pairs of hexadecimal (base-16) digits: red, green and blue. Each pair is a number from 00 to FF, which is 0 to 255 in decimal.
For #3b82f6:
| Pair | Hex | Decimal |
|---|---|---|
| Red | 3b | 3 × 16 + 11 = 59 |
| Green | 82 | 8 × 16 + 2 = 130 |
| Blue | f6 | 15 × 16 + 6 = 246 |
So #3b82f6 = rgb(59, 130, 246). Hex digits run 0–9 then a–f for 10–15.
Short HEX like #39f doubles each digit: #3399ff. Eight-digit HEX like #3b82f6cc adds an alpha (transparency) pair at the end: cc = 204, which is 80% opacity.
Which format to use where
- HEX — the default for web design, CSS and most design tools.
- RGB / RGBA — CSS, image editors, and anywhere you need transparency explicitly.
- HSL — CSS when you want to adjust lightness or saturation easily ("same hue, 10% darker").
- OKLCH — modern CSS for perceptually even colour scales and wide-gamut screens.
- CMYK — a starting point for print briefs (see the caveat below).
- Platform code — SwiftUI Color, UIKit UIColor, Android/Kotlin Color, Flutter Color, so developers can paste values directly.
A note on CMYK and print
The CMYK values are a straightforward device conversion, not a colour-managed one. Printers use specific profiles for their machines and paper, so for brand-critical print work, give your print provider the HEX value (or a Pantone reference) and check a printed proof.
Wide-gamut colours
LAB, LCH, OKLab and OKLCH can describe colours that ordinary sRGB screens can't show. If you enter one, the converter clips it into the displayable range and tells you so — useful when a design spec uses colours that won't look the same on every screen.
Don't have the code yet?
- To get the colour code from a photo, logo or screenshot, use the Image Color Picker.
- To pull a whole palette from an image, use the Color Palette Generator.
Common gotchas
- All-digit input: a 3- or 6-character string like 123456 is read as HEX. To enter a decimal number, write dec(255).
- Percentages: rgb(50%, 50%, 50%) is the same as rgb(128, 128, 128).
- Hue units: hsl() accepts deg, rad, grad and turn.
Frequently asked questions
Is anything sent to a server?
No. Conversions happen in your browser as you type.
Is HEX the same as RGB?
Yes — they describe the same colour in different notations. HEX is base-16; RGB lists the three decimal values.
What's the RGB of pure white and black?
White is #ffffff = rgb(255, 255, 255); black is #000000 = rgb(0, 0, 0).