Color theory basics: hue, shade, tint, tone & undertone explained
"That paint looks purple next to my tile" is an undertone problem, not a mystery. This guide covers the small vocabulary you need to actually talk about color — hue, shade, tint, tone, saturation, value, undertone, and complementary colors — so results from our color tools make sense instead of feeling like jargon.
The color wheel, and what "complementary" actually means
The color wheel arranges every hue in a circle, in the order they naturally appear in light: red, orange, yellow, green, blue, violet, and back to red. Two colors directly across the wheel from each other are called complementary — red/green, blue/orange, yellow/purple. Complementary pairs create the strongest possible contrast, which is exactly why they're used on purpose for emphasis (think sale tags, sports jerseys) and exactly why they're the most common source of an accidental clash: if a wall paint and an adjacent tile happen to carry undertones that land near-opposite on the wheel, they'll visually fight each other even if neither color looks "loud" on its own.
Colors near each other on the wheel (like blue and teal, or red and orange) are called analogous — these read as harmonious because they share a similar hue family. Most safe paint-pairing advice ("stay in the same color family") is really just "stay analogous on the wheel."
Ads help keep these tools free.
Hue vs. shade vs. tint vs. tone
These four words get used interchangeably in casual conversation, but they mean specific, different things. All four start from the same base hue — what changes is what gets mixed into it.
| Term | What's added | Effect | Example (starting from blue) |
|---|---|---|---|
| Hue | Nothing — it's the base color itself | The color family: red, blue, yellow, etc. | Blue |
| Shade | Black | Darker, deeper | Navy |
| Tint | White | Lighter, softer, often perceived as "pastel" | Baby blue |
| Tone | Gray | More muted, without a fixed lightness change | Slate blue |
Navy, baby blue, and slate blue are all still fundamentally blue — paint brands just give each variation its own marketing name, which is part of why "is this the same blue?" is a harder question than it sounds.
Saturation (chroma) — the most overlooked dial
Saturation — also called chroma — controls how intense or muted a color looks, completely independent of how light or dark it is. Think of it as the "purity" of the hue: high saturation means the color is vivid and unmistakable; low saturation means the hue is still there, but it's been diluted toward gray. At zero saturation, any hue becomes a neutral gray at whatever lightness it has.
This is the part of color that most people miss when they're surprised by a paint chip. A vivid orange and a sandy beige can share the exact same hue — what makes the beige look "neutral" is that its saturation has been pulled way down. The hue family is still there, just quieted. This is exactly why our Color Scheme Generator shows a Muted complement alongside the True complement — same hue, different saturation, very different personality in a room.
Value is the separate question of light vs. dark. A pale sky and a deep navy are both "blue" hue, similar saturation, but opposite values. Saturation and value together are the two dials — combined with hue — that define any color completely. Most paint tools let you adjust all three via HSL (hue, saturation, lightness): hue picks the color family, saturation sets its vividness, lightness sets its brightness.
| Example (starting from orange, hue 30°) | Saturation | Lightness | How it reads |
|---|---|---|---|
| Vivid orange | High (90%) | Mid (55%) | Bold accent color |
| Burnt sienna | Mid (55%) | Mid (40%) | Earthy, still reads orange |
| Sandy beige | Low (25%) | High (72%) | Warm neutral — hue is hidden |
| Dark terracotta | Mid (60%) | Low (30%) | Deep, rich accent |
Undertone — the one that actually causes clashes
An undertone is the faint secondary hue hiding underneath a color that otherwise looks neutral — white, gray, beige, "greige," even black. Almost no real-world white paint is purely neutral; it usually carries a whisper of blue, yellow, pink, or green that's invisible in isolation but becomes obvious the moment it's placed next to another material.
This is the actual mechanism behind the classic complaint: a "neutral" greige wall that suddenly reads purple once it's installed next to warm, yellow-brown tile. Neither color is wrong on its own — the tile's warm undertone is simply making the wall's cooler undertone more visible by contrast. Our Paint Undertone Checker measures this directly and shows which colors safely share an undertone family versus which ones sit close to opposite on the wheel.
Hex codes and RGB — same color, two notations
A hex code like #1D4ED8 and an RGB value like rgb(29, 78, 216) describe the exact same color — they're just two different ways of writing it down. Both systems break a color into three channels: red, green, and blue light, mixed together.
- RGB uses three numbers from 0–255 — one each for red, green, and blue.
(0,0,0)is black,(255,255,255)is white. - Hex packs those same three 0–255 values into base-16 (hexadecimal), two digits per channel, with a
#in front:#1D4ED8= R:29 (1D), G:78 (4E), B:216 (D8). - Hex shows up more in design software and CSS; RGB shows up more when you're adjusting one channel at a time (like a photo editor's color sliders).
If you have one notation and need the other, the RGB to Hex Converter and Hex to RGB Converter do the math instantly.
Put it to use
FAQ
What's the difference between hue, shade, tint, and tone?
Hue is the base color family itself — red, blue, yellow, and so on. Shade is hue plus black (makes it darker). Tint is hue plus white (makes it lighter and softer). Tone is hue plus gray (makes it more muted, without necessarily changing lightness). So "navy" is a shade of blue, "baby blue" is a tint of blue, and "slate blue" is a tone of blue — all three are still fundamentally the same hue.
What is a color's undertone?
Undertone is the subtle secondary hue hiding underneath a color's main appearance — most noticeable in colors that look "neutral" at a glance, like white, gray, beige, or greige. A white paint might look pure white on the can but actually carry a faint blue, yellow, or pink undertone that only becomes obvious next to another material. Undertones are why two "neutral" colors can clash even though neither looks colorful on its own.
What does complementary color mean?
Complementary colors sit directly opposite each other on the color wheel — red and green, blue and orange, yellow and purple. Placed side by side, they create the strongest possible visual contrast, which is why they're used deliberately for emphasis (sports logos, sale tags) but also why they're the most common source of accidental clashing when undertones land near-opposite by mistake.
What's the difference between saturation and value?
Saturation (also called chroma) is how intense or muted a color looks — high saturation is vivid and pure, low saturation is washed-out or grayish, regardless of lightness. At zero saturation, any hue becomes a neutral gray. Value is how light or dark a color is, independent of saturation. A vivid orange and a sandy beige can share the exact same hue (orange, ~30°) — what makes the beige look neutral is that its saturation has been reduced, quieting the hue toward a warm neutral. This is why two "neutrals" that look nothing alike can actually be the same hue family.
What is a hex code and how does it relate to RGB?
A hex code (like #1D4ED8) is a six-digit code that represents a color's red, green, and blue light values in base-16, two digits per channel. #1D4ED8 breaks down to R=29, G=78, B=216 in standard 0-255 RGB. Hex and RGB describe the exact same color in two different notations — hex is more common in design software and CSS, RGB is more common when adjusting color channels individually.