色名 · #DEE3E4
Mauve White
Mauve Whiteは#DEE3E4：rgb(222 227 228)、hsl(190 10% 88%)、oklch(0.912 0.006 211)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Mauve White color name →
#DEE3E4
oklch(0.912 0.006 211)
カラー変換
- HEX
- #dee3e4
- RGB
- rgb(222 227 228)
- HSL
- hsl(190 10% 88%)
- HWB
- hwb(190 87% 11%)
- OKLCH
- oklch(0.912 0.006 211)
- OKLab
- oklab(0.912 -0.005 -0.003)
- CIE Lab
- lab(89.87 -1.6 -1.11)
- LCH
- lch(89.87 1.95 214.6)
- CMYK
- cmyk(3% 0% 0% 11%)
ティント · シェード · トーン
ティント
- E1E6E7
- E5E9E9
- E8EBEC
- EBEEEF
- EEF1F1
- F2F4F4
- F5F7F7
- F8F9FA
- FCFCFC
シェード
- C1C5C6
- A5A8A9
- 898C8D
- 6F7172
- 555758
- 3D3F3F
- 262728
- 121212
- 020303
トーン
- D4D9DA
- CACECF
- C1C4C5
- B7BABB
- AEB0B1
- A4A6A7
- 9B9D9D
- 929393
- 89898A
カラーハーモニー
補色 +180°
- DEE3E4
Mauve White
- E6E1E0
≈ Mauve Tinge
類似色 -30° +30°
- DEE3E4
Mauve White
- DEE3E2
≈ Zircon
- DFE2E5
≈ January Dawn
トライアド +120° +240°
- DEE3E4
Mauve White
- E4E1E4
≈ Orchid Blossom
- E3E2DE
≈ Quiet on the Set
スプリットコンプリメンタリー +150° +210°
- DEE3E4
Mauve White
- E5E0E2
≈ Pearl Violet
- E5E1DE
≈ Dusky Dawn
テトラード +90° +180° +270°
- DEE3E4
Mauve White
- E2E1E5
≈ Orchid Blossom
- E6E1E0
≈ Mauve Tinge
- E1E3DF
≈ Beryl Pearl
コントラストとアクセシビリティ
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 {
--mauve-white: #dee3e4;
--mauve-white-rgb: 222 227 228;
--mauve-white-oklch: oklch(0.912 0.006 211);
}
.element {
color: var(--mauve-white);
background-color: hsl(190 10% 88%);
border-color: oklch(0.912 0.006 211);
}Tailwind CSS v4
@theme {
--color-mauve-white: #dee3e4;
--color-mauve-white-50: #f3f5f6;
--color-mauve-white-100: #e6e8e9;
--color-mauve-white-200: #d2d5d5;
--color-mauve-white-300: #b4b8b9;
--color-mauve-white-400: #9b9fa0;
--color-mauve-white-500: #828788;
--color-mauve-white-600: #6e7273;
--color-mauve-white-700: #585b5c;
--color-mauve-white-800: #404343;
--color-mauve-white-900: #2c2e2e;
--color-mauve-white-950: #191b1b;
}SCSS
$mauve-white: #dee3e4;
$mauve-white-rgb: 222, 227, 228;
$mauve-white-light: mix(#fff, $mauve-white, 20%);
$mauve-white-dark: mix(#000, $mauve-white, 20%);
.element {
color: $mauve-white;
box-shadow: 0 0 0 2px rgba($mauve-white, 0.35);
}