It happens all the time … you’ve finally got all the right text and the perfect graphic to go along with that content. The moment to post has come but as soon as you reveal your greatest work online it happens … the colors that were once so serene and picturesque have now become a beacon of distress as the graphic appears utterly wrong.
How could this happen? What went wrong? Everything was fine before you put it online! Well my friend, the sad truth is is that the graphic was fine and perfect when you had it printed on a flyer and even while you were viewing it on your desktop, but when it comes to putting images online not all colors are created equal.
How could the colors be wrong though? They were fine just a moment ago, right? In the world of color there are actual multiple types of color languages, and when it came to that beautiful picture you wanted to use for your post it unfortunately was using the wrong language.
Let’s Break it Down…
More then likely you’ve heard of a color wheel or maybe even a color spectrum. But did you know there are different versions of the famous color wheel for different situations? That’s right, colors just got complicated… especially when it comes to online graphics.
When carefully selecting colors to use for your digital work, or even when preparing your photographs to go online, it’s important to make sure you’re using the correct color language. What are the different languages though and how will you know which one to use? Lucky for you we have the answers for you here! Let’s start with listing out the three main color spectrums you should be aware of:
Ok! We’re off to a good start. So now that we know the names of the different types of color languages it’s time to know which ones can be used where (and how to even know which color mode you’re even working in in Photoshop or other Adobe Software).
This color spectrum is often the trouble maker when it comes to producing wrong colors on digital platforms. The reason for this is because CMYK colors are typically only meant for print purposes and NOT digital. We could go on about why this is, but for now just remember that CMYK is best for print and should never be used for online assets.
This color mode is by far one of the most commonly used and is known for its far more vibrant colors compared to CMYK. Because of its highly saturated colors, RGB is perfect for digital assets whether they are illustrations or photographs. Although you won’t have quite the same color range as CMYK, any color used in the RGB color space will be perfectly safe online and translate smoothly for your digital assets.
A Hex color code is normally used by developers since, as the name implies, it is a literally short code for a specific color. Because of this it is safe for you to assume that this color spectrum is used ONLY for online purposes. Actually, a fun fact about Hex color codes is that they actually use the same color wheel as RGB! Why the different name? The reason for the name change is primarily because of how it is written when used (which in our opinion is much easier and shorter than RGB).
Putting it into Practice
Great! We know the names of the different color languages and where to use them now. What if you’re not sure which color mode you’ve started in though? For example, imagine you’re ready to start editing your photos within Photoshop and get them ready to display online but you want to make sure that the colors all stay true and don’t become over saturated when posting them. How do you check you’re in the right color mode? For Photoshop specifically, what you can do is hover over the menu item “Image” and then navigate your way to the top dropdown menu item called “Mode.” It’s in here where you will see a list of all the color modes and languages available to you in Photoshop! To recap, to ensure all of the colors inside your photograph are web safe you will want to work in the color mode option “RGB Color.”
What about if you’re using Adobe Illustrator for creating digital assets though The process to ensure you’re using the right colors is just as simple! When you open Illustrator and start putting in the dimensions of your artboard(s) there will be a line of text reading “Advanced Options.” When you select this, new options will appear before you including a color mode option!
But wait, what if you’ve already started your project? Does this mean you have to start over?! Absolutely not. Adobe has made a way for you to still check or change your color language for the asset even if you’re already working on it! Simply head to the main menu at the top of the screen, hover over “File” and at the bottom of the dropdown menu you will see an item that reads “Document Color Mode.” As you can imagine this is where you will be able to edit which color spectrum you are utilizing!
For Illustrator there will only ever be two color languages for you to choose from, which are CMYK or RGB. The reason for this is that since Adobe Illustrator works in vectors and not just pixels, Adobe is assuming that you are going to be creating digital assets (or some VERY clean and crisp looking print material)! Vector artwork is LOVED by online platforms since it always creates very neat and precise line work that holds strong online. Adobe Illustrator is not meant to be used for detailed photo editing like Photoshop of course, so your choice in color modes will also be limited for this main reason as well.
A Quick Summary
That’s all there is to it, everyone! To summarize, at the end of the day the best color modes to use for all of your photo editing and illustrative needs for digital assets are RGB or Hex. Using colors in either of these languages will always produce the best possible color options for your images!