Brick Red

HEX: #CB4154 | Modern Palette

On White
4.75:1
PASS
On Black
4.42:1
FAIL

Color Specifications

HEX
#CB4154
RGB
203, 65, 84
HSL
351°, 57% ,52%
CMYK
0, 68, 59, 20

About Brick Red

Brick Red (#CB4154) is a color with RGB(203, 65, 84) and HSL(351.7°, 57%, 52.5%). It is commonly associated with Romantic moods. In design, it fits Warm styles and is suitable for Text, Button, Logo. Its complementary color is #41CBB8, which creates strong contrast. Its triadic palette includes #54CB41 and #4154CB. The name comes from Brick Red (English).

  • HEX: #CB4154
  • RGB: 203, 65, 84
  • HSL: 351.7°, 57%, 52.5%
  • Mood: Romantic
  • Style: Warm
  • Use case: Text, Button, Logo
  • Complementary color: #41CBB8
  • Triadic colors: #54CB41, #4154CB
  • The name comes from Brick Red (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 #CB4154 from deepest shade to lightest tint.

Color Characteristics

Mood
Romantic
Style
Warm
Use case
Text Button Logo

Accessibility Simulation

Deuteranopia #7F7F4E
Protanopia #5E5E55
Tritanopia #CA4444
Achromatopsia #737373

Frequently Asked Questions

Brick Red (#CB4154) is a color with RGB(203, 65, 84) and HSL(351.7°, 57%, 52.5%).

#CB4154 pairs strongly with #41CBB8 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

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

#CB4154 is commonly associated with Romantic.

The name Brick Red is linked to Brick Red from English, meaning A reddish-brown color resembling that of common fired clay bricks..

Name, History & Etymology

Origin Word Brick Red
Meaning A reddish-brown color resembling that of common fired clay bricks.
Language English
First Recorded Use Late 18th Century

History

The color itself, representing fired clay, has been present in human artifacts for millennia, from ancient pottery to Roman architecture. As a specific color name, 'brick red' gained currency to describe a particular hue, distinct from other reds or browns. Its usage became common in various industries, including textiles and paints, to denote this earthy, durable shade. The consistency of brick color across regions contributed to its recognition as a distinct color descriptor.

First Recorded Use

The term 'brick red' likely emerged as a descriptive color name in English during the late 18th or early 19th century, coinciding with the widespread use and standardization of brick as a building material.

Cultural Associations

Brick red evokes a sense of warmth, stability, and tradition, often associated with homes, historical buildings, and rustic aesthetics. It is a common color in many architectural styles globally, reflecting its practical origins. The color is also frequently seen in natural pigments and dyes, linking it to earthy and organic themes.

Similar Named Colors
Dark Terra Cotta #CC4E5C ΔE 2.71
French Raspberry #C72C48 ΔE 3.82
Bittersweet Shimmer #BF4F51 ΔE 4.09
Popstar #BE4F62 ΔE 4.40

Code Snippets

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

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

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

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #CB4154,
        #41CBB8
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #CB4154,
        #41CBB8
    );
}

// SCSS variable
$brick-red: #CB4154;

// With RGB channels (useful for rgba() usage)
$brick-red-r: 203;
$brick-red-g: 65;
$brick-red-b: 84;

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