Benoemde kleur · #F4DDDB
Light Marshmallow Magic
Light Marshmallow Magic is #F4DDDB: rgb(244 221 219), hsl(5 53% 91%), oklch(0.916 0.026 23.6). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Gray mean? → · Light Marshmallow Magic color name →
#F4DDDB
oklch(0.916 0.026 23.6)
Kleurconversies
- HEX
- #f4dddb
- RGB
- rgb(244 221 219)
- HSL
- hsl(5 53% 91%)
- HWB
- hwb(5 86% 4%)
- OKLCH
- oklch(0.916 0.026 23.6)
- OKLab
- oklab(0.916 0.023 0.01)
- CIE Lab
- lab(89.98 7.93 4.01)
- LCH
- lch(89.98 8.89 26.8)
- CMYK
- cmyk(0% 9% 10% 4%)
Tinten · Schaduwen · Tonen
Tinten
- F5E0DF
- F6E4E2
- F7E7E6
- F9EBE9
- FAEEED
- FBF1F0
- FCF5F4
- FDF8F8
- FEFCFB
Schaduwen
- D4C0BE
- B5A4A2
- 978887
- 7A6E6D
- 5E5554
- 443D3C
- 2B2626
- 141111
- 030202
Tonen
- E8D3D2
- DCCAC8
- D0C0BF
- C4B7B6
- B8ADAC
- ADA4A3
- A19B9A
- 969291
- 8B8989
Kleurharmonieën
Complementair +180°
- F4DDDB
Light Marshmallow Magic
- D0E9EB
≈ Jet d’Eau
Analoog -30° +30°
- F4DDDB
Light Marshmallow Magic
- F2DDE4
≈ Lavender Moon
- F2DFD4
≈ Peach Shortcake
Triadisch +120° +240°
- F4DDDB
Light Marshmallow Magic
- DAE8D9
≈ Bath
- DAE4F5
≈ Aquarelle Purple
Gesplitst complementair +150° +210°
- F4DDDB
Light Marshmallow Magic
- D3E9E2
≈ Aqua Glass
- D3E7F2
≈ On Thin Ice
Tetradisch +90° +180° +270°
- F4DDDB
Light Marshmallow Magic
- E3E5D2
≈ Sage Splash
- D0E9EB
≈ Jet d’Eau
- E3E0F3
≈ Lingering Lilac
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.29:1 · APCA Lc 15
Ag
AAAOp zwart
WCAG 16.21:1 · APCA Lc 89
Beste tekstkleur: #000000
WCAG 16.21:1 (AAA) · APCA Lc 89
Contrast pairs
Codefragmenten
CSS
:root {
--light-marshmallow-magic: #f4dddb;
--light-marshmallow-magic-rgb: 244 221 219;
--light-marshmallow-magic-oklch: oklch(0.916 0.026 23.6);
}
.element {
color: var(--light-marshmallow-magic);
background-color: hsl(5 53% 91%);
border-color: oklch(0.916 0.026 23.6);
}Tailwind CSS v4
@theme {
--color-light-marshmallow-magic: #f4dddb;
--color-light-marshmallow-magic-50: #fcf2f1;
--color-light-marshmallow-magic-100: #f0e5e3;
--color-light-marshmallow-magic-200: #dfd0cf;
--color-light-marshmallow-magic-300: #c4b3b1;
--color-light-marshmallow-magic-400: #ad9997;
--color-light-marshmallow-magic-500: #97807e;
--color-light-marshmallow-magic-600: #7f6c6b;
--color-light-marshmallow-magic-700: #665755;
--color-light-marshmallow-magic-800: #4b3f3e;
--color-light-marshmallow-magic-900: #342b2b;
--color-light-marshmallow-magic-950: #1f1918;
}SCSS
$light-marshmallow-magic: #f4dddb;
$light-marshmallow-magic-rgb: 244, 221, 219;
$light-marshmallow-magic-light: mix(#fff, $light-marshmallow-magic, 20%);
$light-marshmallow-magic-dark: mix(#000, $light-marshmallow-magic, 20%);
.element {
color: $light-marshmallow-magic;
box-shadow: 0 0 0 2px rgba($light-marshmallow-magic, 0.35);
}