#B6ABBF

Accessibility

AAA

9.57:1

Vs white / black

2.2:1 · 9.57:1

Sources

Library color

Codes

Formats

HEX

#b6abbf

RGB

rgb(182, 171, 191)

RGBA

rgba(182, 171, 191, 1)

HSL

hsl(273, 14%, 71%)

HSLA

hsla(273, 14%, 71%, 1)

HSV

hsv(273, 10%, 75%)

LAB

lab(71.44% 7.7 -8.78)

LCH

lch(71.44% 11.68 311.25)

OKLAB

oklab(0.7567 0.0198 -0.0235)

OKLCH

oklch(0.7567 0.0307 310.12)

XYZ

xyz(43.26, 42.83, 55.27)

CMYK

cmyk(5%, 10%, 0%, 25%)

CSS

color: #b6abbf;

CSS variable

--color-b6abbf: #b6abbf;

SCSS

$color-b6abbf: #b6abbf;

JavaScript

const color = "#b6abbf";

TypeScript

const color: string = "#b6abbf";

React

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

JSON

{ "hex": "#b6abbf", "rgb": { "r": 182, "g": 171, "b": 191 }, "oklch": "oklch(0.7567 0.0307 310.12)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

zinc-400

Very different · ΔE 8.04 · #A1A1AA

Nearest CSS named color

Thistle

Very different · ΔE 7.9 · #D8BFD8

Nearest Material color

deep-purple-100

Very different · ΔE 8.87 · #D1C4E9

Nearest Bootstrap color

light

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

50f9f2ff 100ece4f2 200d9d0e0 300c3b9cb 400a79db0 5008c8194 600756c7c 7005e5664 80047414c 900322c37 9501d1822

Palette

Tints & shades

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

f9f8fa f3f1f4 edeaef e7e3ea e1dce4 dbd5df d4ceda cec7d4 c8c0cf c2b9ca bcb2c4 b6abbf a79daf 988f9f 89808f 79727f 6a646f 5b5660 4c4750 3d3940 2e2b30 1e1c20 0f0e10

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f9f8fa f3f1f4 edeaef e7e3ea e1dce4 dbd5df d4ceda cec7d4 c8c0cf c2b9ca bcb2c4

Palette

Shades

Mixed toward black — depth, text, and emphasis

a79daf 988f9f 89808f 79727f 6a646f 5b5660 4c4750 3d3940 2e2b30 1e1c20 0f0e10

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

b1a7ba ada4b5 a9a0af a49daa a099a5 9b96a0 97929a 928e95 8e8b90 89878b 858485

Harmony

Complementary

Opposite on the color wheel for contrast

#B6ABBFStop 1 #B4BFABStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#ACABBFStop 1 #B6ABBFStop 2 #BFABBEStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#B6ABBFStop 1 #BFB6ABStop 2 #ABBFB6Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#B6ABBFStop 1 #BEBFABStop 2 #ABBFACStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#342C3AStop 1 #5A4D66Stop 2 #816E91Stop 3 #A799B2Stop 4 #CDC5D3Stop 5

Using this color

Where #b6abbf works

#B6ABBF (#b6abbf) sits in the deep purple family at about 273° hue, 14% saturation, and 71% lightness. Contrast is 2.2:1 on white and 9.57:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: zinc-400 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on charcoal / dark mode

Do not use #b6abbf as small body text on white — 2.2: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: Mystery, ambition, and creativity. Strong for artistic and spiritual associations. Common uses still include buttons, charts, and accents in the Deep Purple 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 Tailwind zinc 400#A1A1AA Material Deep Purple 100#D1C4E9 Tailwind gray 400#9CA3AF Material Indigo 100#C5CAE9 Material You Neutral#938F99 DarkGray#A9A9A9 Material Purple 100#E1BEE7 Tailwind neutral 400#A3A3A3 Material Brown 200#BCAAA4 Material Grey 400#BDBDBD Material Indigo 200#9FA8DA