Post-it Note Colors Aren’t Random: A Triadic Color Discovery

I was clicking around a color palette tool last week, not building anything in particular. Just curious. I dropped in a hex code that felt summery, #FFFF9B, that soft Post-it Note yellow. Then I tapped the “Triadic” tab to see what the algorithm would spit out.

Two new colors appeared next to my yellow. A pale cyan, #99FFFF. A soft pink-magenta, #FF99FF.

I stared at them for a second. Yellow. Cyan. Pink. That was a Post-it pack. The exact three colors that sit on every office desk on Earth. The combination I have looked at every working day for all years.

I had never noticed they were a triadic palette before. And the more I looked at the hex codes, the more I felt a little dumb for missing it.

The Hex Codes Themselves Are the Punchline

Look at this for a second:

Color	Hex	What’s happening
Yellow	#FFFF9B	Red full, Green full, Blue dimmed
Cyan	#99FFFF	Red dimmed, Green full, Blue full
Magenta	#FF99FF	Red full, Green dimmed, Blue full

The 9B rotates. One channel takes a step back, the other two stay at full brightness. Three colors, same exact construction, just a different channel sitting out each time.

The pattern isn’t a coincidence. That’s the definition of a triadic palette: three colors equally spaced around the color wheel, 120 degrees apart, holding the same lightness and saturation. In HSL terms, it lines up like this:

• Yellow: H=60°, S=100%, L=80%
• Cyan: H=180°, S=100%, L=80%
• Magenta: H=300°, S=100%, L=80%

60, 180, 300. Three steps of 120. Perfect equilateral triangle on the color wheel.

The thing is, I have known what a triadic palette is since I was a teenager flipping through a graphic design book. I have used color tools for years. I write CSS. I work in SwiftUI with custom color tokens. And yet for some reason my brain had filed “Post-it Notes” under office supply, not under example of triadic color harmony.

That separation is the actual story here.

A Quick Tour of craftery.dev (The Tool That Showed Me)

The discovery was triggered by a tool called Craftery, specifically its color palette generator. You drop in a seed color, pick a scheme (Complementary, Analogous, Triadic, Tetradic, Split), and it gives you the math.

What I liked:

• The output is presented in hex right alongside the swatches, so you see the relationship between the numbers and the colors at the same time. That side-by-side view is what made the pattern click for me.
• It exports straight to CSS Variables, Tailwind config, SwiftUI Color extensions, and Jetpack Compose. For a multi-platform indie developer, that menu alone saves a few minutes per project.
• No login wall. No “sign up to save” friction. You play with colors, you copy what you want, you leave.

Is it the most powerful palette tool out there? No. Coolors and Adobe Color have more features. But Craftery has the right amount of friction for exploration, which is exactly what was happening when I stumbled onto the Post-it thing.

Pro tip: bookmark the URL with the seed and scheme in the query string. Mine was craftery.dev/palette/?seed=ffff9b&scheme=triadic. You can share a palette with one link.

What Triadic Actually Means (Without the Design School Jargon)

If you skipped art class, here is the version that fits on a sticky note.

Imagine a color wheel as a clock face with 12 hours. Red at 12, yellow at 2, green at 4, cyan at 6, blue at 8, magenta at 10. A triadic palette picks three hours that are equally spaced. So 2 o’clock, 6 o’clock, 10 o’clock. Yellow, cyan, magenta. The Post-it trio.

The reason this looks good is biological, not aesthetic. Human eyes have three kinds of cone cells in the retina, each tuned to roughly red, green, and blue. When you pick three colors that are evenly spaced in the perceptual wheel, you are giving each cone type its own dedicated visual lane. No fighting. No crowding. The brain reads them as a balanced set.

That’s why the Post-it pack does not give you eye strain when you have one of each stuck to your monitor. The colors are loud, but they are loud in different directions. They cooperate.

Did 3M Actually Use Color Theory? (The Honest Answer)

I want to be careful here. I have no evidence that 3M’s product designers in 1980 sat down with Itten’s color wheel and consciously plotted a triadic scheme. The original Post-it was just canary yellow, by accident, because that was the only paper scrap the lab had on hand.

The multi-color pack came later. And by then, the question was probably more practical: what colors will look distinct enough to use as visual categories on a cluttered desk? The answer your eye gives you, if you trust your eye, is roughly the triadic answer. Maximum perceptual separation at the same brightness.

So my guess is that the Post-it color pack converged on triadic harmony the way water converges on the lowest point. Nobody had to apply a design philosophy. Someone held up samples in a meeting room until three of them felt right together.

That is the deeper point. Triadic harmony is what your visual system was going to land on anyway. The art-school theory just describes the destination mathematically.

The “Aha” Part: You Are Surrounded by Decisions You Stopped Seeing

Here is what I keep thinking about, days after the palette tool moment.

The Post-it color trio has been in my visual field every working day since I was twenty-two. I have looked at those exact three colors thousands of times. And I never saw them as a triadic palette until a piece of software showed me the same three colors in a different context.

The new context broke the categorization. Suddenly the swatches read as “color codes on a screen” instead of “office supplies”, and the moment they crossed that boundary, the relationship became obvious.

This happens with almost everything well-designed. The reason something feels normal is usually that thousands of decisions were made carefully enough that nothing snags your attention. The trade-off is that you stop seeing the decisions at all. You can drink from a Coca-Cola bottle for forty years without noticing the curve. You can use an iPhone home button for a decade without noticing how the corner radius is calibrated.

For developers, this matters because we make these same kinds of invisible decisions every day. We tune button padding, default font weights, the exact gray of a disabled state. Users will never thank you for getting these right. They only flinch if you get them wrong.

What makes Craftery interesting goes beyond generating palettes. It re-shows you the design that is already running in the background of your life.

How I Am Actually Going to Use This

The practical takeaway, since this is a developer blog and we like takeaways.

I have a SwiftUI app I’m building right now where I needed an accent color set for tagging different note categories. I had been picking colors by gut, ending up with a vaguely random mess. After the Post-it moment, I went into Craftery, picked a seed color that matched my app’s existing primary, hit Triadic, and exported the SwiftUI snippet:

extension Color {
    static let base = Color(red: 1.0, green: 1.0, blue: 0.608)
    static let tri1 = Color(red: 0.6, green: 1.0, blue: 1.0)
    static let tri2 = Color(red: 1.0, green: 0.6, blue: 1.0)
}

Five minutes. Three colors that look like they belong together because mathematically they do. The category tags now read at a glance without any one of them stealing attention.

That’s the whole workflow. Seed → scheme → export → use.

If you want the deeper version, pair triadic with adjusted lightness for hover and pressed states. SwiftUI’s .opacity() modifier handles that without you needing to compute new hex codes. Same for Tailwind, where the /80 or /60 opacity utilities give you the same effect.

Honest Take: Triadic Is Not Always the Right Answer

Before I wrap up, the obligatory caveat.

Triadic palettes are loud. Three highly distinct colors fighting for attention can easily be wrong for the job. If you are designing a banking app, you probably want something calmer, like an analogous palette where the three colors sit next to each other on the wheel. Calmness through similarity.

Triadic works when:

• You need visual categorization (Post-it tags, code syntax highlighting, status badges)
• You have a playful or energetic brand (kids’ apps, party invitations, sports)
• You want a small accent set against a neutral background (one of the three colors, used sparingly)

Triadic does not work when:

• You need a serious or premium feel
• Your content is text-heavy and you want a calm reading experience
• You only get to use one of the three colors at a time (a single color, not a palette)

Pick the scheme based on what the eye is supposed to do with it. Triadic says “distinguish these from each other.” Complementary says “contrast this against that.” Analogous says “feel calm and unified.”

Closing: Look Again at the Things You Stopped Looking At

The Post-it discovery was a small thing, and I’m not pretending I invented anything. The color wheel has not changed since the 1700s and the Post-it color pack has been on shelves my entire adult life.

But I am leaving this experience with a small shift in how I look at familiar objects. Every well-designed thing on my desk is the result of decisions someone made carefully, and most of those decisions are invisible to me until a tool yanks them out of context.

Try this yourself. Open Craftery, drop in the hex code of a color you see every day, and run it through the schemes. The brand color of your favorite app, the wall paint in your room, the cover of a book. See what comes back. Sometimes nothing. Sometimes a tiny moment where the everyday world flips into a math problem with an elegant answer.

That is worth the five minutes.

People Also Ask

What is a triadic color scheme? A triadic color scheme uses three colors that are evenly spaced around the color wheel, 120 degrees apart. The classic example is yellow, cyan, and magenta (or red, blue, and yellow). They create a high-contrast but balanced look because each color claims a distinct region of the visual spectrum.

Why do Post-it Notes come in yellow, pink, and blue? The classic Post-it multi-color pack uses colors that fall close to a triadic harmony on the color wheel. The combination provides maximum visual separation at the same brightness, so each note stands out without overpowering its neighbors. Whether 3M chose them intentionally or by visual trial and error, the result follows triadic color theory.

What’s the difference between triadic and complementary colors? Complementary colors are two colors directly across the color wheel from each other (180 degrees apart), like blue and orange. Triadic uses three colors at 120-degree intervals. Complementary is about contrast; triadic is about balanced variety.

Is craftery.dev free? Yes. As of writing, the color palette generator at craftery.dev is free to use without a login. You enter a seed hex code, pick a harmony scheme, and copy the output in CSS, Tailwind, SwiftUI, or Compose formats.