色名 · #EADDE1
Mauve Wisp
Mauve Wispは#EADDE1：rgb(234 221 225)、hsl(342 24% 89%)、oklch(0.909 0.015 356.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Mauve Wisp color name →
#EADDE1
oklch(0.909 0.015 356.7)
カラー変換
- HEX
- #eadde1
- RGB
- rgb(234 221 225)
- HSL
- hsl(342 24% 89%)
- HWB
- hwb(342 87% 8%)
- OKLCH
- oklch(0.909 0.015 356.7)
- OKLab
- oklab(0.909 0.015 -0.001)
- CIE Lab
- lab(89.25 5.11 -0.29)
- LCH
- lch(89.25 5.12 356.8)
- CMYK
- cmyk(0% 6% 4% 8%)
ティント · シェード · トーン
ティント
- ECE0E4
- EEE4E7
- F0E7EA
- F2EBED
- F5EEF0
- F7F1F3
- F9F5F6
- FBF8F9
- FDFCFC
シェード
- CBC0C4
- AEA4A7
- 91888B
- 756E70
- 5A5556
- 413D3E
- 292627
- 131112
- 030202
トーン
- DFD3D7
- D4CACD
- C9C0C3
- BEB7B9
- B4ADAF
- A9A4A6
- 9F9B9C
- 949293
- 8A8989
カラーハーモニー
補色 +180°
- EADDE1
Mauve Wisp
- D7E4E1
≈ Cirrus Blue
類似色 -30° +30°
- EADDE1
Mauve Wisp
- E7DEE6
≈ Peekaboo
- EBDDDC
≈ Wishy-Washy Beige
トライアド +120° +240°
- EADDE1
Mauve Wisp
- E0E2D7
≈ Timid Green
- D8E3EA
≈ Early Frost
スプリットコンプリメンタリー +150° +210°
- EADDE1
Mauve Wisp
- DBE4DB
≈ Aqua Squeeze
- D6E4E6
≈ Spa Retreat
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.31:1 · APCA Lc 16
Ag
AAA黒の上
WCAG 15.92:1 · APCA Lc 88
最適な文字色: #000000
WCAG 15.92:1 (AAA) · APCA Lc 88
Contrast pairs
コードスニペット
CSS
:root {
--mauve-wisp: #eadde1;
--mauve-wisp-rgb: 234 221 225;
--mauve-wisp-oklch: oklch(0.909 0.015 356.7);
}
.element {
color: var(--mauve-wisp);
background-color: hsl(342 24% 89%);
border-color: oklch(0.909 0.015 356.7);
}Tailwind CSS v4
@theme {
--color-mauve-wisp: #eadde1;
--color-mauve-wisp-50: #f9f3f5;
--color-mauve-wisp-100: #ece6e8;
--color-mauve-wisp-200: #dad2d4;
--color-mauve-wisp-300: #beb4b7;
--color-mauve-wisp-400: #a69b9e;
--color-mauve-wisp-500: #8f8286;
--color-mauve-wisp-600: #796e72;
--color-mauve-wisp-700: #61585b;
--color-mauve-wisp-800: #474043;
--color-mauve-wisp-900: #312c2e;
--color-mauve-wisp-950: #1d191b;
}SCSS
$mauve-wisp: #eadde1;
$mauve-wisp-rgb: 234, 221, 225;
$mauve-wisp-light: mix(#fff, $mauve-wisp, 20%);
$mauve-wisp-dark: mix(#000, $mauve-wisp, 20%);
.element {
color: $mauve-wisp;
box-shadow: 0 0 0 2px rgba($mauve-wisp, 0.35);
}