Named color · #B2ADA4
Pussywillow
Pussywillow is #B2ADA4: rgb(178 173 164), hsl(39 8% 67%), oklch(0.749 0.014 82.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Pussywillow color name →
#B2ADA4
oklch(0.749 0.014 82.4)
Color conversions
- HEX
- #b2ada4
- RGB
- rgb(178 173 164)
- HSL
- hsl(39 8% 67%)
- HWB
- hwb(39 64% 30%)
- OKLCH
- oklch(0.749 0.014 82.4)
- OKLab
- oklab(0.749 0.002 0.014)
- CIE Lab
- lab(70.95 0.65 5.31)
- LCH
- lch(70.95 5.35 83.1)
- CMYK
- cmyk(0% 3% 8% 30%)
Tints · Shades · Tones
Tints
- B9B5AD
- C1BDB6
- C9C5BF
- D0CDC8
- D8D5D1
- E0DEDA
- E7E6E3
- EFEEEC
- F7F7F6
Shades
- 9A968E
- 837F79
- 6D6A64
- 575550
- 43413D
- 2F2D2B
- 1D1B1A
- 0C0B0A
- 010101
Tones
- ADA8A0
- A8A49D
- A39F99
- 9E9B95
- 999692
- 94928E
- 8F8D8B
- 8A8987
- 858484
Color harmonies
Complementary +180°
- B2ADA4
Pussywillow
- A9AEB7
≈ Northern Light Grey
Analogous -30° +30°
- B2ADA4
Pussywillow
- B5ABA6
≈ Cement Greige
- ADAFA5
≈ Building Block
Triadic +120° +240°
- B2ADA4
Pussywillow
- A4B0B1
≈ Mirror Mirror
- B2ABB3
≈ Endless Slumber
Split-complementary +150° +210°
- B2ADA4
Pussywillow
- A5AFB5
≈ Northern Light Grey
- AEACB6
≈ Lilac Bloom
Tetradic +90° +180° +270°
- B2ADA4
Pussywillow
- A5B1AD
≈ Artful
- A9AEB7
≈ Northern Light Grey
- B5AAAE
≈ Pinch Purple
Contrast & accessibility
Ag
FailOn white
WCAG 2.23:1 · APCA Lc 44
Ag
AAAOn black
WCAG 9.40:1 · APCA Lc 58
Best text color: #000000
WCAG 9.40:1 (AAA) · APCA Lc 58
Contrast pairs
Code snippets
CSS
:root {
--pussywillow: #b2ada4;
--pussywillow-rgb: 178 173 164;
--pussywillow-oklch: oklch(0.749 0.014 82.4);
}
.element {
color: var(--pussywillow);
background-color: hsl(39 8% 67%);
border-color: oklch(0.749 0.014 82.4);
}Tailwind CSS v4
@theme {
--color-pussywillow: #b2ada4;
--color-pussywillow-50: #f7f5f1;
--color-pussywillow-100: #eae7e3;
--color-pussywillow-200: #d7d4ce;
--color-pussywillow-300: #bbb7b0;
--color-pussywillow-400: #a29e95;
--color-pussywillow-500: #8b857c;
--color-pussywillow-600: #757169;
--color-pussywillow-700: #5e5a54;
--color-pussywillow-800: #45423d;
--color-pussywillow-900: #302d2a;
--color-pussywillow-950: #1c1a18;
}SCSS
$pussywillow: #b2ada4;
$pussywillow-rgb: 178, 173, 164;
$pussywillow-light: mix(#fff, $pussywillow, 20%);
$pussywillow-dark: mix(#000, $pussywillow, 20%);
.element {
color: $pussywillow;
box-shadow: 0 0 0 2px rgba($pussywillow, 0.35);
}