Building a Brand Palette That Works in One Color and at Small Sizes

A brand palette usually gets judged in the best possible conditions: full size, full color, on a bright screen, everything sitting exactly where a designer placed it. Real use is rarer and rougher — a favicon at sixteen pixels, a stamp pressed in one ink, a black-and-white printout, a photocopy. A palette that only works under ideal conditions isn't really finished, and there's a precise, computable way to check whether yours survives the rough version.

Hue is not the same thing as value

Two colors can look completely distinct to the eye — different hues, different moods, different names — and still sit almost exactly on top of each other once you strip color away and look only at how light or dark each one is. That lightness-or-darkness property is called luminance, and it's the same relative-luminance calculation behind the WCAG contrast ratio used elsewhere on this site to check text legibility. The brand color palette generator computes it directly from each color's sRGB channels, and running it across the five built-in moods turns up a pattern worth knowing about before you lean too hard on hue alone to keep a palette's pieces visually distinct.

A worked look at the numbers

Take the primary and secondary colors from each of the five built-in palettes and check the actual contrast ratio between them — not primary against a neutral, which the tool already checks for text legibility, but primary against secondary, which is the pairing that has to stay visually distinct as two separate, deliberate brand colors:

• Bold — primary #6d28d9 vs secondary #4c1d95: contrast ratio 1.54
• Playful — primary #be185d vs secondary #9d174d: contrast ratio 1.31
• Luxury — primary #111827 vs secondary #1f2937: contrast ratio 1.21
• Minimal — primary #111827 vs secondary #374151: contrast ratio 1.72
• Calm — primary #1d4ed8 vs secondary #4338ca: contrast ratio 1.18

Every single one of these sits close to 1:1 — the ratio for two identical colors. Compare that to each palette's accent color against its primary, which runs much higher across the board (3.31 for bold, 2.67 for playful, and as high as 8.44 for luxury). That's not a flaw in these palettes; it's a completely reasonable, common design choice — primary and secondary are meant to read as a coordinated family, a deep and a slightly deeper version of the same core color, distinguished by hue and saturation rather than by how light or dark they are. But it has a real, specific consequence: strip the hue away — print in one ink, view in true grayscale, shrink to a size where color differentiation stops working — and primary and secondary will visually collapse into each other. The accent color, by contrast, was built with enough luminance separation to survive that exact test.

Why this matters more than it sounds like it should

It's tempting to treat this as a purely theoretical concern, but it shows up in ordinary, unglamorous situations more often than expected: a favicon rendered at a size too small for subtle color differences to register, a logo stamped in a single ink on packaging, a document printed on an office printer with no color cartridge installed, a screenshot converted to grayscale for a print ad's proof. In every one of these cases, whatever distinction your palette was relying on hue alone to carry disappears, and only the luminance differences — the actual lightness or darkness of each color — are left to do the work. A palette designed without ever checking this can look perfectly coherent in every full-color mockup and then quietly stop making sense the first time it meets one of these ordinary, colorless conditions.

The single-color test, made concrete

Given the numbers above, the practical test is straightforward: take your palette's key elements — the parts of a logo or interface that need to read as visually distinct from each other — and check the actual relative luminance of each one, the same calculation the palette generator already runs. If two elements that need to be told apart sit close in luminance the way primary and secondary do in every built-in palette here, that's fine as long as those two elements are never asked to do the distinguishing work alone, in the absence of color. If they are — say, a two-color logo mark meant to also work as a single-ink stamp — the fix isn't to abandon a coordinated hue family, it's to deliberately widen the luminance gap between whichever two elements need to survive that specific use case, the same way each palette's accent color was already built with a wide luminance gap from its primary.

What the accessibility check already tells you, and what it doesn't

It's worth being precise about the difference between the contrast check this tool already runs and the luminance-separation question above, because they sound similar and answer different things. The built-in accessibility check confirms that primary-on-light-neutral and accent-on-dark-neutral both clear the WCAG 4.5:1 threshold for readable text — a statement about whether text built from those color pairings is legible against its specific background. It says nothing about whether primary and secondary are distinguishable from each other with color removed, because that's simply a different pairing, checking a different thing, for a different practical situation. A palette can pass every accessibility check it's designed to run and still collapse under the specific, narrower single-color or small-size test described here — the two checks aren't in tension, they're just answering different questions.

Why some moods separate more cleanly than others

It's worth noticing that the five built-in palettes aren't uniform in how much luminance separation they carry between primary and accent, even though every one of them clears the 1.18–1.72 near-identical range between primary and secondary. Luxury's accent (a warm gold, #d4af37) sits at a contrast ratio of 8.44 against its near-black primary — the widest gap of the five — while playful's accent sits at a comparatively modest 2.67 against a saturated pink primary. That's not an accident of which moods happen to look best; it's a direct consequence of luxury's primary being pushed to the very dark end of the luminance scale (0.009, close to true black) while playful's primary sits in the middle of the range (0.124). A primary color parked at an extreme end of light or dark automatically has more luminance room to separate cleanly from an accent than a primary sitting in the middle does — worth knowing if small-size or single-color legibility matters more to your specific brand than it might to another.

Testing it yourself, no code required

You don't need to run the underlying math by hand to get a rough, useful version of this test. Take a screenshot of your palette's key swatches together, convert it to grayscale using any basic photo editor or even your phone's built-in filters, and look at it at actual favicon size — shrink the image down until it's genuinely tiny, roughly the size of a browser tab icon. If two swatches that are supposed to read as distinct disappear into the same flat gray, that's the luminance-collapse problem showing up visually, without needing to look up a single hex code. It's a five-minute test worth running on any finalist palette before you consider it locked in, precisely because it catches exactly the failure mode the numbers above describe.

Designing with this in mind from the start

None of this means every palette needs primary and secondary to be high-contrast against each other — a tightly related, low-luminance-contrast pair is a completely legitimate, common design choice when the two colors are only ever going to appear together, in full color, at a reasonable size. The point is to know, deliberately, whether your specific use case will ever ask those two colors to do their job without color's help, and to check the real number rather than assume hue alone will carry it. If a favicon, a single-ink stamp, or a black-and-white document is genuinely part of your brand's real-world use, run the luminance check on the specific elements involved before you finalize anything, the same way you'd run the contrast check before finalizing body text.

A palette that only has to work in full color, at a comfortable size, on a good screen has an easier job than most brands actually need. Check what happens when you take color and size away, and you'll know whether your palette is genuinely finished or just finished for the best-case scenario. It's a small, mechanical check, and it catches a real, common gap that a full-color, full-size mockup will never show you on its own.