What is the Difference Between Hex, RGB, and CMYK?

When it comes to design and branding, colours play a vital role in creating the right impression. Whether you’re designing a website, printing marketing materials, or creating a logo, choosing the correct colour format is essential. Three common colour models you’ll encounter are Hex, RGB, and CMYK. But what exactly are they, how do they differ, and when should you use each one? Let’s explore!

What is Hex Code?

Hex code (short for hexadecimal code) is a six-digit code used primarily in web design to represent colours. It starts with a hashtag (#) followed by six alphanumeric characters. These characters represent the intensity of red, green, and blue (RGB) in a colour.

Example: #FF5733

• FF represents red.

• 57 represents green.

• 33 represents blue.

Hex codes are favoured by web designers because they are compact and supported by all web browsers. They’re used in HTML, CSS, and design tools to ensure consistent colours across digital platforms.

When to use Hex:

• Website design
• Mobile apps
• Digital graphics and advertisements

What is RGB?

RGB stands for Red, Green, Blue. This colour model is based on light and is used for digital screens, including televisions, computers, and smartphones. RGB colours are expressed in values ranging from 0 to 255 for each colour component.

Example: rgb(255, 87, 51) represents the same colour as #FF5733.

• 255 is the highest intensity of red.

• 87 is the green value.

• 51 is the blue value.

The RGB model is additive. This means that the colours are created by adding light. The more you add, the closer you get to white; the less you add, the closer you get to black.

When to use RGB:

• Digital screens and displays

• Web graphics

• Online advertisements and banners

What is CMYK?

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). This is a subtractive colour model used in the printing process. Unlike RGB, the more colour you add in CMYK, the darker the result.

Colours are measured in percentages, from 0% to 100%.

Example: cmyk(0%, 66%, 80%, 0%) corresponds to the same colour we’ve been discussing.

• 0% Cyan

• 66% Magenta

• 80% Yellow

• 0% Black

Printers use CMYK because they produce colours by combining these four ink colours. Using RGB colours for print can result in discrepancies since screens display colours differently from how printers render them.

When to use CMYK:

• Business cards, flyers, and brochures
• Posters and banners
• Magazines and packaging

How to Convert Hex to RGB and CMYK?

Converting Hex to RGB:

1. Take the hex code: #FF5733.

2. Split it into three pairs: FF, 57, and 33.

3. Convert each pair from hexadecimal to decimal:

   • FF in decimal is 255 (Red)

   • 57 in decimal is 87 (Green)

   • 33 in decimal is 51 (Blue)

4. The RGB value is rgb(255, 87, 51).

Tip: There are many free online tools where you can paste a hex code to get the RGB value instantly. Check out some of these in the “Useful Tools and Resources” section of this blog.

Converting Hex to CMYK:

Converting hex to CMYK can seem tricky, but here’s a step-by-step process that you can easily copy and use:

1. Convert Hex to RGB:

   • Take the hex code (e.g., #FF5733).

   • Split it into three pairs: FF, 57, and 33.

   • Convert each pair from hexadecimal to decimal:

     • FF = 255 (Red)

     • 57 = 87 (Green)

     • 33 = 51 (Blue)

   • Resulting RGB: rgb(255, 87, 51).

2. Convert RGB to CMYK:
   Use the following formulae:

   R = 255 / 255 = 1.0
   G = 87 / 255 ≈ 0.341
   B = 51 / 255 ≈ 0.2
   
   K = 1 - max(R, G, B) = 1 - 1.0 = 0.0
   
   C = (1 - R - K) / (1 - K) = (1 - 1 - 0) / (1 - 0) = 0%
   M = (1 - G - K) / (1 - K) = (1 - 0.341 - 0) / (1 - 0) ≈ 66%
   Y = (1 - B - K) / (1 - K) = (1 - 0.2 - 0) / (1 - 0) ≈ 80%

   Final CMYK value: cmyk(0%, 66%, 80%, 0%)

Tip: Use online converters (like convertAcolor or ColorHexa) to speed up the process and avoid manual calculation errors.