Named color · #ECDFD8
Touchable Pink
Touchable Pink is #ECDFD8: rgb(236 223 216), hsl(21 34% 89%), oklch(0.912 0.017 50.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Touchable Pink color name →
#ECDFD8
oklch(0.912 0.017 50.4)
Color conversions
- HEX
- #ecdfd8
- RGB
- rgb(236 223 216)
- HSL
- hsl(21 34% 89%)
- HWB
- hwb(21 85% 7%)
- OKLCH
- oklch(0.912 0.017 50.4)
- OKLab
- oklab(0.912 0.011 0.013)
- CIE Lab
- lab(89.73 3.72 5.12)
- LCH
- lch(89.73 6.32 54)
- CMYK
- cmyk(0% 6% 8% 7%)
Tints · Shades · Tones
Tints
- EEE2DC
- F0E5E0
- F2E9E4
- F4ECE7
- F6EFEB
- F7F2EF
- F9F5F3
- FBF9F7
- FDFCFB
Shades
- CDC2BC
- AFA5A0
- 928A85
- 766F6B
- 5B5653
- 423D3B
- 292725
- 131211
- 030202
Tones
- E1D5CF
- D5CBC6
- CAC2BD
- BFB8B4
- B5AEAB
- AAA5A2
- 9F9B9A
- 959291
- 8A8988
Color harmonies
Complementary +180°
- ECDFD8
Touchable Pink
- D7E4EB
≈ Ethereal Moonlight
Analogous -30° +30°
- ECDFD8
Touchable Pink
- EDDEDD
≈ Echoes of Love
- E8E1D6
≈ Dagger Moth
Triadic +120° +240°
- ECDFD8
Touchable Pink
- D7E6E0
≈ Blush Mint
- E1E0ED
≈ Homoeopathic Lilac
Split-complementary +150° +210°
- ECDFD8
Touchable Pink
- D6E6E6
≈ Interdimensional Portal
- DBE2EE
≈ Vaguely Violet
Tetradic +90° +180° +270°
- ECDFD8
Touchable Pink
- DCE5DA
≈ Mineral White
- D7E4EB
≈ Ethereal Moonlight
- E7DEE9
≈ Faint Fuchsia
Contrast & accessibility
Ag
FailOn white
WCAG 1.30:1 · APCA Lc 15
Ag
AAAOn black
WCAG 16.11:1 · APCA Lc 89
Best text color: #000000
WCAG 16.11:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--touchable-pink: #ecdfd8;
--touchable-pink-rgb: 236 223 216;
--touchable-pink-oklch: oklch(0.912 0.017 50.4);
}
.element {
color: var(--touchable-pink);
background-color: hsl(21 34% 89%);
border-color: oklch(0.912 0.017 50.4);
}Tailwind CSS v4
@theme {
--color-touchable-pink: #ecdfd8;
--color-touchable-pink-50: #f9f4f1;
--color-touchable-pink-100: #ede6e3;
--color-touchable-pink-200: #dbd2ce;
--color-touchable-pink-300: #bfb5af;
--color-touchable-pink-400: #a79c96;
--color-touchable-pink-500: #90837c;
--color-touchable-pink-600: #7a6f69;
--color-touchable-pink-700: #625954;
--color-touchable-pink-800: #48413d;
--color-touchable-pink-900: #322d2a;
--color-touchable-pink-950: #1e1a18;
}SCSS
$touchable-pink: #ecdfd8;
$touchable-pink-rgb: 236, 223, 216;
$touchable-pink-light: mix(#fff, $touchable-pink, 20%);
$touchable-pink-dark: mix(#000, $touchable-pink, 20%);
.element {
color: $touchable-pink;
box-shadow: 0 0 0 2px rgba($touchable-pink, 0.35);
}