Nearest named color · #F4DBE6
#F4DBE6
Nearest named color: Watermelon Mousse
#F4DBE6 (rgb(244 219 230), hsl(334 53% 91%), oklch(0.915 0.031 349.3)) is closest to the named color Watermelon Mousse. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F4DBE6
oklch(0.915 0.031 349.3)
Color conversions
- HEX
- #f4dbe6
- RGB
- rgb(244 219 230)
- HSL
- hsl(334 53% 91%)
- HWB
- hwb(334 86% 4%)
- OKLCH
- oklch(0.915 0.031 349.3)
- OKLab
- oklab(0.915 0.03 -0.006)
- CIE Lab
- lab(89.72 10.27 -2.09)
- LCH
- lch(89.72 10.48 348.5)
- CMYK
- cmyk(0% 10% 6% 4%)
Tints · Shades · Tones
Tints
- F5DFE8
- F6E2EB
- F7E6ED
- F9E9F0
- FAEDF2
- FBF1F5
- FCF4F7
- FDF8FA
- FEFBFC
Shades
- D4BEC8
- B5A2AB
- 97878E
- 7A6D73
- 5E5459
- 443C40
- 2B2628
- 141113
- 030203
Tones
- E8D2DB
- DCC8D1
- D0BFC6
- C4B6BC
- B8ACB2
- ADA3A7
- A19A9D
- 969193
- 8B898A
Color harmonies
Complementary +180°
- F4DBE6
Watermelon Mousse
- D0EADF
≈ Hatching Chameleon
Analogous -30° +30°
- F4DBE6
Watermelon Mousse
- ECDDF0
≈ Divine Dove
- F7DBDB
≈ Fairy Princess
Triadic +120° +240°
- F4DBE6
Watermelon Mousse
- E4E5CE
≈ Pineapple Soda
- CFE7F4
≈ New Heights
Split-complementary +150° +210°
- F4DBE6
Watermelon Mousse
- D9E8D5
≈ Little Sprout
- CCEAEB
≈ Fountain Spout
Tetradic +90° +180° +270°
- F4DBE6
Watermelon Mousse
- EEE1CC
≈ Ivory Stone
- D0EADF
≈ Hatching Chameleon
- D7E4F8
≈ Aquarelle Purple
Contrast & accessibility
Ag
FailOn white
WCAG 1.30:1 · APCA Lc 15
Ag
AAAOn black
WCAG 16.12:1 · APCA Lc 89
Best text color: #000000
WCAG 16.12:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--watermelon-mousse: #f4dbe6;
--watermelon-mousse-rgb: 244 219 230;
--watermelon-mousse-oklch: oklch(0.915 0.031 349.3);
}
.element {
color: var(--watermelon-mousse);
background-color: hsl(334 53% 91%);
border-color: oklch(0.915 0.031 349.3);
}Tailwind CSS v4
@theme {
--color-watermelon-mousse: #f4dbe6;
--color-watermelon-mousse-50: #fdf2f6;
--color-watermelon-mousse-100: #f1e4e9;
--color-watermelon-mousse-200: #dfcfd6;
--color-watermelon-mousse-300: #c5b1b9;
--color-watermelon-mousse-400: #ad97a1;
--color-watermelon-mousse-500: #977e89;
--color-watermelon-mousse-600: #806b74;
--color-watermelon-mousse-700: #66555d;
--color-watermelon-mousse-800: #4b3e44;
--color-watermelon-mousse-900: #342b2f;
--color-watermelon-mousse-950: #1f181c;
}SCSS
$watermelon-mousse: #f4dbe6;
$watermelon-mousse-rgb: 244, 219, 230;
$watermelon-mousse-light: mix(#fff, $watermelon-mousse, 20%);
$watermelon-mousse-dark: mix(#000, $watermelon-mousse, 20%);
.element {
color: $watermelon-mousse;
box-shadow: 0 0 0 2px rgba($watermelon-mousse, 0.35);
}