#F0789C Pale Violet Red
rgb(240, 120, 156)
Color conversions
- HEX
- #F0789C
- RGB
- rgb(240, 120, 156)
- RGBA
- rgba(240, 120, 156, 1)
- HSL
- hsl(342, 80%, 71%)
- HSV / HSB
- hsv(342, 50%, 94%)
- CMYK
- cmyk(0%, 50%, 35%, 6%)
Wide-gamut spaces
- XYZ
- xyz(48.655, 34.363, 35.516)
- LAB
- lab(65.25 49.76 2.41)
- LCH
- lch(65.25 49.82 2.77)
- OKLAB
- oklab(71.99% 0.1512 0.0069)
- OKLCH
- oklch(71.99% 0.1514 2.62)
- 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
#f0789c1a
#f0789c33
#f0789c4d
#f0789c66
#f0789c80
#f0789c99
#f0789cb3
#f0789ccc
#f0789ce6
#f0789cff
Accessibility and contrast
On white
2.67:1
Body text Fail · Large text Fail
On black
7.87:1
Body text AAA · Large text AA
White-on-color contrast is 2.67: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
Warmth and softness, decoupled from its old gendering
Soft pinks lower perceived intensity and read as calm and welcoming. Contemporary design has largely detached pink from mid-century gender coding, using dusty and clay tones as sophisticated warm neutrals.
Affection and care in most markets; in Japan cherry blossom pink carries a specific association with transience and spring.
Pink was considered a masculine colour in eighteenth-century Europe — a diluted, and therefore junior, red. The current coding is a twentieth-century marketing invention, not a tradition.
Excellent for wellness, hospitality, and direct-to-consumer brands wanting warmth without red's urgency. Muted pinks work well as full-page backgrounds where saturated ones would not.
Common industries: Wellness, Hospitality, DTC retail, Beauty, Publishing. Pairs well with deep green for a modern pairing, warm brown for editorial calm, off-white for softness.
Code exports
CSS
:root {
--color-pale-violet-red: #f0789c;
--color-pale-violet-red-rgb: 240 120 156;
--color-pale-violet-red-hsl: 342 80% 71%;
--color-pale-violet-red-oklch: 71.99% 0.1514 2.62;
}
.element {
color: #f0789c;
background-color: hsl(342, 80%, 71%);
border: 1px solid rgb(240 120 156 / 40%);
}SCSS
$pale-violet-red: #f0789c;
$pale-violet-red-light: #f8bcce;
$pale-violet-red-dark: #783c4e;
.element {
color: $pale-violet-red;
background: rgba($pale-violet-red, 0.12);
&:hover {
color: darken($pale-violet-red, 8%);
}
}LESS
@pale-violet-red: #f0789c;
@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: #fce4eb;
--color-pale-violet-red-100: #fbd7e1;
--color-pale-violet-red-200: #f9c9d7;
--color-pale-violet-red-300: #f6aec4;
--color-pale-violet-red-400: #f393b0;
--color-pale-violet-red-500: #f0789c;
--color-pale-violet-red-600: #d86c8c;
--color-pale-violet-red-700: #a8546d;
--color-pale-violet-red-800: #783c4e;
--color-pale-violet-red-900: #48242f;
}
/* 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-[#f0789c]" />Bootstrap
// Bootstrap 5 — _variables.scss (before importing bootstrap)
$pale-violet-red: #f0789c;
$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(0xFFF0789C);
// As a MaterialColor swatch
const MaterialColor paleVioletRedSwatch = MaterialColor(0xFFF0789C, <int, Color>{
50: Color(0xFFFCE4EB),
100: Color(0xFFFBD7E1),
200: Color(0xFFF9C9D7),
300: Color(0xFFF6AEC4),
400: Color(0xFFF393B0),
500: Color(0xFFF0789C),
600: Color(0xFFD86C8C),
700: Color(0xFFA8546D),
800: Color(0xFF783C4E),
900: Color(0xFF48242F),
});Swift / SwiftUI
import SwiftUI
extension Color {
/// #f0789c — Pale Violet Red
static let paleVioletRed = Color(
red: 0.9412,
green: 0.4706,
blue: 0.6118
)
}
// UIKit
extension UIColor {
static let paleVioletRed = UIColor(
red: 0.9412,
green: 0.4706,
blue: 0.6118,
alpha: 1.0
)
}Android
<!-- res/values/colors.xml -->
<resources>
<color name="pale_violet_red">#F0789C</color>
<color name="pale_violet_red_translucent">#80F0789C</color>
</resources>
<!-- Jetpack Compose -->
val PaleVioletRed = Color(0xFFF0789C)JavaScript
export const PALE_VIOLET_RED = {
hex: "#f0789c",
rgb: [240, 120, 156],
hsl: [342, 80, 71],
oklch: "oklch(71.99% 0.1514 2.62)",
};JSON tokens
{
"$schema": "https://design-tokens.org/schema.json",
"pale-violet-red": {
"$type": "color",
"$value": "#f0789c",
"$description": "Pale Violet Red — generated by ColorVerse AI"
}
}