色名 · #F4DDDB
Light Marshmallow Magic
Light Marshmallow Magicは#F4DDDB：rgb(244 221 219)、hsl(5 53% 91%)、oklch(0.916 0.026 23.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Light Marshmallow Magic color name →
#F4DDDB
oklch(0.916 0.026 23.6)
カラー変換
- 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%)
ティント · シェード · トーン
ティント
- F5E0DF
- F6E4E2
- F7E7E6
- F9EBE9
- FAEEED
- FBF1F0
- FCF5F4
- FDF8F8
- FEFCFB
シェード
- D4C0BE
- B5A4A2
- 978887
- 7A6E6D
- 5E5554
- 443D3C
- 2B2626
- 141111
- 030202
トーン
- E8D3D2
- DCCAC8
- D0C0BF
- C4B7B6
- B8ADAC
- ADA4A3
- A19B9A
- 969291
- 8B8989
カラーハーモニー
補色 +180°
- F4DDDB
Light Marshmallow Magic
- D0E9EB
≈ Jet d’Eau
類似色 -30° +30°
- F4DDDB
Light Marshmallow Magic
- F2DDE4
≈ Lavender Moon
- F2DFD4
≈ Peach Shortcake
トライアド +120° +240°
- F4DDDB
Light Marshmallow Magic
- DAE8D9
≈ Bath
- DAE4F5
≈ Aquarelle Purple
スプリットコンプリメンタリー +150° +210°
- F4DDDB
Light Marshmallow Magic
- D3E9E2
≈ Aqua Glass
- D3E7F2
≈ On Thin Ice
テトラード +90° +180° +270°
- F4DDDB
Light Marshmallow Magic
- E3E5D2
≈ Sage Splash
- D0E9EB
≈ Jet d’Eau
- E3E0F3
≈ Lingering Lilac
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.29:1 · APCA Lc 15
Ag
AAA黒の上
WCAG 16.21:1 · APCA Lc 89
最適な文字色: #000000
WCAG 16.21:1 (AAA) · APCA Lc 89
Contrast pairs
コードスニペット
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);
}