Benannte Farbe · #F3E0D6
Marshmallow Cream
Marshmallow Cream ist #F3E0D6: rgb(243 224 214), hsl(21 55% 90%), oklch(0.919 0.025 49.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Marshmallow Cream color name →
#F3E0D6
oklch(0.919 0.025 49.7)
Farbumrechnungen
- HEX
- #f3e0d6
- RGB
- rgb(243 224 214)
- HSL
- hsl(21 55% 90%)
- HWB
- hwb(21 84% 5%)
- OKLCH
- oklch(0.919 0.025 49.7)
- OKLab
- oklab(0.919 0.016 0.019)
- CIE Lab
- lab(90.53 5.52 7.39)
- LCH
- lch(90.53 9.22 53.2)
- CMYK
- cmyk(0% 8% 12% 5%)
Tints · Shades · Tones
Tints
- F4E3DA
- F5E6DE
- F7E9E2
- F8ECE6
- F9EFEA
- FAF3EF
- FCF6F3
- FDF9F7
- FEFCFB
Shades
- D3C3BA
- B4A69E
- 978A84
- 7A706A
- 5E5652
- 443E3B
- 2B2725
- 141210
- 030202
Tones
- E7D6CD
- DBCCC4
- CFC2BB
- C3B8B3
- B8AFAA
- ACA5A1
- A19C99
- 969291
- 8B8988
Farbharmonien
Komplementär +180°
- F3E0D6
Marshmallow Cream
- D4E8F2
≈ Freezing Vapour
Analog -30° +30°
- F3E0D6
Marshmallow Cream
- F5DEDD
≈ Heavenly Pink
- EDE3D2
≈ Canyon Cliffs
Triadisch +120° +240°
- F3E0D6
Marshmallow Cream
- D5EAE2
≈ Icy Glacier
- E3E2F4
≈ Farsighted
Geteilt komplementär +150° +210°
- F3E0D6
Marshmallow Cream
- D2EAEB
≈ Queen of Waves
- DBE5F5
≈ Icicle Veil
Tetradisch +90° +180° +270°
- F3E0D6
Marshmallow Cream
- DCE9D9
≈ Lily Pond
- D4E8F2
≈ Freezing Vapour
- ECDFEF
≈ Divine Dove
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.27:1 · APCA Lc 14
Ag
AAAAuf Schwarz
WCAG 16.44:1 · APCA Lc 90
Beste Textfarbe: #000000
WCAG 16.44:1 (AAA) · APCA Lc 90
Contrast pairs
Code-Snippets
CSS
:root {
--marshmallow-cream: #f3e0d6;
--marshmallow-cream-rgb: 243 224 214;
--marshmallow-cream-oklch: oklch(0.919 0.025 49.7);
}
.element {
color: var(--marshmallow-cream);
background-color: hsl(21 55% 90%);
border-color: oklch(0.919 0.025 49.7);
}Tailwind CSS v4
@theme {
--color-marshmallow-cream: #f3e0d6;
--color-marshmallow-cream-50: #fbf3ef;
--color-marshmallow-cream-100: #efe6e0;
--color-marshmallow-cream-200: #ddd2cb;
--color-marshmallow-cream-300: #c2b4ac;
--color-marshmallow-cream-400: #ab9b92;
--color-marshmallow-cream-500: #958278;
--color-marshmallow-cream-600: #7e6e65;
--color-marshmallow-cream-700: #655851;
--color-marshmallow-cream-800: #4a403b;
--color-marshmallow-cream-900: #332c28;
--color-marshmallow-cream-950: #1f1916;
}SCSS
$marshmallow-cream: #f3e0d6;
$marshmallow-cream-rgb: 243, 224, 214;
$marshmallow-cream-light: mix(#fff, $marshmallow-cream, 20%);
$marshmallow-cream-dark: mix(#000, $marshmallow-cream, 20%);
.element {
color: $marshmallow-cream;
box-shadow: 0 0 0 2px rgba($marshmallow-cream, 0.35);
}