Introduction to Color Theory

Color is the first thing anyone notices, on a screen, in a logo, on a printed page. Before you ever think about which colors look good together, there is a quieter and more fundamental question to answer. How do you write a single color down so a screen, a printer, and another person all understand exactly which one you mean? That is what color models are for, and getting comfortable with them is the real starting point of color theory. This post stays on that foundation: the three notations you will meet everywhere, which are RGB, HEX, and CMYK.

Why A Color Needs A Notation

Saying a color out loud almost never works. If you tell ten people to picture "blue", you get ten different blues. A computer has the same problem, except it cannot guess at all. It needs a precise recipe. A color model is that recipe: a small set of numbers that pin down one exact color with no ambiguity. Pick the right model and you can hand the same color to a website, a phone, a poster, and a coffee cup, and every one of them reproduces it faithfully.

Each model is built around how its medium actually creates color. Screens make color with light. Printers make it with ink. Because those two processes are opposites, they need different recipes, and that single fact explains most of what follows.

RGB: Mixing Light On A Screen

Every pixel on your display is three tiny lamps sitting side by side, one red, one green, one blue. RGB describes a color by how brightly each of those three lamps shines, on a scale from 0 to 255. Zero means the lamp is off. 255 means it is at full strength.

This is additive color, because you start in darkness and add light to build toward white. Turn everything off and you get black, written rgb(0, 0, 0). Turn all three to full and the light combines into white, rgb(255, 255, 255). Push only the red lamp and you get pure red, rgb(255, 0, 0). Red and green together with no blue make yellow, rgb(255, 255, 0), which surprises people the first time, because mixing light follows different rules than mixing paint. A soft, friendly brand blue might land at rgb(84, 158, 255): plenty of blue, a healthy amount of green, and a little red to keep it from feeling cold.

Because there are 256 possible levels for each of the three channels, RGB can describe a little over sixteen million colors. That is the full range your screen can show, and it is far more than the eye can comfortably tell apart.

HEX: The Same Color In Base Sixteen

HEX is not a different color system. It is RGB wearing a shorter coat. Instead of three numbers from 0 to 255, a hex code writes those same three values in base sixteen, the counting system that runs 0 through 9 and then A through F, where F stands for fifteen. Each channel becomes exactly two characters, so the whole color fits into six characters behind a single hash.

Read a hex code in pairs and it falls apart cleanly. In #549EFF, the 54 is red, the 9E is green, and the FF is blue. FF is the largest two character value, so it means 255, the same full blue you saw in the RGB version. That is why #549EFF and rgb(84, 158, 255) are the identical color written two ways. The classics are worth memorizing: #FFFFFF is white, #000000 is black, #FF0000 is pure red. Designers and developers lean on hex constantly because it is compact, it copies and pastes without fuss, and it is the native way to name a color in web styling.

CMYK: Mixing Ink On Paper

Print works the other way around. A blank page is already white and reflects all light back at you, so a printer cannot add light. It can only subtract it by laying down ink. CMYK describes a color as four ink amounts, measured in percentages from 0 to 100: Cyan, Magenta, Yellow, and Key, which is the printer's name for black.

This is subtractive color. Each layer of ink absorbs some of the light bouncing off the page and sends less back to your eye. Lay down nothing and the paper stays white, cmyk(0%, 0%, 0%, 0%). In theory cyan, magenta, and yellow together would make black, but in practice they muddy into a tired brown, so a dedicated black ink does that job far more cleanly and cheaply, which is why the K channel exists. Notice what happens to our brand blue on paper: rgb(84, 158, 255) becomes roughly cmyk(67%, 38%, 0%, 0%), a heavy dose of cyan, some magenta, and no yellow at all.

The harder truth is that print simply cannot reproduce every color a screen can. The brightest, most saturated screen blues and greens sit outside the range ink can mix, so they shift to the nearest printable neighbor. That is why a color can glow on your monitor and arrive a little flatter on a flyer. Knowing this in advance saves a lot of disappointment at the print shop.

Now that you have seen all three notations, try moving between them yourself. Pick a color or type a hex code and watch its RGB and CMYK equivalents update together.

Choosing The Right Model

The rule is short. If your work lives on a screen, think in RGB and write it as HEX. If it is going to be printed with ink, think in CMYK and check your colors before you send the file. They are three views of the same idea, and once you can move between them without hesitating, color stops feeling like guesswork and starts feeling like a language you can actually speak.

If you want to keep exploring, our color tool can take any hex, RGB, or CMYK value and show you its full breakdown, including the exact conversions above and a lot more, so you can build the instinct one color at a time.