#BD2E75

Accessibility

5.51:1

Vs white / black

5.51:1 · 3.81:1

Sources

Library color

Codes

Formats

HEX

#bd2e75

RGB

rgb(189, 46, 117)

RGBA

rgba(189, 46, 117, 1)

HSL

hsl(330, 61%, 46%)

HSLA

hsla(330, 61%, 46%, 1)

HSV

hsv(330, 76%, 74%)

LAB

lab(44.32% 61.11 -6.2)

LCH

lch(44.32% 61.42 354.21)

OKLAB

oklab(0.5448 0.1877 -0.0156)

OKLCH

oklch(0.5448 0.1883 355.25)

XYZ

xyz(25.18, 14.06, 18.21)

CMYK

cmyk(0%, 76%, 38%, 26%)

CSS

color: #bd2e75;

CSS variable

--color-bd2e75: #bd2e75;

SCSS

$color-bd2e75: #bd2e75;

JavaScript

const color = "#bd2e75";

TypeScript

const color: string = "#bd2e75";

React

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

JSON

{ "hex": "#bd2e75", "rgb": { "r": 189, "g": 46, "b": 117 }, "oklch": "oklch(0.5448 0.1883 355.25)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

pink-700

Very different · ΔE 5.61 · #BE185D

Nearest CSS named color

MediumVioletRed

Noticeably different · ΔE 4.11 · #C71585

Nearest Material color

pink-700

Very different · ΔE 6.42 · #C2185B

Nearest Bootstrap color

danger

Very different · ΔE 18.07 · #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.

50ffd5f9 100ffc5ec 200ffaad9 300ff8cc3 400f766a7 500d7498b 600b63b75 700942c5d 800731d47 900541031 95038001d

Palette

Tints & shades

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

faeef4 f4dce8 efcbdd e9b9d1 e4a8c6 de97ba d985af d374a3 ce6298 c8518c c33f81 bd2e75 ad2a6b 9e2662 8e2358 7e1f4e 6e1b44 5f173b 4f1331 3f0f27 2f0c1d 1f0813 10040a

Palette

Tints

Mixed toward white — soft backgrounds and highlights

faeef4 f4dce8 efcbdd e9b9d1 e4a8c6 de97ba d985af d374a3 ce6298 c8518c c33f81

Palette

Shades

Mixed toward black — depth, text, and emphasis

ad2a6b 9e2662 8e2358 7e1f4e 6e1b44 5f173b 4f1331 3f0f27 2f0c1d 1f0813 10040a

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

b83576 b33c77 ae4378 a94979 a4507a 9f577b 995e7b 94657c 8f6c7d 8a727e 85797f

Harmony

Complementary

Opposite on the color wheel for contrast

#BD2E75Stop 1 #2EBD75Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#BD2EBDStop 1 #BD2E75Stop 2 #BD2E2EStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#BD2E75Stop 1 #75BD2EStop 2 #2E75BDStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#BD2E75Stop 1 #2EBD2EStop 2 #2EBDBDStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#521433Stop 1 #902359Stop 2 #CD3280Stop 3 #DC6FA6Stop 4 #EBADCCStop 5

Using this color

Where #bd2e75 works

#BD2E75 (#bd2e75) sits in the red family at about 330° hue, 61% saturation, and 46% lightness. Contrast is 5.51:1 on white and 3.81:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: pink-700 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

primary buttons and key accents
text or icons on a white canvas

On a black or near-black UI, #bd2e75 is 3.81:1. Prefer it as a fill, border, or large heading rather than 16px copy.

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

MediumVioletRed#C71585 Web Safe #CC0066#CC0066 Tailwind pink 700#BE185D Tailwind pink 600#DB2777 Material Pink 700#C2185B Web Safe #CC3366#CC3366 Web Safe #993366#993366 Material Pink 800#AD1457 Chakra pink 600#D53F8C Web Safe #CC3399#CC3399 Web Safe #CC0099#CC0099 Material Pink 600#D81B60