Named color · #D9D1BA
Bleached Pebble
Bleached Pebble is #D9D1BA: rgb(217 209 186), hsl(45 29% 79%), oklch(0.861 0.032 91). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Bleached Pebble color name →
#D9D1BA
oklch(0.861 0.032 91)
Color conversions
- HEX
- #d9d1ba
- RGB
- rgb(217 209 186)
- HSL
- hsl(45 29% 79%)
- HWB
- hwb(45 73% 15%)
- OKLCH
- oklch(0.861 0.032 91)
- OKLab
- oklab(0.861 -0.001 0.032)
- CIE Lab
- lab(84.03 0.01 12.5)
- LCH
- lch(84.03 12.5 89.9)
- CMYK
- cmyk(0% 4% 14% 15%)
Tints · Shades · Tones
Tints
- DDD6C1
- E1DAC8
- E4DFCE
- E8E3D5
- ECE8DC
- F0ECE3
- F3F1EA
- F7F6F1
- FBFAF8
Shades
- BCB5A1
- A19B89
- 868172
- 6C685C
- 535046
- 3B3932
- 25231E
- 11100D
- 020202
Tones
- D0C9B4
- C7C0AE
- BDB8A8
- B4B0A2
- ABA89D
- A3A097
- 9A9891
- 91908B
- 888886
Color harmonies
Complementary +180°
- D9D1BA
Bleached Pebble
- C9D1E7
≈ Arctic Glow
Analogous -30° +30°
- D9D1BA
Bleached Pebble
- E2CDBD
≈ Safari Map
- CED5BE
≈ Green Frost
Triadic +120° +240°
- D9D1BA
Bleached Pebble
- BAD7DD
≈ Light Sky Chase
- DECADB
≈ Lilac Lane
Split-complementary +150° +210°
- D9D1BA
Bleached Pebble
- BFD5E5
≈ Light Ridge Light
- D5CDE4
≈ Potentially Purple
Tetradic +90° +180° +270°
- D9D1BA
Bleached Pebble
- BBD9D2
≈ High Point
- C9D1E7
≈ Arctic Glow
- E5C9D0
≈ Perfume Cloud
Contrast & accessibility
Ag
FailOn white
WCAG 1.52:1 · APCA Lc 24
Ag
AAAOn black
WCAG 13.77:1 · APCA Lc 79
Best text color: #000000
WCAG 13.77:1 (AAA) · APCA Lc 79
Contrast pairs
Code snippets
CSS
:root {
--bleached-pebble: #d9d1ba;
--bleached-pebble-rgb: 217 209 186;
--bleached-pebble-oklch: oklch(0.861 0.032 91);
}
.element {
color: var(--bleached-pebble);
background-color: hsl(45 29% 79%);
border-color: oklch(0.861 0.032 91);
}Tailwind CSS v4
@theme {
--color-bleached-pebble: #d9d1ba;
--color-bleached-pebble-50: #f8f5eb;
--color-bleached-pebble-100: #ebe8dc;
--color-bleached-pebble-200: #d9d4c5;
--color-bleached-pebble-300: #bdb7a5;
--color-bleached-pebble-400: #a59e89;
--color-bleached-pebble-500: #8e866e;
--color-bleached-pebble-600: #78715d;
--color-bleached-pebble-700: #605b4b;
--color-bleached-pebble-800: #474236;
--color-bleached-pebble-900: #312e25;
--color-bleached-pebble-950: #1d1a13;
}SCSS
$bleached-pebble: #d9d1ba;
$bleached-pebble-rgb: 217, 209, 186;
$bleached-pebble-light: mix(#fff, $bleached-pebble, 20%);
$bleached-pebble-dark: mix(#000, $bleached-pebble, 20%);
.element {
color: $bleached-pebble;
box-shadow: 0 0 0 2px rgba($bleached-pebble, 0.35);
}