Named color · #B88F88
Ponder
Ponder is #B88F88: rgb(184 143 136), hsl(9 25% 63%), oklch(0.687 0.051 29.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Ponder color name →
#B88F88
oklch(0.687 0.051 29.6)
Color conversions
- HEX
- #b88f88
- RGB
- rgb(184 143 136)
- HSL
- hsl(9 25% 63%)
- HWB
- hwb(9 53% 28%)
- OKLCH
- oklch(0.687 0.051 29.6)
- OKLab
- oklab(0.687 0.044 0.025)
- CIE Lab
- lab(63.22 15.22 10.01)
- LCH
- lch(63.22 18.21 33.3)
- CMYK
- cmyk(0% 22% 26% 28%)
Tints · Shades · Tones
Tints
- BF9A93
- C6A59F
- CEB0AA
- D5BBB6
- DCC6C2
- E3D1CE
- EADCDA
- F1E8E6
- F8F3F3
Shades
- A07C75
- 886963
- 715752
- 5B4541
- 453431
- 312422
- 1E1513
- 0C0706
- 020101
Tones
- B28E87
- AD8C86
- A78B86
- A28985
- 9C8884
- 978683
- 918583
- 8B8382
- 868281
Color harmonies
Complementary +180°
- B88F88
Ponder
- 75A3AC
≈ Seascape
Analogous -30° +30°
- B88F88
Ponder
- B68E99
≈ Mauve Shadows
- B3937B
≈ Gingerbread Latte
Triadic +120° +240°
- B88F88
Ponder
- 85A48A
≈ Gallery Green
- 8E99BB
≈ Periwinkle Blossom
Split-complementary +150° +210°
- B88F88
Ponder
- 78A59B
≈ Twining Vine
- 7E9FB7
≈ Lake Okoboji
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.86:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.32:1 · APCA Lc 47
Best text color: #000000
WCAG 7.32:1 (AAA) · APCA Lc 47
Contrast pairs
Code snippets
CSS
:root {
--ponder: #b88f88;
--ponder-rgb: 184 143 136;
--ponder-oklch: oklch(0.687 0.051 29.6);
}
.element {
color: var(--ponder);
background-color: hsl(9 25% 63%);
border-color: oklch(0.687 0.051 29.6);
}Tailwind CSS v4
@theme {
--color-ponder: #b88f88;
--color-ponder-50: #fff0ec;
--color-ponder-100: #f9e2dd;
--color-ponder-200: #e9cdc7;
--color-ponder-300: #d0aea7;
--color-ponder-400: #bb948d;
--color-ponder-500: #a57a72;
--color-ponder-600: #8c6761;
--color-ponder-700: #70524d;
--color-ponder-800: #533c39;
--color-ponder-900: #3a2927;
--color-ponder-950: #241715;
}SCSS
$ponder: #b88f88;
$ponder-rgb: 184, 143, 136;
$ponder-light: mix(#fff, $ponder, 20%);
$ponder-dark: mix(#000, $ponder, 20%);
.element {
color: $ponder;
box-shadow: 0 0 0 2px rgba($ponder, 0.35);
}