Nazwany kolor · #FAF3DE
Marshmallow Fluff
Marshmallow Fluff to #FAF3DE: rgb(250 243 222), hsl(45 74% 93%), oklch(0.964 0.029 91.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Marshmallow Fluff color name →
#FAF3DE
oklch(0.964 0.029 91.6)
Konwersje koloru
- HEX
- #faf3de
- RGB
- rgb(250 243 222)
- HSL
- hsl(45 74% 93%)
- HWB
- hwb(45 87% 2%)
- OKLCH
- oklch(0.964 0.029 91.6)
- OKLab
- oklab(0.964 -0.001 0.029)
- CIE Lab
- lab(95.98 -0.15 11.05)
- LCH
- lch(95.98 11.05 90.8)
- CMYK
- cmyk(0% 3% 11% 2%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FAF4E1
- FBF5E5
- FBF7E8
- FCF8EB
- FCF9EF
- FDFAF2
- FDFBF5
- FEFDF8
- FEFEFC
Odcienie ciemniejsze
- D9D3C1
- BAB4A5
- 9B9789
- 7D7A6F
- 615E55
- 46443D
- 2D2B26
- 151412
- 030302
Tony
- EDE7D4
- E0DBCB
- D4CFC1
- C7C3B7
- BBB8AE
- AFACA5
- A3A19B
- 979692
- 8B8B89
Harmonie kolorów
Komplementarna +180°
- FAF3DE
Marshmallow Fluff
- EFF3FF
≈ Placebo Blue
Analogowa -30° +30°
- FAF3DE
Marshmallow Fluff
- FFF0E4
≈ Rice Pudding
- F0F7E2
≈ Lemon Sugar
Triada +120° +240°
- FAF3DE
Marshmallow Fluff
- DEF9FE
≈ Glacial Day
- FFEDFC
≈ Lovely Euphoric Delight
Komplementarna rozszczepiona +150° +210°
- FAF3DE
Marshmallow Fluff
- E9F5FF
≈ Moon White
- F5F0FF
≈ Cloud Break
Tetrada +90° +180° +270°
- FAF3DE
Marshmallow Fluff
- DFFAF4
≈ Mint Condition
- EFF3FF
≈ Placebo Blue
- FFEEF2
≈ Sugar Coated
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.10:1 · APCA Lc 0
Ag
AAANa czerni
WCAG 18.93:1 · APCA Lc 100
Najlepszy kolor tekstu: #000000
WCAG 18.93:1 (AAA) · APCA Lc 100
Contrast pairs
Fragmenty kodu
CSS
:root {
--marshmallow-fluff: #faf3de;
--marshmallow-fluff-rgb: 250 243 222;
--marshmallow-fluff-oklch: oklch(0.964 0.029 91.6);
}
.element {
color: var(--marshmallow-fluff);
background-color: hsl(45 74% 93%);
border-color: oklch(0.964 0.029 91.6);
}Tailwind CSS v4
@theme {
--color-marshmallow-fluff: #faf3de;
--color-marshmallow-fluff-50: #f8f5ec;
--color-marshmallow-fluff-100: #ebe8dd;
--color-marshmallow-fluff-200: #d8d4c7;
--color-marshmallow-fluff-300: #bcb7a7;
--color-marshmallow-fluff-400: #a49e8c;
--color-marshmallow-fluff-500: #8d8671;
--color-marshmallow-fluff-600: #777160;
--color-marshmallow-fluff-700: #5f5b4c;
--color-marshmallow-fluff-800: #464237;
--color-marshmallow-fluff-900: #312e26;
--color-marshmallow-fluff-950: #1d1a14;
}SCSS
$marshmallow-fluff: #faf3de;
$marshmallow-fluff-rgb: 250, 243, 222;
$marshmallow-fluff-light: mix(#fff, $marshmallow-fluff, 20%);
$marshmallow-fluff-dark: mix(#000, $marshmallow-fluff, 20%);
.element {
color: $marshmallow-fluff;
box-shadow: 0 0 0 2px rgba($marshmallow-fluff, 0.35);
}