Named color · #D5C6D6
Tender Touch
Tender Touch is #D5C6D6: rgb(213 198 214), hsl(296 16% 81%), oklch(0.844 0.027 323.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Tender Touch color name →
#D5C6D6
oklch(0.844 0.027 323.9)
Color conversions
- HEX
- #d5c6d6
- RGB
- rgb(213 198 214)
- HSL
- hsl(296 16% 81%)
- HWB
- hwb(296 78% 16%)
- OKLCH
- oklch(0.844 0.027 323.9)
- OKLab
- oklab(0.844 0.022 -0.016)
- CIE Lab
- lab(81.49 7.55 -6.01)
- LCH
- lch(81.49 9.65 321.5)
- CMYK
- cmyk(0% 7% 0% 16%)
Tints · Shades · Tones
Tints
- D9CCDA
- DDD1DE
- E2D7E2
- E6DDE6
- EAE2EA
- EEE8EE
- F2EEF3
- F7F3F7
- FBF9FB
Shades
- B9ACBA
- 9E929E
- 837A84
- 6A626A
- 514B52
- 3A353B
- 242125
- 100E10
- 020202
Tones
- CCBFCD
- C3B8C4
- BBB0BB
- B2A9B3
- AAA2AA
- A19BA1
- 999499
- 908E91
- 888788
Color harmonies
Complementary +180°
- D5C6D6
Tender Touch
- C1D1C1
≈ Opaline
Analogous -30° +30°
- D5C6D6
Tender Touch
- CCC9DC
≈ Gregorio Garden
- DBC5CD
≈ Mauve Organdie
Triadic +120° +240°
- D5C6D6
Tender Touch
- D4CBB8
≈ Unmarked Trail
- B8D1D4
≈ Relax
Split-complementary +150° +210°
- D5C6D6
Tender Touch
- CBCEBA
≈ Morning Zen
- BAD2CA
≈ Moon Glass
Tetradic +90° +180° +270°
- D5C6D6
Tender Touch
- DBC7BB
≈ Winter Savanna
- C1D1C1
≈ Opaline
- BBCFDB
≈ Constellation
Contrast & accessibility
Ag
FailOn white
WCAG 1.63:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.87:1 · APCA Lc 75
Best text color: #000000
WCAG 12.87:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--tender-touch: #d5c6d6;
--tender-touch-rgb: 213 198 214;
--tender-touch-oklch: oklch(0.844 0.027 323.9);
}
.element {
color: var(--tender-touch);
background-color: hsl(296 16% 81%);
border-color: oklch(0.844 0.027 323.9);
}Tailwind CSS v4
@theme {
--color-tender-touch: #d5c6d6;
--color-tender-touch-50: #f9f3f9;
--color-tender-touch-100: #ede5ed;
--color-tender-touch-200: #dbd0db;
--color-tender-touch-300: #bfb3bf;
--color-tender-touch-400: #a799a8;
--color-tender-touch-500: #908091;
--color-tender-touch-600: #796d7a;
--color-tender-touch-700: #615762;
--color-tender-touch-800: #473f48;
--color-tender-touch-900: #312c32;
--color-tender-touch-950: #1d191e;
}SCSS
$tender-touch: #d5c6d6;
$tender-touch-rgb: 213, 198, 214;
$tender-touch-light: mix(#fff, $tender-touch, 20%);
$tender-touch-dark: mix(#000, $tender-touch, 20%);
.element {
color: $tender-touch;
box-shadow: 0 0 0 2px rgba($tender-touch, 0.35);
}