#D0BBD0

Accessibility

AAA

11.7:1

Vs white / black

1.79:1 · 11.7:1

Sources

Library color

Codes

Formats

HEX

#d0bbd0

RGB

rgb(208, 187, 208)

RGBA

rgba(208, 187, 208, 1)

HSL

hsl(300, 18%, 77%)

HSLA

hsla(300, 18%, 77%, 1)

HSV

hsv(300, 10%, 82%)

LAB

lab(78.17% 11.16 -7.82)

LCH

lch(78.17% 13.63 324.98)

OKLAB

oklab(0.8161 0.0307 -0.0208)

OKLCH

oklch(0.8161 0.0371 325.88)

XYZ

xyz(55.17, 53.51, 67.08)

CMYK

cmyk(0%, 10%, 0%, 18%)

CSS

color: #d0bbd0;

CSS variable

--color-d0bbd0: #d0bbd0;

SCSS

$color-d0bbd0: #d0bbd0;

JavaScript

const color = "#d0bbd0";

TypeScript

const color: string = "#d0bbd0";

React

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

JSON

{ "hex": "#d0bbd0", "rgb": { "r": 208, "g": 187, "b": 208 }, "oklch": "oklch(0.8161 0.0371 325.88)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

pink-200

Very different · ΔE 8.78 · #FBCFE8

Nearest CSS named color

Thistle

Noticeably different · ΔE 2.19 · #D8BFD8

Nearest Material color

deep-purple-100

Very different · ΔE 6.3 · #D1C4E9

Nearest Bootstrap color

light

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

50fef0fd 100f1e3f1 200dfcedf 300c9b7c9 400ae9aae 500927f92 6007b6a7b 700625462 8004b3f4b 900352c35 950201720

Palette

Tints & shades

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

fbf9fb f7f4f7 f3eef3 efe8ef ebe3eb e8dde8 e4d7e4 e0d2e0 dcccdc d8c6d8 d4c1d4 d0bbd0 bfabbf ad9cad 9c8c9c 8b7d8b 796d79 685e68 574e57 453e45 342f34 231f23 111011

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fbf9fb f7f4f7 f3eef3 efe8ef ebe3eb e8dde8 e4d7e4 e0d2e0 dcccdc d8c6d8 d4c1d4

Palette

Shades

Mixed toward black — depth, text, and emphasis

bfabbf ad9cad 9c8c9c 8b7d8b 796d79 685e68 574e57 453e45 342f34 231f23 111011

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

c9b6c9 c3b1c3 bcacbc b5a7b5 afa2af a89ea8 a199a1 9b949b 948f94 8d8a8d 878587

Harmony

Complementary

Opposite on the color wheel for contrast

#D0BBD0Stop 1 #BACFBAStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#C4BACFStop 1 #D0BBD0Stop 2 #CFBAC4Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#D0BBD0Stop 1 #CFCFBAStop 2 #BACFCFStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#D0BBD0Stop 1 #C4CFBAStop 2 #BACFC4Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#3C2A3CStop 1 #694969Stop 2 #966996Stop 3 #B696B6Stop 4 #D5C3D5Stop 5

Using this color

Where #d0bbd0 works

#D0BBD0 (#d0bbd0) sits in the pink family at about 300° hue, 18% saturation, and 77% lightness. Contrast is 1.79:1 on white and 11.7:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: pink-200 (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 #d0bbd0 as small body text on white — 1.79: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: Compassion, playfulness, and romance. Popular in beauty, lifestyle, and youth-focused products. Common uses still include buttons, charts, and accents in the Pink range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Thistle#D8BFD8 Material Deep Purple 100#D1C4E9 Material Purple 100#E1BEE7 Tailwind pink 200#FBCFE8 Tailwind purple 200#E9D5FF Tailwind violet 200#DDD6FE Material Purple 50#F3E5F5 Tailwind fuchsia 200#F5D0FE Tailwind fuchsia 100#FAE8FF Material Pink 100#F8BBD0 Tailwind purple 100#F3E8FF Material Indigo 100#C5CAE9