Benoemde kleur · #EFD2D0
Marshmallow Magic
Marshmallow Magic is #EFD2D0: rgb(239 210 208), hsl(4 49% 88%), oklch(0.887 0.033 22.5). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Gray mean? → · Marshmallow Magic color name →
#EFD2D0
oklch(0.887 0.033 22.5)
Kleurconversies
- HEX
- #efd2d0
- RGB
- rgb(239 210 208)
- HSL
- hsl(4 49% 88%)
- HWB
- hwb(4 82% 6%)
- OKLCH
- oklch(0.887 0.033 22.5)
- OKLab
- oklab(0.887 0.03 0.012)
- CIE Lab
- lab(86.62 10.2 4.91)
- LCH
- lch(86.62 11.32 25.7)
- CMYK
- cmyk(0% 12% 13% 6%)
Tinten · Schaduwen · Tonen
Tinten
- F1D6D5
- F2DBD9
- F4DFDE
- F6E4E3
- F7E8E7
- F9EDEC
- FAF1F1
- FCF6F5
- FEFAFA
Schaduwen
- D0B6B5
- B19B9A
- 948180
- 786867
- 5C504F
- 423939
- 2A2423
- 141010
- 030202
Tonen
- E3C9C8
- D8C1BF
- CDB9B7
- C1B0AF
- B6A8A7
- ABA09F
- A09897
- 95908F
- 8B8888
Kleurharmonieën
Complementair +180°
- EFD2D0
Marshmallow Magic
- C2E1E3
≈ Right as Rain
Analoog -30° +30°
- EFD2D0
Marshmallow Magic
- ECD2DC
≈ Distant Flare
- ECD5C7
≈ Blush Beige
Triadisch +120° +240°
- EFD2D0
Marshmallow Magic
- CEE0CC
≈ Endive
- CEDAF0
≈ Hawkes Blue
Gesplitst complementair +150° +210°
- EFD2D0
Marshmallow Magic
- C5E1D7
≈ Ulthuan Grey
- C5DEEC
≈ Empress Lila
Tetradisch +90° +180° +270°
- EFD2D0
Marshmallow Magic
- DADDC4
≈ Planet Earth
- C2E1E3
≈ Right as Rain
- DAD6EE
≈ Lavender Sky
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.41:1 · APCA Lc 20
Ag
AAAOp zwart
WCAG 14.79:1 · APCA Lc 83
Beste tekstkleur: #000000
WCAG 14.79:1 (AAA) · APCA Lc 83
Contrast pairs
Codefragmenten
CSS
:root {
--marshmallow-magic: #efd2d0;
--marshmallow-magic-rgb: 239 210 208;
--marshmallow-magic-oklch: oklch(0.887 0.033 22.5);
}
.element {
color: var(--marshmallow-magic);
background-color: hsl(4 49% 88%);
border-color: oklch(0.887 0.033 22.5);
}Tailwind CSS v4
@theme {
--color-marshmallow-magic: #efd2d0;
--color-marshmallow-magic-50: #fef2f0;
--color-marshmallow-magic-100: #f3e4e2;
--color-marshmallow-magic-200: #e2cfcd;
--color-marshmallow-magic-300: #c8b1af;
--color-marshmallow-magic-400: #b19796;
--color-marshmallow-magic-500: #9b7e7c;
--color-marshmallow-magic-600: #836b69;
--color-marshmallow-magic-700: #695554;
--color-marshmallow-magic-800: #4d3e3e;
--color-marshmallow-magic-900: #362b2a;
--color-marshmallow-magic-950: #211818;
}SCSS
$marshmallow-magic: #efd2d0;
$marshmallow-magic-rgb: 239, 210, 208;
$marshmallow-magic-light: mix(#fff, $marshmallow-magic, 20%);
$marshmallow-magic-dark: mix(#000, $marshmallow-magic, 20%);
.element {
color: $marshmallow-magic;
box-shadow: 0 0 0 2px rgba($marshmallow-magic, 0.35);
}