#BF4D75

Accessibility

4.63:1

Vs white / black

4.63:1 · 4.53:1

Sources

Library color

Codes

Formats

HEX

#bf4d75

RGB

rgb(191, 77, 117)

RGBA

rgba(191, 77, 117, 1)

HSL

hsl(339, 47%, 53%)

HSLA

hsla(339, 47%, 53%, 1)

HSV

hsv(339, 60%, 75%)

LAB

lab(49.1% 49.52 0.87)

LCH

lch(49.1% 49.53 1.01)

OKLAB

oklab(0.5808 0.1511 0.0029)

OKLCH

oklch(0.5808 0.1511 1.1)

XYZ

xyz(27.35, 17.67, 18.80)

CMYK

cmyk(0%, 60%, 39%, 25%)

CSS

color: #bf4d75;

CSS variable

--color-bf4d75: #bf4d75;

SCSS

$color-bf4d75: #bf4d75;

JavaScript

const color = "#bf4d75";

TypeScript

const color: string = "#bf4d75";

React

style={{ backgroundColor: "#bf4d75" }}

JSON

{ "hex": "#bf4d75", "rgb": { "r": 191, "g": 77, "b": 117 }, "oklch": "oklch(0.5808 0.1511 1.1)" }

Export

Developer code

css

:root {
  --#bf4d75-1: #bf4d75;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

pink-600

Very different · ΔE 5.77 · #DB2777

Nearest CSS named color

MediumVioletRed

Very different · ΔE 9.57 · #C71585

Nearest Material color

pink-600

Very different · ΔE 7.46 · #D81B60

Nearest Bootstrap color

danger

Very different · ΔE 14.4 · #DC3545

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50ffdcf1 100ffcce4 200ffb3cf 300ff97b8 400ec759c 500cc5981 600ad496b 7008c3855 8006d2840 9004f192c 950340618

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

faf0f4 f4e1e8 efd3dd eac4d1 e4b5c6 dfa6ba da97af d488a3 cf7a98 ca6b8c c45c81 bf4d75 af476b 9f4062 8f3a58 7f334e 6f2d44 60273b 502031 401a27 30131d 200d13 10060a

Palette

Tints

Mixed toward white — soft backgrounds and highlights

faf0f4 f4e1e8 efd3dd eac4d1 e4b5c6 dfa6ba da97af d488a3 cf7a98 ca6b8c c45c81

Palette

Shades

Mixed toward black — depth, text, and emphasis

af476b 9f4062 8f3a58 7f334e 6f2d44 60273b 502031 401a27 30131d 200d13 10060a

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

ba5176 b55677 af5a78 aa5e79 a5627a a0677b 9a6b7b 956f7c 90737d 8b787e 857c7f

Harmony

Complementary

Opposite on the color wheel for contrast

#BF4D75Stop 1 #4FBF98Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#BF4FAFStop 1 #BF4D75Stop 2 #BF604FStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#BF4D75Stop 1 #76BF4FStop 2 #4F76BFStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#BF4D75Stop 1 #4FBF60Stop 2 #4FAFBFStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#4B1B2CStop 1 #832F4DStop 2 #BB446EStop 3 #D07C99Stop 4 #E4B4C5Stop 5

Using this color

Where #bf4d75 works

#BF4D75 (#bf4d75) sits in the red family at about 339° hue, 47% saturation, and 53% lightness. Contrast is 4.63:1 on white and 4.53:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: pink-600 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas
text or icons on charcoal / dark mode

Verify real text sizes in the contrast checker — ratios here are for the raw swatch #bf4d75, not for every tint in the scale.

Family context: Energy, urgency, passion, and excitement. Often used for CTAs, alerts, and brands that want attention. Common uses still include buttons, charts, and accents in the Red range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Web Safe #CC3366#CC3366 Tailwind pink 600#DB2777 Chakra pink 600#D53F8C Material Pink 600#D81B60 Radix Crimson 9#E93D82 Web Safe #CC0066#CC0066 Material Pink 700#C2185B Material Pink 400#EC407A Tailwind pink 700#BE185D Prunus Avium#E84393 Material Pink 500#E91E63 Web Safe #CC6699#CC6699