色名 · #DFE5E4
Moon Garden
Moon Gardenは#DFE5E4：rgb(223 229 228)、hsl(170 10% 89%)、oklch(0.917 0.007 185.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Moon Garden color name →
#DFE5E4
oklch(0.917 0.007 185.3)
カラー変換
- HEX
- #dfe5e4
- RGB
- rgb(223 229 228)
- HSL
- hsl(170 10% 89%)
- HWB
- hwb(170 87% 10%)
- OKLCH
- oklch(0.917 0.007 185.3)
- OKLab
- oklab(0.917 -0.007 -0.001)
- CIE Lab
- lab(90.46 -2.22 -0.25)
- LCH
- lch(90.46 2.23 186.4)
- CMYK
- cmyk(3% 0% 0% 10%)
ティント · シェード · トーン
ティント
- E2E8E7
- E5EAE9
- E9EDEC
- ECEFEF
- EFF2F1
- F2F5F4
- F5F7F7
- F9FAFA
- FCFCFC
シェード
- C2C7C6
- A5AAA9
- 8A8E8D
- 6F7272
- 565858
- 3D3F3F
- 272828
- 121212
- 020303
トーン
- D5DADA
- CBD0CF
- C2C6C5
- B8BBBB
- AEB1B1
- A5A7A7
- 9B9D9D
- 929393
- 898A8A
カラーハーモニー
補色 +180°
- DFE5E4
Moon Garden
- E8E2E3
≈ Antique Petal
類似色 -30° +30°
- DFE5E4
Moon Garden
- E0E5E2
≈ Icy Bay
- DFE5E6
≈ Austrian Ice
トライアド +120° +240°
- DFE5E4
Moon Garden
- E4E2E7
≈ Violet Hush
- E7E3DF
≈ Arctic Cotton
スプリットコンプリメンタリー +150° +210°
- DFE5E4
Moon Garden
- E6E2E5
≈ Cooling Trend
- E8E2E1
≈ Clytemnestra
テトラード +90° +180° +270°
- DFE5E4
Moon Garden
- E2E3E8
≈ Violet White
- E8E2E3
≈ Antique Petal
- E5E4DF
≈ Felicity
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.27:1 · APCA Lc 14
Ag
AAA黒の上
WCAG 16.46:1 · APCA Lc 90
最適な文字色: #000000
WCAG 16.46:1 (AAA) · APCA Lc 90
Contrast pairs
コードスニペット
CSS
:root {
--moon-garden: #dfe5e4;
--moon-garden-rgb: 223 229 228;
--moon-garden-oklch: oklch(0.917 0.007 185.3);
}
.element {
color: var(--moon-garden);
background-color: hsl(170 10% 89%);
border-color: oklch(0.917 0.007 185.3);
}Tailwind CSS v4
@theme {
--color-moon-garden: #dfe5e4;
--color-moon-garden-50: #f3f6f5;
--color-moon-garden-100: #e5e8e8;
--color-moon-garden-200: #d1d5d5;
--color-moon-garden-300: #b4b8b8;
--color-moon-garden-400: #9aa09f;
--color-moon-garden-500: #828887;
--color-moon-garden-600: #6e7372;
--color-moon-garden-700: #585c5b;
--color-moon-garden-800: #404342;
--color-moon-garden-900: #2c2e2e;
--color-moon-garden-950: #191b1b;
}SCSS
$moon-garden: #dfe5e4;
$moon-garden-rgb: 223, 229, 228;
$moon-garden-light: mix(#fff, $moon-garden, 20%);
$moon-garden-dark: mix(#000, $moon-garden, 20%);
.element {
color: $moon-garden;
box-shadow: 0 0 0 2px rgba($moon-garden, 0.35);
}