Named color · #EDD3D2
Charming Pink
Charming Pink is #EDD3D2: rgb(237 211 210), hsl(2 43% 88%), oklch(0.888 0.029 20.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Charming Pink color name →
#EDD3D2
oklch(0.888 0.029 20.4)
Color conversions
- HEX
- #edd3d2
- RGB
- rgb(237 211 210)
- HSL
- hsl(2 43% 88%)
- HWB
- hwb(2 82% 7%)
- OKLCH
- oklch(0.888 0.029 20.4)
- OKLab
- oklab(0.888 0.027 0.01)
- CIE Lab
- lab(86.73 9.22 3.98)
- LCH
- lch(86.73 10.04 23.3)
- CMYK
- cmyk(0% 11% 11% 7%)
Tints · Shades · Tones
Tints
- EFD7D6
- F1DCDB
- F3E0DF
- F4E4E4
- F6E9E8
- F8EDED
- FAF2F1
- FCF6F6
- FDFBFA
Shades
- CEB7B6
- B09C9B
- 938281
- 776968
- 5C5150
- 423A39
- 2A2424
- 141010
- 030202
Tones
- E2CAC9
- D6C2C1
- CBB9B9
- C0B1B0
- B5A9A8
- AAA0A0
- A09898
- 959090
- 8A8888
Color harmonies
Complementary +180°
- EDD3D2
Charming Pink
- C5E0E2
≈ Wishy-Washy Blue
Analogous -30° +30°
- EDD3D2
Charming Pink
- EAD3DD
≈ Light Favourite Lady
- EBD5C9
≈ Blushing Coconut
Triadic +120° +240°
- EDD3D2
Charming Pink
- D0DFCD
≈ St. Augustine
- CFDBEE
≈ Alaskan Skies
Split-complementary +150° +210°
- EDD3D2
Charming Pink
- C8E1D7
≈ Melting Ice
- C8DEEA
≈ Wind of Change
Tetradic +90° +180° +270°
- EDD3D2
Charming Pink
- DBDCC7
≈ I Miss You
- C5E0E2
≈ Wishy-Washy Blue
- D9D7ED
≈ Sachet Cushion
Contrast & accessibility
Ag
FailOn white
WCAG 1.41:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.84:1 · APCA Lc 83
Best text color: #000000
WCAG 14.84:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--charming-pink: #edd3d2;
--charming-pink-rgb: 237 211 210;
--charming-pink-oklch: oklch(0.888 0.029 20.4);
}
.element {
color: var(--charming-pink);
background-color: hsl(2 43% 88%);
border-color: oklch(0.888 0.029 20.4);
}Tailwind CSS v4
@theme {
--color-charming-pink: #edd3d2;
--color-charming-pink-50: #fdf2f1;
--color-charming-pink-100: #f2e4e3;
--color-charming-pink-200: #e1d0ce;
--color-charming-pink-300: #c6b2b1;
--color-charming-pink-400: #af9897;
--color-charming-pink-500: #997f7e;
--color-charming-pink-600: #816b6b;
--color-charming-pink-700: #675655;
--color-charming-pink-800: #4c3e3e;
--color-charming-pink-900: #352b2b;
--color-charming-pink-950: #201818;
}SCSS
$charming-pink: #edd3d2;
$charming-pink-rgb: 237, 211, 210;
$charming-pink-light: mix(#fff, $charming-pink, 20%);
$charming-pink-dark: mix(#000, $charming-pink, 20%);
.element {
color: $charming-pink;
box-shadow: 0 0 0 2px rgba($charming-pink, 0.35);
}