Nazwany kolor · #EFD2D0
Marshmallow Magic
Marshmallow Magic to #EFD2D0: rgb(239 210 208), hsl(4 49% 88%), oklch(0.887 0.033 22.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Marshmallow Magic color name →
#EFD2D0
oklch(0.887 0.033 22.5)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F1D6D5
- F2DBD9
- F4DFDE
- F6E4E3
- F7E8E7
- F9EDEC
- FAF1F1
- FCF6F5
- FEFAFA
Odcienie ciemniejsze
- D0B6B5
- B19B9A
- 948180
- 786867
- 5C504F
- 423939
- 2A2423
- 141010
- 030202
Tony
- E3C9C8
- D8C1BF
- CDB9B7
- C1B0AF
- B6A8A7
- ABA09F
- A09897
- 95908F
- 8B8888
Harmonie kolorów
Komplementarna +180°
- EFD2D0
Marshmallow Magic
- C2E1E3
≈ Right as Rain
Analogowa -30° +30°
- EFD2D0
Marshmallow Magic
- ECD2DC
≈ Distant Flare
- ECD5C7
≈ Blush Beige
Triada +120° +240°
- EFD2D0
Marshmallow Magic
- CEE0CC
≈ Endive
- CEDAF0
≈ Hawkes Blue
Komplementarna rozszczepiona +150° +210°
- EFD2D0
Marshmallow Magic
- C5E1D7
≈ Ulthuan Grey
- C5DEEC
≈ Empress Lila
Tetrada +90° +180° +270°
- EFD2D0
Marshmallow Magic
- DADDC4
≈ Planet Earth
- C2E1E3
≈ Right as Rain
- DAD6EE
≈ Lavender Sky
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.41:1 · APCA Lc 20
Ag
AAANa czerni
WCAG 14.79:1 · APCA Lc 83
Najlepszy kolor tekstu: #000000
WCAG 14.79:1 (AAA) · APCA Lc 83
Contrast pairs
Fragmenty kodu
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);
}