#FFB0DC

Accessibility

AAA

12.5:1

Vs white / black

1.68:1 · 12.5:1

Sources

Library color

Codes

Formats

HEX

#ffb0dc

RGB

rgb(255, 176, 220)

RGBA

rgba(255, 176, 220, 1)

HSL

hsl(327, 100%, 85%)

HSLA

hsla(327, 100%, 85%, 1)

HSV

hsv(327, 31%, 100%)

LAB

lab(80.45% 35.12 -10.43)

LCH

lch(80.45% 36.64 343.46)

OKLAB

oklab(0.8452 0.1033 -0.0274)

OKLCH

oklch(0.8452 0.1069 345.14)

XYZ

xyz(69.68, 57.48, 75.12)

CMYK

cmyk(0%, 31%, 14%, 0%)

CSS

color: #ffb0dc;

CSS variable

--color-ffb0dc: #ffb0dc;

SCSS

$color-ffb0dc: #ffb0dc;

JavaScript

const color = "#ffb0dc";

TypeScript

const color: string = "#ffb0dc";

React

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

JSON

{ "hex": "#ffb0dc", "rgb": { "r": 255, "g": 176, "b": 220 }, "oklch": "oklch(0.8452 0.1069 345.14)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

pink-300

Similar · ΔE 1.89 · #F9A8D4

Nearest CSS named color

Plum

Very different · ΔE 8.29 · #DDA0DD

Nearest Material color

pink-100

Very different · ΔE 6.23 · #F8BBD0

Nearest Bootstrap color

light

Very different · ΔE 24.45 · #F8F9FA

OKLCH

Perceptual 50–950 scale

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

50ffe4ff 100ffd6f3 200fdbfe1 300eaa5cc 400d186b1 500b46b95 60097587d 7007a4564 8005e334c 900442236 9502b0f20

Palette

Tints & shades

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

fff8fc fff2f9 ffebf6 ffe5f3 ffdef0 ffd8ee ffd1eb ffcae8 ffc4e5 ffbde2 ffb7df ffb0dc eaa1ca d593b7 bf84a5 aa7593 956780 80586e 6a495c 553b49 402c37 2a1d25 150f12

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fff8fc fff2f9 ffebf6 ffe5f3 ffdef0 ffd8ee ffd1eb ffcae8 ffc4e5 ffbde2 ffb7df

Palette

Shades

Mixed toward black — depth, text, and emphasis

eaa1ca d593b7 bf84a5 aa7593 956780 80586e 6a495c 553b49 402c37 2a1d25 150f12

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

f4acd4 eaa8cd dfa4c5 d5a0bd ca9cb6 c098ae b594a6 aa909f a08c97 95888f 8b8488

Harmony

Complementary

Opposite on the color wheel for contrast

#FFB0DCStop 1 #B3FFD5Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#FBB3FFStop 1 #FFB0DCStop 2 #FFB3B6Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#FFB0DCStop 1 #DDFFB3Stop 2 #B3DDFFStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#FFB0DCStop 1 #B6FFB3Stop 2 #B3FFFBStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#660038Stop 1 #B30062Stop 2 #FF008CStop 3 #FF4DAFStop 4 #FF99D1Stop 5

Using this color

Where #ffb0dc works

#FFB0DC (#ffb0dc) sits in the red family at about 327° hue, 100% saturation, and 85% lightness. Contrast is 1.68:1 on white and 12.5:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: pink-300 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

subtle surfaces, chips, and table stripes
text or icons on charcoal / dark mode

Do not use #ffb0dc as small body text on white — 1.68:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

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

Tailwind pink 300#F9A8D4 Web Safe #FF99CC#FF99CC Material Pink 100#F8BBD0 Web Safe #FFCCFF#FFCCFF Plum#DDA0DD Tailwind pink 200#FBCFE8 Material Purple 100#E1BEE7 Material Pink 200#F48FB1 Pink#FFC0CB LightPink#FFB6C1 Tailwind fuchsia 300#F0ABFC Chakra pink 400#F687B3