Use The Right Colour Space For Your Graphics

Having trouble getting your graphics to look their best? It could be that you’re using the wrong colour spaces — you know RGB, CMYK, Indexed colour, and so on. Have you heard of these? Not sure how these work? Then you’re in the right spot! Here, you’ll get a breakdown of the four primary colour spaces and when to use each. They’re easy to understand, you just need to know a few key concepts. Let’s take a look!

Show Notes

Here are some additional links and resources mentioned in today’s tutorial. Enjoy!

Transcription:

One of the tougher aspects in the world of graphics is understanding colour spaces — how they work and when you should use one versus another. What we’ll do here in this video is breakdown the four primary color spaces: RGB, CMYK, Indexed colour and Grayscale. They’re easy to understand. You just need to know a few key concepts for each.

Let’s start things off with a look at the RGB colour space.

Have you heard of the RGB colour space before? It stands for Red, Green, and Blue. This is called an additive colour space, so Red, Green, and Blue are going to be added together to create millions and millions of colours.

Learn how to build your small business website!

Give this a try: If you have Photoshop installed on your computer, go ahead and launch it and then open up his Color panel (found under the Window menu). Then from the colour panel menu, choose RGB Sliders. Inside the colour panel, you’ll find three sliders, one for Red, one for Green, and one for Blue.

How it works is, each slider is goes on a scale from zero to 255, for a total of 256 steps for each color. Here’s exactly how this was described to me years and years ago when I was first learning Photoshop and first trying to wrap my head around color spaces…

Imagine three spotlights, one for each of these colours — there’s a Red spotlight, a Green spotlight, and a Blue spotlight. If you turn all the spotlights off, setting each slider to zero, then what you’re going to get is pure darkness, pure black. But if we turn the Red spotlight on and we crank his intensity all the way up to a maximum of 255, what we’re going to get is of course pure red. If we then turn on the Blue spotlight and crank his intensity all the way up to his maximum of 255, now we get a mixture of red and blue — we get Magenta. And then if we crank up the Green slider or the Green spotlight all the way up, if we crank him up to his maximum intensity of 255, we’re going to get pure white. That’s how the RGB colour space works

I should mention here too that RGB is used in web design. It’s used in broadcasting. It’s used in any kind of onscreen display or onscreen graphics. This is because computer monitors and displays, smartphone displays, tablet displays and so on, all use RGB to display colour

So that’s the RGB colour space. It creates colour using light.

Let’s now take a look at his cousin, his partner in crime, CMYK.

CMYK stands for Cyan, Magenta, Yellow, and the K stands for Black. How I think of the CMYK like a traditional painter mixing pigments on his pallet. CMYK is a subtractive color space.

If you’re following along in Photoshop, inside the Color panel, switch the Color panel to CMYK sliders via the panel menu. Now what you’ll get is four sliders, Cyan, Magenta, Yellow, and Black.

How it works in the CMYK colour space is each of these sliders ranges from 0% to 100%. If we move the Cyan slider all the way to the right to a maximum of 100%, we of course are going to get pure 100% cyan. If we drag the Yellow slider all the way to the right to a maximum of 100%, we’re going to get a mixture of 100% Cyan and 100% Yellow. And if you remember from grade school, yellow and blue makes green.

This is why I immediately think of a traditional artist mixing paint pigments together.

CMYK is used in traditional print design and traditional offset printing. The CMYK colour space is not used in web design.

Now what’s interesting here is I come from a traditional art background in a traditional print design background, so my brain thinks in CMYK, even when I’m building websites and setting up images to use online. So what I wind up doing is working on RGB images, but I use CMYK sliders. So the image is inside the RGB colour space, but I’m interacting with it using CMYK sliders. So the interface is using CMYK, but the image is in the RGB color space. It just makes sense for me to work this way.

So that’s how the CMYK colour space works. Now, we’ve got two more colour spaces left. They’re a little bit more specialized. Let’s go and take a look at them…

Next, Indexed colour. Have you heard of the Index colour space before? Indexed colour is a pallet of 256 colours. So images that are in the Indexed colour space can only have a maximum of 256 colours. While that may seem like a lot, that’s actually not that many colours all.

Now how this works is that colours in the Indexed colour space are stored and indexed in what’s called a colour lookup table, hence the name Indexed. If you want to navigate over to Wikipedia — and I’ll leave a link for you in the show notes — take a look at the table over on the right hand side — that’s a colour lookup table. It’s like a legend on a map. It almost looks like a paint by numbers, doesn’t it?

The two graphic file formats that I want to mention that are used in web design that use the Index colour space are GIF and PNG. So GIF and PNG files are both making use of the Indexed colour space.

If you’d like to know more about GIF, PNG, and some other graphic file formats that you can use in web design, check the show notes. I will be publishing lots of content on those subjects, so I’ll add some links for you in the show notes as those lessons get published.

Alright, we’ve got one more colour space to go, Grayscale. Let’s go and check it out.

Last but not least, we ahve the Grayscale colour space. This colour space is simply made up of shades of gray — so solid black, solid white, and shades of gray. So in Photoshop, back in the Color palette, you can set it to a Grayscale slider (via the palette menu), and now you just get a single slider that ranges from 0% or pure white all the way to 100% or pure black.

So every pixel in a Grayscale image has a brightness value ranging from pure white to pure black. That’s how it works.

Now, while it’s great to have Grayscale as a colour space, truthfully you’ll rarely use it. Instead, what I do if I want to have a black and white or a Grayscale image is I use some non-destructive techniques and methods in Photoshop to create a Grayscale effect on a full-colour image. This way, I can always dial back to the original full-colour image if I want to.

Anyway, that really wraps up our look at the four most common colour spaces in graphics.

I hope you enjoyed — I hope you now know and understand a little bit more about colour spaces. Now you know a little bit about RGB, CMYK, Indexed colour, and the Grayscale colour space…and when you may want to use each.

The two important ones are RGB and CMYK. It’s important to understand the difference between these two — one’s used in web design, the other’s used in print design. One’s used for anything that’s displayed on a screen, the other’s used in anything that’s printed on a page. That’s the gist.

Now there are other colour spaces in addition to these, but they get much more specialized. There’s one called Lab. There’s another called Duotone. There are a few others too, but we’ve nailed the important ones here.

Hope you enjoyed. See ya next time!

Hey, I’m Geoff. I love helping business owners, creators, and self-marketers just like you learn more about building, launching, and running websites. This stuff ain't rocket science, but it's often made way more complex (and dull!) than it needs to be. Online business is supposed to be fun and profitable...not as dreadful as a double root canal!

If this content is helpful to you, please consider supporting us! Thanks!

Get my free course, which gives you all the fundamental building blocks you'll need to get your website up and running in an easy, step-by-step format. Or, check out some full courses to take your skills even further. Either way, you're on the right track here, so let's keep going!