Named color · #BAB8AD
Zen Pebble
Zen Pebble is #BAB8AD: rgb(186 184 173), hsl(51 9% 70%), oklch(0.781 0.015 98.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Zen Pebble color name →
#BAB8AD
oklch(0.781 0.015 98.3)
Color conversions
- HEX
- #bab8ad
- RGB
- rgb(186 184 173)
- HSL
- hsl(51 9% 70%)
- HWB
- hwb(51 68% 27%)
- OKLCH
- oklch(0.781 0.015 98.3)
- OKLab
- oklab(0.781 -0.002 0.015)
- CIE Lab
- lab(74.71 -0.74 5.87)
- LCH
- lch(74.71 5.92 97.2)
- CMYK
- cmyk(0% 1% 7% 27%)
Tints · Shades · Tones
Tints
- C1BFB5
- C7C6BD
- CECDC5
- D5D4CD
- DCDBD5
- E3E2DE
- EAE9E6
- F1F0EE
- F8F8F7
Shades
- A1A096
- 89887F
- 72716A
- 5C5B55
- 464541
- 32312D
- 1E1E1B
- 0D0C0B
- 020201
Tones
- B4B2A8
- AEADA4
- A8A79F
- A2A19B
- 9D9C96
- 979692
- 91908D
- 8B8B89
- 868584
Color harmonies
Complementary +180°
- BAB8AD
Zen Pebble
- B5B7C2
≈ Dolphin at Play
Analogous -30° +30°
- BAB8AD
Zen Pebble
- BFB6AD
≈ Graceful Grey
- B5BAAF
≈ Keystone Grey
Triadic +120° +240°
- BAB8AD
Zen Pebble
- ADBABE
≈ Lake Placid
- BFB4BB
≈ Blossom Powder
Split-complementary +150° +210°
- BAB8AD
Zen Pebble
- B0B9C1
≈ Adirondack
- BAB5BF
≈ Ash Grove
Tetradic +90° +180° +270°
- BAB8AD
Zen Pebble
- ADBBB9
≈ Watery
- B5B7C2
≈ Dolphin at Play
- C1B4B6
≈ Young Fawn
Contrast & accessibility
Ag
FailOn white
WCAG 1.99:1 · APCA Lc 39
Ag
AAAOn black
WCAG 10.54:1 · APCA Lc 64
Best text color: #000000
WCAG 10.54:1 (AAA) · APCA Lc 64
Contrast pairs
Code snippets
CSS
:root {
--zen-pebble: #bab8ad;
--zen-pebble-rgb: 186 184 173;
--zen-pebble-oklch: oklch(0.781 0.015 98.3);
}
.element {
color: var(--zen-pebble);
background-color: hsl(51 9% 70%);
border-color: oklch(0.781 0.015 98.3);
}Tailwind CSS v4
@theme {
--color-zen-pebble: #bab8ad;
--color-zen-pebble-50: #f6f5f0;
--color-zen-pebble-100: #e9e8e2;
--color-zen-pebble-200: #d5d4cd;
--color-zen-pebble-300: #b9b8af;
--color-zen-pebble-400: #a19f94;
--color-zen-pebble-500: #89867b;
--color-zen-pebble-600: #747268;
--color-zen-pebble-700: #5c5b53;
--color-zen-pebble-800: #44423c;
--color-zen-pebble-900: #2f2e2a;
--color-zen-pebble-950: #1b1b17;
}SCSS
$zen-pebble: #bab8ad;
$zen-pebble-rgb: 186, 184, 173;
$zen-pebble-light: mix(#fff, $zen-pebble, 20%);
$zen-pebble-dark: mix(#000, $zen-pebble, 20%);
.element {
color: $zen-pebble;
box-shadow: 0 0 0 2px rgba($zen-pebble, 0.35);
}