Named color · #DED7DA
Pearl Pebble
Pearl Pebble is #DED7DA: rgb(222 215 218), hsl(334 10% 86%), oklch(0.886 0.009 349.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Pearl Pebble color name →
#DED7DA
oklch(0.886 0.009 349.3)
Color conversions
- HEX
- #ded7da
- RGB
- rgb(222 215 218)
- HSL
- hsl(334 10% 86%)
- HWB
- hwb(334 84% 13%)
- OKLCH
- oklch(0.886 0.009 349.3)
- OKLab
- oklab(0.886 0.008 -0.002)
- CIE Lab
- lab(86.61 2.88 -0.58)
- LCH
- lch(86.61 2.93 348.5)
- CMYK
- cmyk(0% 3% 2% 13%)
Tints · Shades · Tones
Tints
- E1DBDE
- E5DFE1
- E8E3E5
- EBE7E9
- EEEBEC
- F2EFF0
- F5F3F4
- F8F7F8
- FCFBFB
Shades
- C1BBBD
- A59FA2
- 898587
- 6F6B6C
- 555254
- 3D3B3C
- 262525
- 121111
- 020202
Tones
- D4CED1
- CAC5C7
- C1BCBE
- B7B3B5
- AEAAAC
- A4A2A3
- 9B999A
- 929191
- 898889
Color harmonies
Complementary +180°
- DED7DA
Pearl Pebble
- D4DBD8
≈ Urban Mist
Analogous -30° +30°
- DED7DA
Pearl Pebble
- DCD7DD
≈ Pebble Beach
- DFD7D7
≈ Cautious Grey
Triadic +120° +240°
- DED7DA
Pearl Pebble
- D9DAD3
≈ Silver Creek
- D4DADE
≈ Rinse
Split-complementary +150° +210°
- DED7DA
Pearl Pebble
- D6DBD5
≈ Silvery Streak
- D3DBDB
≈ Ripple
Tetradic +90° +180° +270°
- DED7DA
Pearl Pebble
- DCD9D3
≈ First Star
- D4DBD8
≈ Urban Mist
- D6D9DF
≈ Hidden Creek
Contrast & accessibility
Ag
FailOn white
WCAG 1.41:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.83:1 · APCA Lc 83
Best text color: #000000
WCAG 14.83:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--pearl-pebble: #ded7da;
--pearl-pebble-rgb: 222 215 218;
--pearl-pebble-oklch: oklch(0.886 0.009 349.3);
}
.element {
color: var(--pearl-pebble);
background-color: hsl(334 10% 86%);
border-color: oklch(0.886 0.009 349.3);
}Tailwind CSS v4
@theme {
--color-pearl-pebble: #ded7da;
--color-pearl-pebble-50: #f7f4f5;
--color-pearl-pebble-100: #eae7e8;
--color-pearl-pebble-200: #d7d3d4;
--color-pearl-pebble-300: #bbb6b8;
--color-pearl-pebble-400: #a39c9f;
--color-pearl-pebble-500: #8b8487;
--color-pearl-pebble-600: #767072;
--color-pearl-pebble-700: #5e595b;
--color-pearl-pebble-800: #454143;
--color-pearl-pebble-900: #302d2e;
--color-pearl-pebble-950: #1c1a1b;
}SCSS
$pearl-pebble: #ded7da;
$pearl-pebble-rgb: 222, 215, 218;
$pearl-pebble-light: mix(#fff, $pearl-pebble, 20%);
$pearl-pebble-dark: mix(#000, $pearl-pebble, 20%);
.element {
color: $pearl-pebble;
box-shadow: 0 0 0 2px rgba($pearl-pebble, 0.35);
}