#A52A2A
RGB(165, 42, 42)
#000000
#100404
#210808
#310C0C
#421010
#521515
#631919
#731D1D
#842121
#942525
#A52A2A
Color Values
HEX
#a52a2a
RGB
rgb(165, 42, 42)
HSL
hsl(0, 59%, 41%)
CMYK
0%, 75%, 75%, 35%
HSV
0°, 75°, 65°
XYZ
16.76, 9.82, 3.20
Color Variations
Shades
#942525
#842121
#731d1d
#631919
Tints
#ae3f3f
#b75454
#c06969
#c97f7f
Triadic Colors
#a52a2a
#2aa52a
#2a2aa5
Analogous Colors
#a52a2a
#a5682a
#a52a68
Monochromatic Colors
#681a1a
#7c2020
#912525
#a52a2a
Complementary Color
#a52a2a
#2aa5a5
CSS Examples
Wooden Texture Effect
background: linear-gradient(
90deg,
#a52a2a 0%,
#842121 20%,
#a52a2a 40%,
#842121 60%,
#a52a2a 80%,
#842121 100%
);
background-size: 200% 100%;
animation: woodGrain 10s linear infinite;Leather Card Design
.leather-card {
background-color: #a52a2a;
border-radius: 8px;
box-shadow:
inset 0 2px 3px rgba(255, 255, 255, 0.2),
inset 0 -2px 3px rgba(0, 0, 0, 0.2);
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(0,0,0,0.1) 10px,
rgba(0,0,0,0.1) 20px
);
}Rustic Button
.rustic-btn {
background: #a52a2a;
color: #f6e9e9;
border: 2px solid #842121;
padding: 12px 24px;
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}Vintage Border Pattern
.vintage-border {
border: 8px solid #a52a2a;
border-image: repeating-linear-gradient(
45deg,
#a52a2a,
#a52a2a 10px,
#842121 10px,
#842121 20px
) 8;
box-shadow: 0 0 15px rgba(165, 42, 42, 0.3);
}Earthy Gradient
background: linear-gradient(
135deg,
#a52a2a 0%,
#a5682a 50%,
#842121 100%
);
filter: saturate(0.9) brightness(1.1);
transition: all 0.3s ease;Natural Pattern
background-image:
radial-gradient(#842121 15%, transparent 16%),
radial-gradient(#a52a2a 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-color: #631919;Rich Text Style
.rich-text {
color: #a52a2a;
font-weight: 600;
text-shadow: 1px 1px 2px rgba(165, 42, 42, 0.3);
background: linear-gradient(45deg, #a52a2a, #842121);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}About Brown
Brown is a rich, earthy color that offers a versatile foundation for various design projects. It evokes a sense of warmth, sophistication, and timeless elegance, making it perfect for creating grounded and natural designs.
Tips for Creating Brown Color Palettes
- Balance with Lighter Shades: Pair brown with lighter colors like beige or cream for visual balance
- Use Complementary Colors: Match with teal or soft blue to add contrast and interest
- Incorporate Natural Tones: Add earthy colors like olive green or burnt orange
- Experiment with Textures: Combine with wood grain or fabric patterns for depth
- Maintain Versatility: Include neutral tones for adaptability
- Test in Different Lighting: Ensure the palette works in various environments
Applications in Design
Brown is particularly effective in:
- Natural and organic designs
- Rustic and vintage themes
- Luxury branding
- Interior design
- Environmental and earthy projects
Whether you're designing a website, creating an infographic, or crafting a presentation, incorporating brown hues can add depth and a touch of nature-inspired beauty to your creative endeavors.
