How to Make Two Colors Look Like One
Surrounding colors change how a color is seen. Here is how to use simultaneous contrast to make two different swatches read as one, and what that means for vector logo palettes.
Contents
The short answer
You make two different colors look like one by changing what surrounds them, not by changing the colors. A color seen against a background is judged relative to that background. A light ground makes a color appear darker, a dark ground makes it appear lighter, and a strongly hued ground nudges the color's apparent hue away from its own hue. Put each of two slightly different colors on a ground that pushes it toward the other, and the gap between them can visually close.
This is the effect usually called simultaneous contrast. It was made famous as a studio exercise by the artist and teacher Josef Albers in his book Interaction of Color, where students were asked to make one color look like two and, in the reverse exercise, to make two colors look like one. The second exercise is the subject here.
How surrounding colors change color perception
The eye does not report color in isolation. It compares neighboring areas, so the same fill value can read differently depending on its context. Three shifts matter most when you are trying to merge two colors visually:
- Lightness: a color on a lighter ground looks darker; the same color on a darker ground looks lighter.
- Hue: a ground tends to push the enclosed color toward the ground's opposite. A color on a yellowish ground loses some apparent yellow; on a bluish or violet ground it gains apparent warmth.
- Saturation: a color on a vivid ground of similar hue can look duller; on a gray or muted ground it can look more intense.
The effect is strongest when the color sits inside a much larger ground, when the edges between color and ground are clean, and when the two colors you are trying to match differ only slightly to begin with. It weakens when the colors are large relative to their grounds, when the two samples are seen side by side on the same ground, or when the viewer can isolate them. No measured thresholds were supplied for this article, and the strength of the illusion varies with the viewer, the display or print process, and the viewing conditions, so treat every result as something to check by eye rather than calculate.
What this means for a vector logo
In a logo, the illusion only holds inside a composition you control. A logo is placed on many backgrounds, and each one changes the perceived relationship between its colors. That gives the principle two practical uses:
- Deliberate merging: within a fixed lockup that always includes its own background panels, two distinct swatches can be tuned so that they read as one color across different parts of the mark.
- Corrective matching: more often, the useful move is the reverse of the illusion. A brand color placed on a dark or reversed background may look lighter or shifted than on white. Supplying a slightly adjusted swatch for that version can make the two placements look like the same color, even though the values differ.
The second case is an editorial judgment rather than a rule. Many brands keep a single value everywhere and accept the perceived shift; others document background-specific variants. Either approach is defensible as long as it is a decision rather than an accident.
How to produce the effect in vector artwork
Starting materials
- A vector file in which the relevant areas are actual paths with editable fills. Do not assume this from the file extension; an AI, EPS, PDF or SVG file can contain an embedded raster image or a flattened preview instead of live paths. Select the shapes and confirm they report vector fills.
- The two colors you want to merge, each defined as its own swatch.
- The backgrounds each color will sit on, as vector shapes in the same file.
- If the logo is not yours, confirmation that you are permitted to modify its artwork and colors. Being able to download a logo file does not grant the right to alter the mark, its fonts or its trademark use.
Steps
- 1. Compare the two colors directly, side by side on a neutral gray, and note how they differ: lighter or darker, warmer or cooler, more or less saturated.
- 2. Address lightness first. Place the lighter of the two on a light ground and the darker on a dark ground. The light ground darkens the lighter sample and the dark ground lightens the darker one, pulling them toward each other.
- 3. Address hue next. Put the color that has too much of a given hue on a ground of that hue, which suppresses it, and put the other color on a ground of the opposite hue, which pushes it in the same direction.
- 4. Adjust saturation if needed. A vivid ground of similar hue mutes a color; a neutral ground lets it read stronger.
- 5. Keep each color small relative to its ground and avoid letting the two colored areas touch, since direct adjacency exposes the difference.
- 6. Iterate on the grounds, not the two target colors, if the exercise is to merge two fixed colors. If you are matching a brand color across backgrounds, adjust the variant swatch instead.
File structure and color settings
Because the effect depends on small differences, keep both colors as separately named swatches, preferably global swatches, so they are not merged by a find-and-replace or a palette cleanup that collapses near-duplicates. Name them so their purpose is clear, for example as a base value and an on-dark variant, and record which background each is intended for.
Decide the color mode before tuning. Converting between RGB, CMYK and spot colors can move each value differently and reopen or exaggerate the gap you closed. If the logo will be delivered in several modes, tune and check the effect in each one rather than converting a single tuned version.
When exporting, remember that SVG and PDF keep the vector fills and their defined values, while PNG or JPG previews are raster renderings whose appearance also depends on the screen they are viewed on. Check the exported vector files, not only the previews.
Final inspection
- View the artwork at its real use size; the illusion behaves differently at small and large scales.
- Check on more than one screen and, for print, on a proof rather than on screen alone.
- Sample both fills with an eyedropper to confirm the underlying values are still the two you intended, and that neither was silently replaced.
- View a grayscale version to confirm the lightness relationship works as planned.
- Place the logo on the backgrounds it will actually appear on and confirm the effect holds, or that the documented variant swatches are being used where intended.
A related effect worth separating
Two colors can also blend into one when they are broken into a fine pattern of tiny dots or lines viewed from a distance, as in halftone printing. That is optical mixing, not simultaneous contrast. It is generally a poor fit for logos, because a pattern that blends at one size can turn visible and noisy when the mark is enlarged, or fill in when it is reduced.
Gaps in this guidance
No specific color values, measurements or test results were available for this article, so it describes the principle and the working method rather than recommended numbers. How far two colors can differ and still be made to look identical depends on the colors, the grounds, the medium and the viewer, and should be established by testing the actual artwork.