Decoding the Colour Codes in Graphic Design

Notice: Undefined index: blockId in /home/p4s17wuhk0tq/public_html/twinbees.ca/wp-content/plugins/table-of-contents-block/table-of-contents-block.php on line 159

Do you know which color codes you should be using when designing print material? What about when designing digital graphics? If you are a beginner, all these colour codes might not make sense.

I’ve been doing graphic designs in my 9 to 5 job for over 12 years. My portfolio ranges from website and social media graphics, to newspaper ads, website graphics, high profile corporate reports, online magazines as well as large format signs and pop up banners!

I’ve learned a lot about colour space over the years. When you are first starting out, it can be confusing to understand why there are so many different colour codes, and… what do they all mean?

Colour Theory

This section might jog your memory a bit when I talk about colour theories. Although I loved science, physics wasn’t my favorite branch, so I won’t bore you with too much details on subtractive colour and additive colour theories.

Here’s the basic you need to know: Subtractive colours, such as CYMK apply to printed material, while additive colours, such as RGB and HEX are made for websites and screen displays. Without going deep into the science let’s refresh our minds quickly on subtractive and additive colour theories.

Subtractive Colour Theory

Besides doing graphic designs, I love to paint. The subtractive colour theory makes way more sense to me since I know how to mix colours and get the colours I want. It’s based on the three primary colours; blue, red and yellow. If you mix red and yellow, you get orange. Blue and red make purple, while blue and yellow make green. If you mix all three, you get black.

Additive Colour Theory

The additive colour theory is a little bit more abstract to me. It’s how light produces colour. And the three additive colours are Red, Green and Blue, hence RGB. In this theory red and green make yellow, blue and green make cyan and blue and red make magenta. If you mix all colours together, you get white. The absence of light makes black.

Color Codes for Print

As far as I know, when working on print documents, the only options for colour is CYMK, also known as process colour).

CYMK (Also Knows As Process Colour)

Process colours otherwize know as CYMK are used for printed materials. When it comes to printers, they use the following ink colours Cyan, Yellow, Magenta, Black, therefore CYMK, which should be familiar if you own a good quality colour printer.

When you are designing things where the end product is to be printed, you need to set your document to work with CYMK. When working with designing software like InDesign, you set the colour space when creating your document. You either select “Print” or “Web” in the Intent options.

If you are using an online program, like Canva, it can be a little tricky since they use HEX colour space. To get your colours exact, let’s say from a logo, you might want to use an online colour converter to change your CYMK code to RGB.

CYMK colours are expressed in percentages of colour.

Here are example of CYMK colour codes:

• The CYMK code for white would be: 0,0,0,0
• The CYMK code for black would be:0,0,0,1
• The CYMK code for grey would be: 0,0,0,50
• The CYMK code for red would be: 0,1,1,0
• The CYMK code for blue would be: 1,1,0,0
• The CYMK code for yellow would be: 0,0,1,0

Color Codes for Screens

RGB

RGB and HEX colour codes are used in on web pages.

If you use graphic software like Photoshop and inDesign. You might be familiar with the acronym RGB, which stands for Red, Green, Blue. Each of these “parameters” in web design are given a value between 0 and 255.

Here are some examples of RGB colour codes:

• The code for white would be: 255, 255, 255
• The code for black would be: 0, 0, 0
• We know that there’s 50 shades of grey right? Depending on what shade you are looking for, the code for grey could be: 128,128,128
• The code for red would be:255,0,0
• The code for blue would be: 0,0,255
• The code for yellow would be: 255,255,0

HEX

HEX is relatively the same as RBG, just expressed differently. It is based on a 6 digit code. In this case the code is preceded with the number sign (#) and six letters or numbers RR, GG, BB.

W3 Schools is my go to website for code, and they go into more details if you are interested: https://www.w3schools.com/css/css_colors_hex.asp

Here is what the HEX code would look like:

• The HEX code for Black: #000000
• The HEX code for White: #FFFFFF
• The HEX code for Grey is: #808080
• The HEX code for Red is: #FF0000
• The HEX code for Blue is: #0000FF
• The HEX code for Yellow is: #0000FF

Converting your codes

Here are two webpages that make converting your codes from RBG to CYMK to HEX ect.

RGB to CMYK Converter
HEX to RGB Converter

Branding Guide Template

Here’s a handy tool I use so I never lose my brand colour codes. It’s a one-pager Canva template. This done for you template can be easily customized with your brand logo, colour codes, typography etc. You must have a free Canva account to use this template!

In Conclusion

Knowing how you’ll use the end product of your design is the first step in assessing what colour space you’ll be using for your design. If it’s print, use CYMK process colours for printers. If you’ll be using your designs for the web, social media or anything displayed on a screen, then RGB or HEX will be appropriate.

Other useful posts from Twin Bees

How to resize your documents
How to cut your cupcake toppers with a cricut.