命名颜色 · #ABDEE4
Vandermint
Vandermint 即 #ABDEE4：rgb(171 222 228)、hsl(186 51% 78%)、oklch(0.867 0.053 205.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Cyan mean? → · Vandermint color name →
#ABDEE4
oklch(0.867 0.053 205.2)
颜色转换
- HEX
- #abdee4
- RGB
- rgb(171 222 228)
- HSL
- hsl(186 51% 78%)
- HWB
- hwb(186 67% 11%)
- OKLCH
- oklch(0.867 0.053 205.2)
- OKLab
- oklab(0.867 -0.048 -0.023)
- CIE Lab
- lab(85.06 -16.01 -8.61)
- LCH
- lch(85.06 18.18 208.3)
- CMYK
- cmyk(25% 3% 0% 11%)
浅色调 · 深色调 · 灰色调
浅色调
- B4E1E7
- BCE5E9
- C5E8EC
- CDEBEF
- D6EFF2
- DEF2F4
- E6F5F7
- EFF8FA
- F7FCFC
深色调
- 94C1C6
- 7EA5A9
- 68898D
- 546F72
- 405558
- 2D3D3F
- 1B2628
- 0B1212
- 010203
灰色调
- A7D4DA
- A3CBCF
- 9FC1C5
- 9BB7BB
- 96AEB1
- 92A5A7
- 8E9B9D
- 899293
- 85898A
配色和谐
互补色 +180°
- ABDEE4
Vandermint
- F5C7C2
≈ Millennial Pink
类似色 -30° +30°
- ABDEE4
Vandermint
- B0DFD1
≈ Jaded Clouds
- B2DAF2
≈ Blue Rice
三角配色 +120° +240°
- ABDEE4
Vandermint
- E6C8E7
≈ Syrian Violet
- E3D1AC
≈ Cream Cake
分裂互补色 +150° +210°
- ABDEE4
Vandermint
- F1C6D5
≈ Lily Legs
- F0CBB3
≈ Cashew Nut
四角配色 +90° +180° +270°
- ABDEE4
Vandermint
- D5CDF3
≈ Miami White
- F5C7C2
≈ Millennial Pink
- D1D8B1
≈ Prairie Willow
对比度与无障碍
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 {
--vandermint: #abdee4;
--vandermint-rgb: 171 222 228;
--vandermint-oklch: oklch(0.867 0.053 205.2);
}
.element {
color: var(--vandermint);
background-color: hsl(186 51% 78%);
border-color: oklch(0.867 0.053 205.2);
}Tailwind CSS v4
@theme {
--color-vandermint: #abdee4;
--color-vandermint-50: #e5fafd;
--color-vandermint-100: #d5edf1;
--color-vandermint-200: #bbdbe0;
--color-vandermint-300: #98c0c5;
--color-vandermint-400: #79a8ad;
--color-vandermint-500: #5a9197;
--color-vandermint-600: #4d7a80;
--color-vandermint-700: #3d6266;
--color-vandermint-800: #2b484b;
--color-vandermint-900: #1d3234;
--color-vandermint-950: #0d1e1f;
}SCSS
$vandermint: #abdee4;
$vandermint-rgb: 171, 222, 228;
$vandermint-light: mix(#fff, $vandermint, 20%);
$vandermint-dark: mix(#000, $vandermint, 20%);
.element {
color: $vandermint;
box-shadow: 0 0 0 2px rgba($vandermint, 0.35);
}