Tips, theory & best practices from beginner to advanced
This article is an excerpt from my full course about UX/UI Basics on moonlearning.io You can find a preview video here.
Color is one of the main elements in your UI Design. It can shift the first impression of your product from sophisticated cool to crazy and wild. It is not about mixing pretty colors; it’s about creating a system. But let’s start at the very base and work our way up to pro-level:
Colors can be noted down in different ways, and the most common ones you will probably come across are Pantone, CMYK, HEX, and RGB. We only use HEX and RBG in screen design, but it is still essential to understand the difference as you will most likely be dealing with a brand on- and offline.
Pantone → Use for PRINT
It is an exact mix of ink, so it is the same color globally. You cannot print Pantone on your home printer but you can look at an official Pantone color book as a reference. A professional printer would get the specific Pantone for you and add it to their machine for the print. Hence, it is usually more expensive to print Pantone colors which is why it is mainly used for logos or brand elements that need to match across different media, the rest stays is in CMYK
CMYK → Use for PRINT
Mixing the four colors, cyan, magenta, yellow, and key (black), is the base of all other print colors. These are also the four colors found in your home printer and professional printshops.
RGB → Use for UI Design
RGB stands for red, green, and blue. The monitor emits these colors, so they are made of light and not ink. The color spectrum of light is larger than print. Due to their different systems, print and screen colors will never match 100%. That is no problem as long as the palettes are harmonious within themselves. Just be aware of it.
When giving RGB values in UI design, it ranges from 0–255 e.g. R= 255, G =255, B=255 or RBG=255,255,255 is white while RGB= 0, 0, 0 is black.
RGBA → Use for UI Design
Is the same as RGB, the A stands for an additional alpha channel. Alpha regulates the transparency from 0.0 (fully transparent) and 1.0 (fully opaque).
So for example RGBA = 255, 255, 255, 0.5 would be white with 50% transparency.
HEX→ Use for UI Design 👈
Use this one! RGB is perfectly fine, but it is a little tedious to note down so HEX is just a short form of it, and it will always display the exact same color as the RBG counterpart. It is just a little easier to handle, copy, paste and share due to its string format.
Hex consists of 6 digits with a hash in front of it. The first two digits are for R, the second for G, and the third for B. This is why RGB and Hex are identical.
Note: Colors in print and screen design will never be perfectly aligned as they are created in different ways: print by mixing ink, screen by combining light. The important thing is to make each palette harmonious within itself.