色名 · #E0DCE4
Minified Mauve
Minified Mauveは#E0DCE4：rgb(224 220 228)、hsl(270 13% 88%)、oklch(0.9 0.012 308.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Minified Mauve color name →
#E0DCE4
oklch(0.9 0.012 308.3)
カラー変換
- HEX
- #e0dce4
- RGB
- rgb(224 220 228)
- HSL
- hsl(270 13% 88%)
- HWB
- hwb(270 86% 11%)
- OKLCH
- oklch(0.9 0.012 308.3)
- OKLab
- oklab(0.9 0.007 -0.009)
- CIE Lab
- lab(88.25 2.48 -3.42)
- LCH
- lch(88.25 4.23 305.9)
- CMYK
- cmyk(2% 4% 0% 11%)
ティント · シェード · トーン
ティント
- E3DFE7
- E6E3E9
- E9E6EC
- ECEAEF
- EFEDF1
- F3F1F4
- F6F4F7
- F9F8FA
- FCFBFC
シェード
- C3BFC6
- A6A3A9
- 8A888D
- 706E72
- 565458
- 3E3C3F
- 272628
- 121112
- 020203
トーン
- D6D2DA
- CCC9CF
- C2BFC5
- B8B6BB
- AFADB1
- A5A4A7
- 9C9B9D
- 929293
- 89898A
カラーハーモニー
補色 +180°
- E0DCE4
Minified Mauve
- DCE0D7
≈ Just a Little
類似色 -30° +30°
- E0DCE4
Minified Mauve
- DCDDE6
≈ Timid Cloud
- E3DBE1
≈ Rusty Pebble
トライアド +120° +240°
- E0DCE4
Minified Mauve
- E3DDD6
≈ Incredible White
- D6E1DF
≈ Pristine Petal
スプリットコンプリメンタリー +150° +210°
- E0DCE4
Minified Mauve
- E0DED6
≈ Black Haze
- D8E0DB
≈ Rapier Silver
テトラード +90° +180° +270°
- E0DCE4
Minified Mauve
- E5DCD8
≈ Cultured Pearl
- DCE0D7
≈ Just a Little
- D6E0E3
≈ Blue Smoke
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.35:1 · APCA Lc 17
Ag
AAA黒の上
WCAG 15.52:1 · APCA Lc 86
最適な文字色: #000000
WCAG 15.52:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
CSS
:root {
--minified-mauve: #e0dce4;
--minified-mauve-rgb: 224 220 228;
--minified-mauve-oklch: oklch(0.9 0.012 308.3);
}
.element {
color: var(--minified-mauve);
background-color: hsl(270 13% 88%);
border-color: oklch(0.9 0.012 308.3);
}Tailwind CSS v4
@theme {
--color-minified-mauve: #e0dce4;
--color-minified-mauve-50: #f6f4f8;
--color-minified-mauve-100: #e9e7eb;
--color-minified-mauve-200: #d6d3d8;
--color-minified-mauve-300: #b9b6bc;
--color-minified-mauve-400: #a09da4;
--color-minified-mauve-500: #88848c;
--color-minified-mauve-600: #737077;
--color-minified-mauve-700: #5c595f;
--color-minified-mauve-800: #434146;
--color-minified-mauve-900: #2e2d30;
--color-minified-mauve-950: #1b1a1c;
}SCSS
$minified-mauve: #e0dce4;
$minified-mauve-rgb: 224, 220, 228;
$minified-mauve-light: mix(#fff, $minified-mauve, 20%);
$minified-mauve-dark: mix(#000, $minified-mauve, 20%);
.element {
color: $minified-mauve;
box-shadow: 0 0 0 2px rgba($minified-mauve, 0.35);
}