Color Systems Explained: CMYK, RGB, & HEX

Color matters. Whether you’re designing a fresh logo for your brand or updating text on your website, knowing what colors to use and where is a skill that can result in aesthetically pleasing and high-converting design.

But in the world of design, there are also multiple different color systems, each with their own purpose and limitations.

Whether you’re a designer yourself or are trying to make sense of color codes as you design for your business moving forward, this guide will break down the various color systems and when to use each.

No headaches necessary.


A super common color system, RGB which stands for Red, Green, Blue is a color system that revolves around adjusting three sliders with varying amounts of red, green, and blue in order to find your desired color.

RGB should be used on screens. This is because the color system is revolved around emitting different amounts of red, green, and blue light to display a certain color.

RGB is commonly used in design platforms like Adobe Illustrator, where the primary mode of viewing will be on a computer screen.

In the picture below you’ll see that mixing 218 units of red, 121 of green, and 77 of blue results in the bold orange color shown in the top left.

In RGB this orange would be denoted as : 218, 121, 77



CMYK stands for Cyan, Magenta, Yellow, and Black (K).

CMYK is used for printing. So next time you are looking for business cards, stickers, or t-shirts for your business, make sure you are using this color system.

CMYK is known as a subtractive color system. This means that all colors start out at pure white and that brightness is reduced by each layer of ink. All colors mixed together create pure black.

Printers print with CMYK ink, so regardless of the color system you use, it will be converted to this system when printing. Making sure you convert to CMYK prior to printing will give you a better idea of how the final, printed color will look.

Knowing your CMYK values is helpful when it comes to creating print collateral that matches the colors you see on screen.

In CMYK this orange would be denoted as : 11.33%, 62.26%, 76.6%, 0.8%


HEX, short for hexadecimal, refers to the 6 character, human-friendly color system that is often used when designing online or for web. HEX contains no new or different information than RGB values. It is a simplified version of a red, green, and blue based color system. It is commonly used on websites and for coding.

In HEX, this orange would be denoted as: #da794d

To learn more about the difference between color systems and when to use each check out this awesome 99 Design’s Article here.