#967969
RGB(150, 121, 105)
#000000
#0F0C0A
#1E1815
#2D241F
#3C302A
#4B3C34
#5A483F
#695449
#786054
#876C5E
#967969
Color Values
HEX
#967969
RGB
rgb(150, 121, 105)
HSL
hsl(21, 18%, 50%)
CMYK
0%, 19%, 30%, 41%
HSV
21°, 30°, 59°
XYZ
21.96, 21.18, 16.29
Color Variations
Shades
#876c5e
#786054
#695449
#5a483f
Tints
#a08678
#ab9387
#b5a196
#c0aea5
Triadic Colors
#967969
#699679
#796996
Analogous Colors
#967969
#969069
#966970
Monochromatic Colors
#69554a
#786154
#876d5f
#967969
Complementary Color
#967969
#698696
CSS Examples
Coffee Swirl Effect
.coffee-swirl {
background: #967969;
background-image:
radial-gradient(
circle at 50% 50%,
rgba(255,255,255,0.15) 0%,
rgba(150,121,105,0.8) 50%,
#967969 100%
);
box-shadow: inset 0 0 25px rgba(0,0,0,0.15);
}Mocha Gradient Card
.mocha-card {
background: linear-gradient(
145deg,
#967969,
#a08678 50%,
#967969
);
border-radius: 12px;
box-shadow:
0 10px 20px rgba(150,121,105,0.25),
inset 0 -3px 6px rgba(0,0,0,0.15);
padding: 24px;
}Luxury Button
.luxury-btn {
background: linear-gradient(to right, #967969, #a08678);
color: #ffffff;
border: none;
padding: 14px 28px;
border-radius: 30px;
box-shadow:
0 5px 15px rgba(150,121,105,0.35),
inset 0 2px 0 rgba(255,255,255,0.25);
transition: transform 0.2s, box-shadow 0.2s;
}Textured Pattern
.mocha-texture {
background-color: #967969;
background-image:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.1) 0px,
rgba(255,255,255,0.1) 2px,
transparent 2px,
transparent 4px
),
linear-gradient(
to bottom,
#967969,
#a08678
);
}Sophisticated Border
.sophisticated-border {
border: 6px solid;
border-image: linear-gradient(
45deg,
#967969,
#a08678,
#967969,
#b5a196
) 1;
box-shadow:
0 0 20px rgba(150,121,105,0.2),
inset 0 0 10px rgba(150,121,105,0.1);
}Rich Text
.rich-text {
color: #967969;
font-weight: 600;
text-shadow:
1px 1px 0 rgba(150,121,105,0.2),
2px 2px 3px rgba(0,0,0,0.1);
background: linear-gradient(45deg, #967969, #a08678);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Smooth Wave Animation
@keyframes smoothWave {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.smooth-wave {
background: linear-gradient(
90deg,
#967969,
#a08678,
#967969
);
background-size: 200% 100%;
animation: smoothWave 10s ease infinite;
}About Mocha
Mocha is a rich, warm, and comforting shade of brown that combines sophistication with natural earthiness. This versatile color draws inspiration from the beloved coffee drink, offering both luxury and approachability in design.
What Is Mocha?
Mocha is a sophisticated brown shade that balances warmth and depth, inspired by the rich blend of coffee and chocolate. This color brings a sense of comfort while maintaining an air of elegance and refinement.
Meaning and Symbolism
Mocha is associated with these qualities:
- Sophistication
- Comfort
- Reliability
- Groundedness
- Luxury
Cultural Significance
The color mocha's history begins with the export of Yemeni coffee beans from the Mocha port in the 16th and 17th centuries. Today, it represents a perfect blend of sophistication and warmth in design and fashion.
Color Combinations
Mocha pairs beautifully with:
- Cream (#FDFBD4) - Creates depth with softness
- Light Blue (#90D5FF) - Balances warmth with coolness
- Green Sage (#98A869) - Complements with earthy tones
- Dusty Rose (#DCA1A1) - Adds vintage sophistication
