Color Values
HEX
#8B4513
RGB
rgb(139, 69, 19)
HSL
hsl(25, 76%, 31%)
CMYK
0%, 50%, 86%, 45%
HSV
25°, 86%, 55%
XYZ
12.89, 9.79, 1.83
Color Variations
Shades
#7d3e11
#6f370f
#61300d
#53290b
Tints
#96572a
#a26a42
#ad7c59
#b98f71
Triadic Colors
#8B4513
#138B45
#45138B
Analogous Colors
#8B4513
#8B8113
#8B131D
Monochromatic Colors
#48240a
#5e2f0d
#753a10
#8B4513
Complementary Color
#8B4513
#13598B
CSS Examples
Leather Texture
.leather-effect {
background: #8B4513;
background-image:
repeating-linear-gradient(
45deg,
rgba(0,0,0,0.1) 0px,
rgba(0,0,0,0.1) 2px,
transparent 2px,
transparent 4px
),
linear-gradient(
to bottom,
#8B4513,
#753a10
);
box-shadow:
inset 0 0 50px rgba(0,0,0,0.3),
inset 0 0 20px rgba(0,0,0,0.2);
}
Western Card
.western-card {
background: linear-gradient(
135deg,
#8B4513,
#96572a 50%,
#8B4513
);
border-radius: 8px;
box-shadow:
0 15px 30px rgba(139,69,19,0.3),
inset 0 -5px 10px rgba(0,0,0,0.2);
padding: 25px;
border: 2px solid #61300d;
}
Saddle Button
.saddle-btn {
background: linear-gradient(to right, #8B4513, #96572a);
color: #ffffff;
border: none;
padding: 16px 32px;
border-radius: 6px;
box-shadow:
0 8px 16px rgba(139,69,19,0.4),
inset 0 2px 0 rgba(255,255,255,0.2);
transition: all 0.3s ease;
border: 1px solid #61300d;
}
Tooled Leather Pattern
.tooled-leather {
background-color: #8B4513;
background-image:
radial-gradient(
circle at 0% 50%,
rgba(0,0,0,0.2) 0%,
transparent 50%
),
radial-gradient(
circle at 100% 50%,
rgba(255,255,255,0.1) 0%,
transparent 50%
);
background-size: 20px 20px;
}
Western Border
.western-border {
border: 4px solid;
border-image: linear-gradient(
45deg,
#8B4513,
#96572a,
#8B4513,
#753a10
) 1;
box-shadow:
0 0 30px rgba(139,69,19,0.25),
inset 0 0 20px rgba(139,69,19,0.15);
}
Rustic Text
.rustic-text {
color: #8B4513;
font-weight: 700;
text-shadow:
1px 1px 0 rgba(139,69,19,0.2),
2px 2px 5px rgba(0,0,0,0.2);
background: linear-gradient(45deg, #8B4513, #96572a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Leather Grain Animation
@keyframes leatherGrain {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
}
.leather-grain {
background: linear-gradient(
45deg,
#8B4513,
#96572a,
#8B4513
);
background-size: 200% 200%;
animation: leatherGrain 15s ease infinite;
}
About Saddle Brown
Saddle Brown is a rich, earthy hue that evokes the rugged charm of the Old West. This warm, medium-dark brown is reminiscent of well-worn leather saddles, giving it a timeless and rustic appeal.
What Is Saddle Brown?
Saddle Brown is a deep, warm brown with undertones of red and orange, reminiscent of rich, aged leather and autumn leaves. This color often appears in nature, from the bark of ancient trees to the fur of woodland animals.
Meaning and Symbolism
Saddle Brown represents:
- Rustic charm
- Warmth
- Earthiness
- Timelessness
- Authenticity
Historical Significance
The origins of Saddle Brown can be traced back to the natural dyes used in leather tanning. This color has been historically associated with craftsmanship, particularly in leatherwork and traditional crafts.
Color Combinations
Saddle Brown pairs beautifully with:
- Teal (#008080) - Creates balanced contrast
- Olive Green (#808000) - Natural harmony
- Burnt Orange (#CC5500) - Warm, vibrant combination
- Cream (#FFFDD0) - Classic, elegant pairing