#c4a484
RGB(196, 164, 132)
#000000
#13100D
#27201A
#3A3127
#4E4134
#625242
#75624F
#89725C
#9C8369
#B09376
#C4A484
Color Values
HEX
#c4a484
RGB
rgb(196, 164, 132)
HSL
hsl(30, 35%, 64%)
CMYK
0%, 16%, 33%, 23%
HSV
30°, 33°, 77°
XYZ
40.21, 39.95, 27.42
Color Variations
Shades
#b09376
#9c8369
#89725c
#75624f
Tints
#c9ad90
#cfb69c
#d5bfa8
#dbc8b5
Triadic Colors
#c4a484
#84c4a4
#a484c4
Analogous Colors
#c4a484
#c4c484
#c48484
Monochromatic Colors
#aa7e52
#b38b62
#bc9773
#c4a484
Complementary Color
#c4a484
#84a4c4
CSS Examples
Wooden Panel
.wooden-panel {
background: #c4a484;
background-image:
linear-gradient(
90deg,
rgba(0,0,0,0.1) 0px,
transparent 1px
),
linear-gradient(
#b09376,
#c4a484 20px,
#dbc8b5 21px
);
background-size: 20px 21px;
box-shadow: inset 0 0 30px rgba(0,0,0,0.2);
}Natural Card
.natural-card {
background: linear-gradient(
145deg,
#c4a484,
#dbc8b5 40%,
#c4a484 80%
);
border-radius: 12px;
box-shadow:
0 8px 20px rgba(196,164,132,0.3),
inset 0 2px 4px rgba(255,255,255,0.3);
padding: 20px;
}Earth Button
.earth-btn {
background: linear-gradient(to bottom right, #c4a484, #b09376);
color: #4a3828;
border: none;
padding: 12px 28px;
border-radius: 8px;
box-shadow:
0 4px 12px rgba(196,164,132,0.4),
inset 0 2px 0 rgba(255,255,255,0.2);
transition: all 0.3s ease;
}Wood Grain Pattern
.wood-grain {
background-color: #c4a484;
background-image:
repeating-linear-gradient(
45deg,
#b09376 0px,
#b09376 2px,
#c4a484 2px,
#c4a484 4px
),
repeating-linear-gradient(
-45deg,
rgba(0,0,0,0.1) 0px,
rgba(0,0,0,0.1) 1px,
transparent 1px,
transparent 4px
);
}Natural Frame
.natural-frame {
border: 12px solid #c4a484;
border-image:
linear-gradient(
45deg,
#b09376,
#c4a484,
#dbc8b5,
#c4a484
) 1;
box-shadow:
0 0 25px rgba(196,164,132,0.2),
inset 0 0 15px rgba(196,164,132,0.15);
}Earthy Text
.earthy-text {
color: #c4a484;
font-weight: 600;
text-shadow:
1px 1px 0 rgba(196,164,132,0.3),
2px 2px 3px rgba(0,0,0,0.1);
background: linear-gradient(45deg, #c4a484, #dbc8b5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Soil Animation
@keyframes soilShift {
0% { background-position: 0 0; }
50% { background-position: 20px 10px; }
100% { background-position: 0 0; }
}
.soil-texture {
background:
radial-gradient(
circle at 50% 50%,
#b09376 0%,
#c4a484 30%,
#dbc8b5 60%,
#c4a484 100%
);
background-size: 40px 40px;
animation: soilShift 8s ease infinite;
}About Light Brown
The color light brown is a soft, neutral shade that evokes a sense of warmth and earthiness. This versatile hue is often associated with natural elements like wood, soil, and leather.
What Is Light Brown?
Light brown is a gentle, muted shade that combines the richness of brown with a touch of softness, reminiscent of caramel or toasted almonds. This color is commonly seen in natural elements like tree bark, dried leaves, and certain types of stone.
Meaning and Symbolism
Light brown is commonly associated with these qualities:
- Warmth
- Comfort
- Stability
- Reliability
- Earthiness
Cultural Significance
In different cultures, light brown often symbolizes simplicity and humility. Historically, it has been linked to the working class, as it was a common color for durable, everyday clothing and materials.
Color Combinations
Light brown pairs beautifully with:
- Teal (#008080) - Creates a balanced and visually appealing look
- Olive Green (#808000) - Perfect for natural and earthy themes
- Burnt Orange (#cc5500) - Adds warmth and richness
