Named color · #D1AFB7
Iced Watermelon
Iced Watermelon is #D1AFB7: rgb(209 175 183), hsl(346 27% 75%), oklch(0.786 0.041 2.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Iced Watermelon color name →
#D1AFB7
oklch(0.786 0.041 2.2)
Color conversions
- HEX
- #d1afb7
- RGB
- rgb(209 175 183)
- HSL
- hsl(346 27% 75%)
- HWB
- hwb(346 69% 18%)
- OKLCH
- oklch(0.786 0.041 2.2)
- OKLab
- oklab(0.786 0.041 0.002)
- CIE Lab
- lab(74.69 13.67 0.75)
- LCH
- lch(74.69 13.69 3.1)
- CMYK
- cmyk(0% 16% 12% 18%)
Tints · Shades · Tones
Tints
- D6B7BE
- DABFC5
- DFC7CC
- E4CED3
- E8D6DA
- EDDEE2
- F1E7E9
- F6EFF0
- FBF7F8
Shades
- B5989F
- 9B8187
- 816B70
- 68565A
- 504145
- 392E31
- 231C1E
- 100B0C
- 020102
Tones
- C9AAB1
- C0A5AC
- B8A1A6
- B09CA1
- A8979B
- A09396
- 988E90
- 90898B
- 888585
Color harmonies
Complementary +180°
- D1AFB7
Iced Watermelon
- 9DC2BB
≈ Pitter Patter
Analogous -30° +30°
- D1AFB7
Iced Watermelon
- CAB0C5
≈ Runic Mauve
- D2B0A9
≈ Garden Snail
Triadic +120° +240°
- D1AFB7
Iced Watermelon
- B4BEA1
≈ Dried Chervil
- A3BDD2
≈ Angel Falls
Split-complementary +150° +210°
- D1AFB7
Iced Watermelon
- A7C1AD
≈ Young Gecko
- 9CC1C9
≈ Stratosphere
Tetradic +90° +180° +270°
- D1AFB7
Iced Watermelon
- C2B99C
≈ Good to Grow
- 9DC2BB
≈ Pitter Patter
- B0B8D4
≈ Hundred Waters
Contrast & accessibility
Ag
FailOn white
WCAG 1.99:1 · APCA Lc 39
Ag
AAAOn black
WCAG 10.52:1 · APCA Lc 64
Best text color: #000000
WCAG 10.52:1 (AAA) · APCA Lc 64
Contrast pairs
Code snippets
CSS
:root {
--iced-watermelon: #d1afb7;
--iced-watermelon-rgb: 209 175 183;
--iced-watermelon-oklch: oklch(0.786 0.041 2.2);
}
.element {
color: var(--iced-watermelon);
background-color: hsl(346 27% 75%);
border-color: oklch(0.786 0.041 2.2);
}Tailwind CSS v4
@theme {
--color-iced-watermelon: #d1afb7;
--color-iced-watermelon-50: #fff1f4;
--color-iced-watermelon-100: #f5e3e6;
--color-iced-watermelon-200: #e5cdd2;
--color-iced-watermelon-300: #cbafb5;
--color-iced-watermelon-400: #b4959c;
--color-iced-watermelon-500: #9e7b84;
--color-iced-watermelon-600: #866870;
--color-iced-watermelon-700: #6b5359;
--color-iced-watermelon-800: #4f3d42;
--color-iced-watermelon-900: #372a2d;
--color-iced-watermelon-950: #22171a;
}SCSS
$iced-watermelon: #d1afb7;
$iced-watermelon-rgb: 209, 175, 183;
$iced-watermelon-light: mix(#fff, $iced-watermelon, 20%);
$iced-watermelon-dark: mix(#000, $iced-watermelon, 20%);
.element {
color: $iced-watermelon;
box-shadow: 0 0 0 2px rgba($iced-watermelon, 0.35);
}