Brown

HEX: #A52A2A | Modern Palette

On White
7.08:1
PASS
On Black
2.96:1
FAIL

Color Specifications

HEX
#A52A2A
RGB
165, 42, 42
HSL
0°, 59% ,40%
CMYK
0, 75, 75, 35

About Brown

Brown (#A52A2A) is a color with RGB(165, 42, 42) and HSL(0°, 59.4%, 40.6%). It is commonly associated with Romantic moods. In design, it fits Warm styles and is suitable for Text, Button, Logo. Its complementary color is #2AA5A5, which creates strong contrast. Its triadic palette includes #2AA52A and #2A2AA5. The name comes from brūn (Old English).

  • HEX: #A52A2A
  • RGB: 165, 42, 42
  • HSL: 0°, 59.4%, 40.6%
  • Mood: Romantic
  • Style: Warm
  • Use case: Text, Button, Logo
  • Complementary color: #2AA5A5
  • Triadic colors: #2AA52A, #2A2AA5
  • The name comes from brūn (Old English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
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

Complementary

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

Analogous

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

Triadic

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

Split-Complementary

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

Tetradic (Square)

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

Monochromatic

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

Shades & Tints

A seamless scale of #A52A2A from deepest shade to lightest tint.

Color Characteristics

Mood
Romantic
Style
Warm
Use case
Text Button Logo

Accessibility Simulation

Deuteranopia #636321
Protanopia #46462C
Tritanopia #A52A2A
Achromatopsia #585858

Frequently Asked Questions

Brown (#A52A2A) is a color with RGB(165, 42, 42) and HSL(0°, 59.4%, 40.6%).

#A52A2A pairs strongly with #2AA5A5 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

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

#A52A2A is commonly associated with Romantic.

The name Brown is linked to brūn from Old English, meaning brown, dark, dusky.

Name, History & Etymology

Origin Word brūn
Meaning brown, dark, dusky
Language Old English
First Recorded Use Before 900 AD

History

The word 'brown' has a long and consistent history in the English language, deriving from the Old English 'brūn'. This in turn has roots in Proto-Germanic '*brūnaz' and ultimately Proto-Indo-European '*bhrū-no-' meaning 'brown, dark'. It has been used to describe the color of earth, wood, hair, and eyes for centuries. Its meaning has remained largely stable, referring to a color between red and yellow, often associated with natural elements.

First Recorded Use

The word 'brūn' is found in Old English texts dating back to the Anglo-Saxon period.

Cultural Associations

Brown is a color frequently associated with nature, earth, wood, and autumn. It often evokes feelings of warmth, comfort, stability, and reliability. In some cultures, it can symbolize humility or poverty. It is a common color for clothing, especially in practical or workwear contexts. In art, brown is a fundamental color for depicting landscapes and natural scenes. It is also the color of many staple foods like bread, coffee, and chocolate, giving it connotations of sustenance and coziness.

Similar Named Colors

Upsdell Red #AE2029 ΔE 1.87
Firebrick #B22222 ΔE 3.12
Vivid Auburn #922724 ΔE 3.88
Ruby Red #9B111E ΔE 4.01

Code Snippets

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

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

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

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #A52A2A,
        #2AA5A5
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #A52A2A,
        #2AA5A5
    );
}

// SCSS variable
$brown: #A52A2A;

// With RGB channels (useful for rgba() usage)
$brown-r: 165;
$brown-g: 42;
$brown-b: 42;

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