How do I convert HEX to RGB?

Split the six characters into three pairs and convert each from base 16: the first digit times 16 plus the second, with A to F meaning 10 to 15. #1F5F6B becomes 31, 95 and 107, so rgb(31, 95, 107). The converter above does it as you type.

How do I convert RGB to HEX?

Divide each channel by 16: the whole number is the first hex digit and the remainder the second, with 10 to 15 written as A to F. 107 is 6 remainder 11, so 6B. Type the three numbers in the RGB field above to get the code.

How do I convert RGB to CMYK?

Black is 1 minus the brightest of red, green and blue (each from 0 to 1). Cyan, magenta and yellow are (1 minus the channel minus black) divided by (1 minus black). That simple formula gives a starting point; a printer's ICC profile gives the values that actually print.

Why does my printed color not match the screen?

Screens mix light and presses mix ink, and ink cannot reproduce every screen color, especially vivid blues, greens and oranges. The print result also depends on the paper and the press profile. Agree print colors on a printed proof or swatch, not on screen.

What is the difference between HEX and RGB?

None in the color itself: both describe the same red, green and blue values in sRGB. HEX writes them as three base-16 pairs, RGB as three numbers from 0 to 255. CSS accepts both.

What is HSL used for?

HSL describes a color by hue, saturation and lightness, which makes it easy to create tints and shades of one color by changing only the lightness. It is common in CSS and design systems for hover states and backgrounds.

Can I convert a color with transparency?

Yes. Type an 8-digit hex code such as #1F5F6B80, or an rgba() or hsla() value, in the HEX field. The CSS values keep the alpha. CMYK has no transparency, so it shows the solid color.

HEX to RGB Converter: HEX, RGB, HSL and CMYK Both Ways

Converting a color is easy. Choosing the palette is the work.

We design brand identities with a color system that works on screen and in print, with the HEX, RGB and CMYK of every color recorded in your guidelines.

Get a brand identity proposalA fixed-price proposal within one working day

How to convert HEX to RGB

A hex color code is the RGB value written in base 16. The six characters after the # are three pairs: red, green and blue, each from 00 to FF (0 to 255 in decimal). To convert by hand, take each pair and multiply its first digit by 16, then add the second digit, where A to F stand for 10 to 15.

HEX pair	Calculation	Channel
1F	1 × 16 + 15 = 31	Red 31
5F	5 × 16 + 15 = 95	Green 95
6B	6 × 16 + 11 = 107	Blue 107

So #1F5F6B is rgb(31, 95, 107). Going the other way, divide each channel by 16: the whole number is the first hex digit and the remainder the second. A 3-digit code such as #F60 is shorthand for #FF6600, each digit doubled. An 8-digit code adds a fourth pair for transparency (alpha), where FF is fully opaque.

HEX, RGB, HSL and CMYK: which to use

Format	Example	Best for
HEX	`#1F5F6B`	Websites, CSS, design handoff and brand guidelines. Short and easy to copy.
RGB	`rgb(31, 95, 107)`	Screens and software that ask for three numbers, and CSS when you need transparency (`rgb(31 95 107 / 50%)`).
HSL	`hsl(189, 55%, 27%)`	Making variations: change the lightness for a tint or a shade while keeping the same hue. Easy to read and adjust by hand.
CMYK	`71, 11, 0, 58`	Print. Cyan, magenta, yellow and black ink, in percent. Use the values your printer gives you, not a converter's.

HEX, RGB and HSL describe exactly the same set of screen colors, the sRGB color space that CSS uses by default, so converting between them is exact apart from rounding. CMYK is different: it describes ink on paper, which cannot reproduce every screen color, and the result depends on the press, the paper and the ink.

Why the CMYK values here are an approximation

This converter uses the simple formula found in most online tools: black is 1 minus the brightest RGB channel, and cyan, magenta and yellow are what is left of each channel after black. It is a useful starting point and it round-trips cleanly, but it ignores how real inks behave.

A print shop converts colors with an ICC color profile that describes its press and paper, such as GRACoL or SWOP for coated paper in the US and FOGRA39 in Europe. The same RGB color converted with a profile usually comes out with different percentages, often less black and more of the other inks, and a bright screen color can fall outside what the press can print at all. Vivid blues, greens and oranges are the usual victims.

For a brand color that must match in print, choose the print color on paper, from a printed swatch book, and record its CMYK (or a spot ink) next to the HEX in your brand guidelines. Do not let every supplier convert the HEX on their own.

HSL in practice

HSL stands for hue, saturation and lightness. Hue is the position on the color wheel, from 0 to 360 degrees (0 red, 120 green, 240 blue). Saturation is how far the color is from gray, and lightness how far it is from black (0%) or white (100%). Keep the hue and saturation and change only the lightness to build a set of tints and shades for buttons, hover states and backgrounds. Note that HSL lightness is not how bright a color looks: yellow and blue at the same HSL lightness look very different, which is why text contrast has to be checked separately with the color contrast checker.

Methodology and limits

HEX and RGB: Exact base-16 to decimal conversion of each channel. Typed decimals are rounded to the nearest whole number from 0 to 255.
HSL: The CSS Color Module conversion between sRGB and HSL. Displayed values are rounded to whole numbers; the color is always computed from the values you type.
CMYK: K = 1 − max(R, G, B), C = (1 − R − K) ÷ (1 − K), and the same for M and Y, with R, G and B from 0 to 1; reversed with R = 255 × (1 − C) × (1 − K). No ICC profile, ink limit or paper is taken into account.
Contrast: WCAG 2.2 contrast ratio of white and of black text on the color, rounded down to two decimals, as the contrast checker does.
Limits: sRGB only. Wide-gamut colors (Display P3, oklch) are not converted, and alpha is shown in the CSS values but not in CMYK.

Sources

CSS Color Module Level 4, W3C, hex notation, rgb(), hsl() and the HSL conversion
hex-color, MDN Web Docs
Introduction to the ICC profile format, International Color Consortium, on profile-based conversion to print
Contrast ratio, Web Content Accessibility Guidelines (WCAG) 2.2, W3C

Let's make something matter.

We design brand identities with a color system that works on screen and in print, with the HEX, RGB and CMYK of every color recorded in your guidelines. Independent design and marketing studio in Portugal. Senior-led projects, transparent pricing and clearly defined deliverables for international clients.

A reply from a designer within one working day

A fixed-price proposal before any work starts

Senior-led work with clearly defined deliverables

Clients in Portugal, across Europe and further afield

HEX to RGB converter