色名 · #EFE0D4
Toasted Marshmallow
Toasted Marshmallowは#EFE0D4：rgb(239 224 212)、hsl(27 46% 88%)、oklch(0.915 0.023 61.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Toasted Marshmallow color name →
#EFE0D4
oklch(0.915 0.023 61.2)
カラー変換
- HEX
- #efe0d4
- RGB
- rgb(239 224 212)
- HSL
- hsl(27 46% 88%)
- HWB
- hwb(27 83% 6%)
- OKLCH
- oklch(0.915 0.023 61.2)
- OKLab
- oklab(0.915 0.011 0.02)
- CIE Lab
- lab(90.15 3.83 7.83)
- LCH
- lch(90.15 8.72 63.9)
- CMYK
- cmyk(0% 6% 11% 6%)
ティント · シェード · トーン
ティント
- F1E3D8
- F2E6DD
- F4E9E1
- F5ECE5
- F7EFE9
- F9F3EE
- FAF6F2
- FCF9F6
- FDFCFB
シェード
- D0C3B8
- B1A69D
- 948A83
- 787069
- 5C5651
- 423E3A
- 2A2724
- 141210
- 030202
トーン
- E3D6CB
- D8CCC3
- CCC2BA
- C1B8B2
- B6AFA9
- ABA5A1
- A09C98
- 959290
- 8B8988
カラーハーモニー
補色 +180°
- EFE0D4
Toasted Marshmallow
- D6E5F1
≈ Snowdrift Glow
類似色 -30° +30°
- EFE0D4
Toasted Marshmallow
- F2DEDA
≈ Pink Chablis
- E9E3D2
≈ Alabaster Beauty
トライアド +120° +240°
- EFE0D4
Toasted Marshmallow
- D3E8E4
≈ Plateau
- E5E0F0
≈ Romantic Cruise
スプリットコンプリメンタリー +150° +210°
- EFE0D4
Toasted Marshmallow
- D3E8EC
≈ Coastal Mist
- DDE3F3
≈ Iris Ice
テトラード +90° +180° +270°
- EFE0D4
Toasted Marshmallow
- D9E8DB
≈ Bath
- D6E5F1
≈ Snowdrift Glow
- EDDEEA
≈ Angora Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.28:1 · APCA Lc 14
Ag
AAA黒の上
WCAG 16.28:1 · APCA Lc 89
最適な文字色: #000000
WCAG 16.28:1 (AAA) · APCA Lc 89
Contrast pairs
コードスニペット
CSS
:root {
--toasted-marshmallow: #efe0d4;
--toasted-marshmallow-rgb: 239 224 212;
--toasted-marshmallow-oklch: oklch(0.915 0.023 61.2);
}
.element {
color: var(--toasted-marshmallow);
background-color: hsl(27 46% 88%);
border-color: oklch(0.915 0.023 61.2);
}Tailwind CSS v4
@theme {
--color-toasted-marshmallow: #efe0d4;
--color-toasted-marshmallow-50: #faf4ee;
--color-toasted-marshmallow-100: #eee6e0;
--color-toasted-marshmallow-200: #dcd2ca;
--color-toasted-marshmallow-300: #c0b5ac;
--color-toasted-marshmallow-400: #a99c91;
--color-toasted-marshmallow-500: #928377;
--color-toasted-marshmallow-600: #7b6f65;
--color-toasted-marshmallow-700: #635951;
--color-toasted-marshmallow-800: #49413b;
--color-toasted-marshmallow-900: #322d28;
--color-toasted-marshmallow-950: #1e1a16;
}SCSS
$toasted-marshmallow: #efe0d4;
$toasted-marshmallow-rgb: 239, 224, 212;
$toasted-marshmallow-light: mix(#fff, $toasted-marshmallow, 20%);
$toasted-marshmallow-dark: mix(#000, $toasted-marshmallow, 20%);
.element {
color: $toasted-marshmallow;
box-shadow: 0 0 0 2px rgba($toasted-marshmallow, 0.35);
}