African Violet

HEX: #B284BE | Modern Palette

On White
3.03:1
FAIL
On Black
6.94:1
PASS

Color Specifications

HEX
#B284BE
RGB
178, 132, 190
HSL
287°, 30% ,74%
CMYK
6.32, 30.53, 0, 25.49

About African Violet

African Violet (#B284BE) is a color with RGB(178, 132, 190) and HSL(287.59°, 30.53%, 74.51%). In design, it fits Pastel styles and is suitable for Text, Print. Its complementary color is #90BE84, which creates strong contrast. Its triadic palette includes #BEB284 and #84BEB2. The name comes from Saintpaulia (Latin).

  • HEX: #B284BE
  • RGB: 178, 132, 190
  • HSL: 287.59°, 30.53%, 74.51%
  • Style: Pastel
  • Use case: Text, Print
  • Complementary color: #90BE84
  • Triadic colors: #BEB284, #84BEB2
  • The name comes from Saintpaulia (Latin).

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 #B284BE from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Pastel
Use case
Text Print

Accessibility Simulation

Deuteranopia #9393BD
Protanopia #8A8ABE
Tritanopia #AB8D8D
Achromatopsia #949494

Frequently Asked Questions

African Violet (#B284BE) is a color with RGB(178, 132, 190) and HSL(287.59°, 30.53%, 74.51%).

#B284BE pairs strongly with #90BE84 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#B284BE is suitable for Text, Print and works well with Pastel styles.

The name African Violet is linked to Saintpaulia from Latin, meaning Named after Walter von Saint Paul-Illaire.

Name, History & Etymology

Origin Word Saintpaulia
Meaning Named after Walter von Saint Paul-Illaire
Language Latin
First Recorded Use Late 19th Century

History

The African Violet (Saintpaulia) was first 'discovered' by Baron Walter von Saint Paul-Illaire in 1892 in what was then German East Africa (modern-day Tanzania). He sent seeds to his father in Germany, who then passed them to a botanist, Hermann Wendland, who officially described the plant. It quickly gained popularity as an indoor houseplant due to its relatively easy care and beautiful, long-lasting flowers. The color 'African Violet' (#b284be) specifically refers to the typical purple-pink hue of many popular varieties of the flower.

First Recorded Use

1892

Cultural Associations

African Violets are one of the most popular houseplants worldwide. They are often associated with domesticity, beauty, and a touch of elegance. Their relatively small size and vibrant colors make them a common gift and a staple in many homes. They are also known for their ability to bloom almost continuously under proper conditions, making them a symbol of enduring beauty.

Similar Named Colors
Purple Mountain's Majesty #9D81BA ΔE 4.90
Lenurple #BA93D8 ΔE 5.71
Lavender Purple #967BB6 ΔE 6.59
Opera Mauve #B784A7 ΔE 6.88

Code Snippets

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

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

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

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

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #B284BE,
        #B2D2AA
    );
}

// SCSS variable
$african-violet: #B284BE;

// With RGB channels (useful for rgba() usage)
$african-violet-r: 178;
$african-violet-g: 132;
$african-violet-b: 190;

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