命名颜色 · #DED1E0
Ametrine Quartz
Ametrine Quartz 即 #DED1E0：rgb(222 209 224)、hsl(292 19% 85%)、oklch(0.876 0.025 321.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Ametrine Quartz color name →
#DED1E0
oklch(0.876 0.025 321.7)
颜色转换
- HEX
- #ded1e0
- RGB
- rgb(222 209 224)
- HSL
- hsl(292 19% 85%)
- HWB
- hwb(292 82% 12%)
- OKLCH
- oklch(0.876 0.025 321.7)
- OKLab
- oklab(0.876 0.019 -0.015)
- CIE Lab
- lab(85.24 6.64 -5.73)
- LCH
- lch(85.24 8.77 319.2)
- CMYK
- cmyk(1% 7% 0% 12%)
浅色调 · 深色调 · 灰色调
浅色调
- E1D6E3
- E5DAE6
- E8DFE9
- EBE3EC
- EEE8EF
- F2ECF3
- F5F1F6
- F8F6F9
- FCFAFC
深色调
- C1B5C3
- A59BA6
- 89818A
- 6F6870
- 555056
- 3D393E
- 262327
- 121012
- 020202
灰色调
- D4C9D6
- CAC0CC
- C1B8C2
- B7B0B8
- AEA8AF
- A4A0A5
- 9B989C
- 929092
- 898889
配色和谐
互补色 +180°
- DED1E0
Ametrine Quartz
- CDDACB
≈ April Mist
类似色 -30° +30°
- DED1E0
Ametrine Quartz
- D6D3E6
≈ Dulcinea
- E4D0D8
≈ Ephemeral Red
三角配色 +120° +240°
- DED1E0
Ametrine Quartz
- DED5C4
≈ Wheat Sheaf
- C4DBDD
≈ Light Dewpoint
分裂互补色 +150° +210°
- DED1E0
Ametrine Quartz
- D6D8C6
≈ September Song
- C7DCD4
≈ Ocean Silk
四角配色 +90° +180° +270°
- DED1E0
Ametrine Quartz
- E4D2C8
≈ Blossom Time
- CDDACB
≈ April Mist
- C7D9E4
≈ Simple Serenity
对比度与无障碍
Ag
Fail白底
WCAG 1.46:1 · APCA Lc 22
Ag
AAA黑底
WCAG 14.30:1 · APCA Lc 81
最佳文字颜色: #000000
WCAG 14.30:1 (AAA) · APCA Lc 81
Contrast pairs
代码片段
CSS
:root {
--ametrine-quartz: #ded1e0;
--ametrine-quartz-rgb: 222 209 224;
--ametrine-quartz-oklch: oklch(0.876 0.025 321.7);
}
.element {
color: var(--ametrine-quartz);
background-color: hsl(292 19% 85%);
border-color: oklch(0.876 0.025 321.7);
}Tailwind CSS v4
@theme {
--color-ametrine-quartz: #ded1e0;
--color-ametrine-quartz-50: #f9f3f9;
--color-ametrine-quartz-100: #ece5ed;
--color-ametrine-quartz-200: #dad1da;
--color-ametrine-quartz-300: #beb3bf;
--color-ametrine-quartz-400: #a69aa7;
--color-ametrine-quartz-500: #8e8190;
--color-ametrine-quartz-600: #786d7a;
--color-ametrine-quartz-700: #605762;
--color-ametrine-quartz-800: #464048;
--color-ametrine-quartz-900: #312c32;
--color-ametrine-quartz-950: #1d191e;
}SCSS
$ametrine-quartz: #ded1e0;
$ametrine-quartz-rgb: 222, 209, 224;
$ametrine-quartz-light: mix(#fff, $ametrine-quartz, 20%);
$ametrine-quartz-dark: mix(#000, $ametrine-quartz, 20%);
.element {
color: $ametrine-quartz;
box-shadow: 0 0 0 2px rgba($ametrine-quartz, 0.35);
}