---
title: Can you trust this color?
description: Make a prediction, remove the surroundings, and discover how one color can look like two.
---

[@experiment]: ./color-context.components.md

# Can you trust this color?

Two squares. Two backgrounds. A small experiment in how much of what you see
belongs to the thing itself—and how much belongs to its surroundings.

[@link.play Play the experiment](./color-context.demo.md)

---

<!-- id: look -->

## Which square looks brighter?

Look at the small squares, not the large backgrounds. Does one look brighter,
warmer, or more vivid? Make a prediction before you touch the control.

<color-context-experiment />

---

<!-- id: reveal -->

## The color never changed.

Both squares are the same coral: `#e78c70`. The control changes only their
surroundings. Switch it off and the difference may return—even after you know
the answer.

That is the useful surprise: knowing the color's value does not tell you exactly
how it will look in a composition. The surrounding colors matter too.

The strength of the effect varies with your display and your vision. If the
squares already look alike to you, compare how strongly each stands out from
its background.

---

<!-- id: practice -->

## Make one color do two jobs.

Try this with colored paper or in a drawing app. Give yourself three minutes.

1. Make two identical small squares. Keep their color and size fixed.
2. Put each on a different, larger background. Change only those backgrounds
   until one square feels quiet and the other seems to glow.
3. Bring the squares together on one background to check your work.

Show someone the pair before explaining it. Ask what they see. Their observation
is more useful than whether they guess the trick.

---

## Choose colors in company.

Next time a button feels dull or an illustration feels too loud, try changing
what surrounds it before changing the color itself. Compare the whole
composition, not just the isolated swatch.

This original example follows the color-context exercise explored in Josef
Albers's *Interaction of Color*. Go further with the Albers Foundation's
[One Color Becomes Two](https://www.albersfoundation.org/learning/workshops/one-color-becomes-two).

<x-docs-source-link /> ·
[Explore the interactive component](./color-context.components.md) ·
[More examples](./index.md)