#E883BB Pale Violet Red
rgb(232, 131, 187)
Color conversions
- HEX
- #E883BB
- RGB
- rgb(232, 131, 187)
- RGBA
- rgba(232, 131, 187, 1)
- HSL
- hsl(327, 69%, 71%)
- HSV / HSB
- hsv(327, 44%, 91%)
- CMYK
- cmyk(0%, 44%, 19%, 9%)
Wide-gamut spaces
- XYZ
- xyz(50.366, 36.98, 51.489)
- LAB
- lab(67.26 45.72 -12.26)
- LCH
- lch(67.26 47.34 344.99)
- OKLAB
- oklab(73.59% 0.1362 -0.0322)
- OKLCH
- oklch(73.59% 0.1399 346.7)
- Nearest name
- Pale Violet Red
Shades, tints and tones
Color harmonies
The hue directly opposite on the color wheel. Maximum contrast, ideal for a single accent against a dominant brand color.
Neighbouring hues that share a temperature. The safest harmony for calm, cohesive interfaces.
Three hues evenly spaced 120 degrees apart. Vibrant and balanced — use one as dominant and the other two sparingly.
The complement split into two adjacent hues. Nearly the contrast of complementary with noticeably less tension.
Four hues at 90-degree intervals. A rich set for illustration, data visualisation, and category coding.
Two complementary pairs offset by 60 degrees. Gives two warm and two cool options in one system.
Similar colors
Opacity variations
#e883bb1a
#e883bb33
#e883bb4d
#e883bb66
#e883bb80
#e883bb99
#e883bbb3
#e883bbcc
#e883bbe6
#e883bbff
Accessibility and contrast
On white
2.5:1
Body text Fail · Large text Fail
On black
8.4:1
Body text AAA · Large text AA
White-on-color contrast is 2.5:1.
Color blindness preview
Protanopia
No red cones — ~1% of men
Protanomaly
Reduced red sensitivity — ~1% of men
Deuteranopia
No green cones — ~1% of men
Deuteranomaly
Reduced green sensitivity — ~5% of men
Tritanopia
No blue cones — very rare
Tritanomaly
Reduced blue sensitivity — very rare
Achromatopsia
No color perception — ~1 in 30,000
Achromatomaly
Partial color perception — rare
Meaning, psychology and brand usage
Confident, contemporary, impossible to ignore
Magenta has no single wavelength — the brain constructs it — and that unusual quality is part of why it feels synthetic and current. It signals boldness and non-conformity without red's aggression.
Modernity, playfulness, and inclusivity in contemporary Western design; historically associated with fashion and print.
Named after the 1859 Battle of Magenta, the dye arrived alongside mauveine in the first wave of synthetic colours. It is one of the four process inks in CMYK printing.
Works as a high-impact accent or a brave primary in fashion, telecom, and culture. Needs generous white space; at scale it fatigues the eye quickly.
Common industries: Fashion, Telecom, Music, Culture, Beauty. Pairs well with deep indigo for depth, cream for softness, charcoal for editorial contrast.
Code exports
CSS
:root {
--color-pale-violet-red: #e883bb;
--color-pale-violet-red-rgb: 232 131 187;
--color-pale-violet-red-hsl: 327 69% 71%;
--color-pale-violet-red-oklch: 73.59% 0.1399 346.7;
}
.element {
color: #e883bb;
background-color: hsl(327, 69%, 71%);
border: 1px solid rgb(232 131 187 / 40%);
}SCSS
$pale-violet-red: #e883bb;
$pale-violet-red-light: #f4c1dd;
$pale-violet-red-dark: #74425e;
.element {
color: $pale-violet-red;
background: rgba($pale-violet-red, 0.12);
&:hover {
color: darken($pale-violet-red, 8%);
}
}LESS
@pale-violet-red: #e883bb;
@pale-violet-red-light: lighten(@pale-violet-red, 12%);
@pale-violet-red-dark: darken(@pale-violet-red, 12%);
.element {
color: @pale-violet-red;
background: fade(@pale-violet-red, 12%);
}Tailwind CSS
/* Tailwind v4 — src/styles.css */
@theme {
--color-pale-violet-red-50: #fae6f1;
--color-pale-violet-red-100: #f8daeb;
--color-pale-violet-red-200: #f6cde4;
--color-pale-violet-red-300: #f1b5d6;
--color-pale-violet-red-400: #ed9cc9;
--color-pale-violet-red-500: #e883bb;
--color-pale-violet-red-600: #d176a8;
--color-pale-violet-red-700: #a25c83;
--color-pale-violet-red-800: #74425e;
--color-pale-violet-red-900: #462738;
}
/* Usage */
<div class="bg-pale-violet-red-500 text-pale-violet-red-50 ring-pale-violet-red-600" />
/* Arbitrary value, no config needed */
<div class="bg-[#e883bb]" />Bootstrap
// Bootstrap 5 — _variables.scss (before importing bootstrap)
$pale-violet-red: #e883bb;
$primary: $pale-violet-red;
$theme-colors: map-merge($theme-colors, (
"pale-violet-red": $pale-violet-red
));
// Generates .text-pale-violet-red, .bg-pale-violet-red, .btn-pale-violet-red
@import "bootstrap/scss/bootstrap";Flutter
import 'package:flutter/material.dart';
const Color paleVioletRed = Color(0xFFE883BB);
// As a MaterialColor swatch
const MaterialColor paleVioletRedSwatch = MaterialColor(0xFFE883BB, <int, Color>{
50: Color(0xFFFAE6F1),
100: Color(0xFFF8DAEB),
200: Color(0xFFF6CDE4),
300: Color(0xFFF1B5D6),
400: Color(0xFFED9CC9),
500: Color(0xFFE883BB),
600: Color(0xFFD176A8),
700: Color(0xFFA25C83),
800: Color(0xFF74425E),
900: Color(0xFF462738),
});Swift / SwiftUI
import SwiftUI
extension Color {
/// #e883bb — Pale Violet Red
static let paleVioletRed = Color(
red: 0.9098,
green: 0.5137,
blue: 0.7333
)
}
// UIKit
extension UIColor {
static let paleVioletRed = UIColor(
red: 0.9098,
green: 0.5137,
blue: 0.7333,
alpha: 1.0
)
}Android
<!-- res/values/colors.xml -->
<resources>
<color name="pale_violet_red">#E883BB</color>
<color name="pale_violet_red_translucent">#80E883BB</color>
</resources>
<!-- Jetpack Compose -->
val PaleVioletRed = Color(0xFFE883BB)JavaScript
export const PALE_VIOLET_RED = {
hex: "#e883bb",
rgb: [232, 131, 187],
hsl: [327, 69, 71],
oklch: "oklch(73.59% 0.1399 346.7)",
};JSON tokens
{
"$schema": "https://design-tokens.org/schema.json",
"pale-violet-red": {
"$type": "color",
"$value": "#e883bb",
"$description": "Pale Violet Red — generated by ColorVerse AI"
}
}