Bright Maroon

HEX: #C32148 | Modern Palette

On White
5.78:1
PASS
On Black
3.63:1
FAIL

Color Specifications

HEX
#C32148
RGB
195, 33, 72
HSL
345°, 71% ,44%
CMYK
0, 83, 63, 24

About Bright Maroon

Bright Maroon (#C32148) is a color with RGB(195, 33, 72) and HSL(345.6°, 71.1%, 44.7%). It is commonly associated with Energetic, Romantic moods. In design, it fits Vivid, Warm styles and is suitable for Text, Button, Accent. Its complementary color is #21C39C, which creates strong contrast. Its triadic palette includes #48C321 and #2148C3.

  • HEX: #C32148
  • RGB: 195, 33, 72
  • HSL: 345.6°, 71.1%, 44.7%
  • Mood: Energetic, Romantic
  • Style: Vivid, Warm
  • Use case: Text, Button, Accent
  • Complementary color: #21C39C
  • Triadic colors: #48C321, #2148C3

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Bright Maroon #C32148 is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
 
 
BRIGHT MAROON
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
BRIGHT MAROON
 
 
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
 
 
BRIGHT MAROON
 
 
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
 
 
 
 
 

Color Harmonies

Bright Maroon #C32148 pairs with #21C39C as its complementary color, and #48C321 and #2148C3 in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

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

BRIGHT MAROON
Analogous

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

BRIGHT MAROON
Triadic

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

BRIGHT MAROON
Split-Complementary

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

BRIGHT MAROON
Tetradic (Square)

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

BRIGHT MAROON
Monochromatic

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

BRIGHT MAROON

Shades & Tints

The shade and tint range for Bright Maroon #C32148 moves from dark #160408 tones through the base color to lighter #FBE9EE tones, making it useful for depth, hierarchy, and background variation.

BRIGHT MAROON

Color Characteristics

Mood
Energetic Romantic
Style
Vivid Warm
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #727241
Protanopia #4C4C49
Tritanopia #C22828
Achromatopsia #666666

Frequently Asked Questions

Bright Maroon (#C32148) is a color with RGB(195, 33, 72) and HSL(345.6°, 71.1%, 44.7%).

#C32148 pairs strongly with #21C39C as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#C32148 is suitable for Text, Button, Accent and works well with Vivid, Warm styles.

#C32148 is commonly associated with Energetic, Romantic.

Similar Named Colors
French Raspberry #C72C48 ΔE 2.29
Spanish Carmine #D10047 ΔE 2.36
Pictorial Carmine #C30B4E ΔE 3.28
Utah Crimson #D3003F ΔE 3.77

Code Snippets

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

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

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

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #C32148,
        #21C39C
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #C32148,
        #21C39C
    );
}

// SCSS variable
$bright-maroon: #C32148;

// With RGB channels (useful for rgba() usage)
$bright-maroon-r: 195;
$bright-maroon-g: 33;
$bright-maroon-b: 72;

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