Tumbleweed

HEX: #DEAA88 | Modern Palette

On White
2.06:1
FAIL
On Black
10.21:1
PASS

Color Specifications

HEX
#DEAA88
RGB
222, 170, 136
HSL
23°, 56% ,70%
CMYK
0, 23, 39, 13

About Tumbleweed

Tumbleweed (#DEAA88) is a color with RGB(222, 170, 136) and HSL(23.7°, 56.6%, 70.2%). In design, it fits Warm styles and is suitable for Text, Button, Logo. Its complementary color is #88BCDE, which creates strong contrast. Its triadic palette includes #88DEAA and #AA88DE. The name comes from Tumbleweed (English).

  • HEX: #DEAA88
  • RGB: 222, 170, 136
  • HSL: 23.7°, 56.6%, 70.2%
  • Style: Warm
  • Use case: Text, Button, Logo
  • Complementary color: #88BCDE
  • Triadic colors: #88DEAA, #AA88DE
  • The name comes from Tumbleweed (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Tumbleweed #DEAA88 is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
 
 
 
TUMBLEWEED
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
TUMBLEWEED
 
 
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
 
 
 
 
 
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
 
 
 
 
 

Color Harmonies

Tumbleweed #DEAA88 pairs with #88BCDE as its complementary color, and #88DEAA and #AA88DE in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

TUMBLEWEED
Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

TUMBLEWEED
Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

TUMBLEWEED
Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

TUMBLEWEED
Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

TUMBLEWEED
Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

TUMBLEWEED

Shades & Tints

The shade and tint range for Tumbleweed #DEAA88 moves from dark #140B06 tones through the base color to lighter #F9F1EB tones, making it useful for depth, hierarchy, and background variation.

TUMBLEWEED

Color Characteristics

Mood
Style
Warm
Use case
Text Button Logo

Accessibility Simulation

Deuteranopia #BBBB86
Protanopia #B1B188
Tritanopia #E1A6A6
Achromatopsia #B5B5B5

Frequently Asked Questions

Tumbleweed (#DEAA88) is a color with RGB(222, 170, 136) and HSL(23.7°, 56.6%, 70.2%).

#DEAA88 pairs strongly with #88BCDE as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#DEAA88 is suitable for Text, Button, Logo and works well with Warm styles.

The name Tumbleweed is linked to Tumbleweed from English, meaning A plant that breaks away from its roots and is driven by the wind as a light, dry, rolling mass..

Name, History & Etymology

Origin Word Tumbleweed
Meaning A plant that breaks away from its roots and is driven by the wind as a light, dry, rolling mass.
Language English
First Recorded Use Late 19th Century

History

The concept of a 'tumbleweed' is intrinsically linked to arid and semi-arid regions, particularly the American West. Several plant species exhibit this 'tumbleweed' behavior, with the most iconic often being Salsola tragus (Russian thistle). This plant was introduced to the United States from Russia in the late 19th century and quickly spread, becoming a symbol of the frontier and open spaces. The term likely arose from a descriptive combination of 'tumble' (to fall or roll) and 'weed' (an undesirable plant). Its visual representation has been heavily used in Western films and literature to evoke feelings of desolation, emptiness, or the passage of time in a deserted place.

First Recorded Use

The term 'tumbleweed' itself appears to have become common in American English in the late 19th century, coinciding with the settlement and observation of the American West. While the phenomenon of plants rolling in the wind has existed for much longer, the specific compound word 'tumbleweed' gained traction during this period.

Cultural Associations

Tumbleweeds are a powerful cultural symbol, especially in American culture. They are frequently used in media (movies, TV shows, cartoons) to signify: - **Desolation/Emptiness:** A lone tumbleweed rolling across a deserted street is a classic trope for an abandoned town or a moment of awkward silence. - **The American West:** It's an iconic image associated with cowboys, prairies, and the frontier. - **Passage of Time:** The slow, wind-driven movement can symbolize the slow passage of time or a lack of activity. - **Rootlessness/Wandering:** Metaphorically, a 'tumbleweed' can refer to a person who is rootless, wanders from place to place, or lacks direction.

Similar Named Colors
Antique Brass #CD9575 ΔE 5.86
Fawn #E5AA70 ΔE 6.29
Brown Yellow #CC9966 ΔE 7.34
Very Light Tangelo #FFB077 ΔE 7.42

Code Snippets

/* Background */
.element {
    background-color: #DEAA88;
}

/* Text */
.element {
    color: #DEAA88;
}

/* Border */
.element {
    border: 1px solid #DEAA88;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #DEAA88,
        #88BCDE
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #DEAA88,
        #88BCDE
    );
}

// SCSS variable
$tumbleweed: #DEAA88;

// With RGB channels (useful for rgba() usage)
$tumbleweed-r: 222;
$tumbleweed-g: 170;
$tumbleweed-b: 136;

// Usage
.element {
    background-color: $tumbleweed;
    color: rgba($tumbleweed-r, $tumbleweed-g, $tumbleweed-b, 0.8);
}