HEX to RGB Converter
Type or paste a colour in HEX, RGB, HSL or CMYK and the other formats update as you type. Copy ready CSS values, browse lighter and darker shades and check the contrast with text.
Need an interface that looks right and reads well?
We design and build websites and apps with a consistent colour system: brand palette, accessible contrast, design tokens shared by designers and developers. Tell us about your project and get an estimate.
Thank you! We will reply within one business day.
TL;DR: type a colour in any field, for example #2e5cf2, rgb(46, 92, 242), hsl(226, 88%, 56%) or cmyk(81%, 62%, 0%, 5%), and the converter fills in the other formats instantly. Below you get CSS values including OKLCH, lighter and darker shades and a WCAG 2.2 contrast check.
How to convert HEX to RGB
- Enter the colour. Paste a HEX code with or without “#”: 3, 4, 6 or 8 digits are accepted. You can also start from RGB, HSL, CMYK or the colour picker.
- Read the result. All four fields update as you type. Invalid input is highlighted and the other fields keep the last valid colour.
- Copy what you need. Each field and each CSS value has a copy button. The page address changes to include the colour, so you can share the link.
- Check readability. The contrast checker uses the current colour as the background. Set the text colour and see whether the pair passes AA and AAA.
How the conversion works
A HEX code is the same RGB colour written in base 16: each pair of digits is one channel from 00 to FF, that is 0 to 255. #2E5CF2 means red 0x2E = 46, green 0x5C = 92, blue 0xF2 = 242. A short code such as #3AF doubles each digit and becomes #33AAFF. An eighth and seventh digit add the alpha channel: #2E5CF280 is the same blue at 50% opacity.
| Format | Example | Where it is used |
|---|---|---|
| HEX | #2E5CF2 | CSS, Figma, brand guidelines |
| RGB | rgb(46, 92, 242) | CSS, Android and iOS code, image editors |
| HSL | hsl(226, 88%, 56%) | CSS themes: change lightness and keep the hue |
| OKLCH | oklch(54.2% 0.23 265.7) | Modern CSS colour scales with even perceived lightness |
| CMYK | cmyk(81%, 62%, 0%, 5%) | Rough reference for print |
HSL describes the same colour as hue (0–360°), saturation and lightness, which is handy for building lighter and darker versions of a brand colour. OKLCH does the same in a perceptual colour space, so steps of equal lightness look equal to the eye. It is supported in all current browsers.
A note on CMYK
The converter uses the standard device-independent formula: K = 1 − max(R, G, B), then C, M and Y from the remaining channels. Printers work with ICC profiles for specific paper and ink, so their numbers can differ by several percent. Use the CMYK value as a starting point and ask your print shop for the final one.
Contrast and accessibility
WCAG 2.2 requires a contrast ratio of at least 4.5:1 for body text, 3:1 for large text and for interface elements such as icons and input borders. Many brand blues and greens sit right on the edge with white text. To get a full palette from a photo or a logo, use the colour palette generator. If your product needs a consistent colour system, see our web design and development services.
FAQ
How do I convert HEX to RGB?
Split the six-digit code into three pairs and convert each pair from hexadecimal to decimal. For #2E5CF2 that is 2E = 46, 5C = 92 and F2 = 242, so the colour is rgb(46, 92, 242). The converter on this page does it instantly as you type.
How do I convert RGB to HEX?
Convert each channel from 0–255 to a two-digit hexadecimal number and join them after “#”. For rgb(255, 165, 0) that gives FF, A5 and 00, so the HEX code is #FFA500. Type the RGB value into the RGB field and copy the HEX code.
What is a HEX code with 8 digits?
The last two digits are the alpha channel, from 00 (fully transparent) to FF (fully opaque). #2E5CF280 is the colour #2E5CF2 at about 50% opacity. All modern browsers support 8-digit and 4-digit HEX in CSS.
Is HSL better than RGB for CSS?
They describe the same colours. HSL is easier to read and adjust by hand: to make a colour lighter you change only the lightness. For colour scales and themes, OKLCH is even better because equal steps look equal to the eye.
Why are my CMYK values different from the printer’s?
This page uses the standard formula without a colour profile. Print shops convert with ICC profiles for their paper and inks, and some screen colours, especially bright blues and greens, cannot be printed exactly. Treat the CMYK value as a reference.
Can I share a colour with a link?
Yes. When you change the colour, the page address gets the HEX code after “#”, for example /products/hex-to-rgb#2e5cf2. Anyone who opens the link sees the same colour.
How do I check if text on this colour is readable?
Use the contrast checker below the converter. The current colour is set as the background; choose the text colour and see the ratio and whether it passes WCAG AA (4.5:1) and AAA (7:1).