命名颜色 · #A4DDD3
Sparkling Mint
Sparkling Mint 即 #A4DDD3：rgb(164 221 211)、hsl(169 46% 75%)、oklch(0.856 0.06 182.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Sparkling Mint color name →
#A4DDD3
oklch(0.856 0.06 182.9)
颜色转换
- HEX
- #a4ddd3
- RGB
- rgb(164 221 211)
- HSL
- hsl(169 46% 75%)
- HWB
- hwb(169 64% 13%)
- OKLCH
- oklch(0.856 0.06 182.9)
- OKLab
- oklab(0.856 -0.06 -0.003)
- CIE Lab
- lab(83.99 -20.5 -1.31)
- LCH
- lch(83.99 20.54 183.6)
- CMYK
- cmyk(26% 0% 5% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- ADE0D7
- B7E4DC
- C0E7E0
- C9EBE4
- D2EEE9
- DBF2ED
- E4F5F2
- EDF8F6
- F6FCFB
深色调
- 8EC0B7
- 79A49C
- 648882
- 506E69
- 3D5551
- 2B3D3A
- 1A2624
- 0A1110
- 010202
灰色调
- A1D3CA
- 9ECAC2
- 9AC0B9
- 97B7B1
- 93AEA9
- 8FA4A0
- 8C9B98
- 889290
- 848988
配色和谐
互补色 +180°
- A4DDD3
Sparkling Mint
- F3C0CC
≈ Azalea Flower
类似色 -30° +30°
- A4DDD3
Sparkling Mint
- B3DCBD
≈ Ice Mist
- A2DBE7
≈ Havana Blue
三角配色 +120° +240°
- A4DDD3
Sparkling Mint
- D7C7F1
≈ Soap
- EDC8A8
≈ Caramel Ice
分裂互补色 +150° +210°
- A4DDD3
Sparkling Mint
- E8C2E1
≈ Sweet Alyssum
- F4C2B7
≈ Rustique
四角配色 +90° +180° +270°
- A4DDD3
Sparkling Mint
- C2CEF8
≈ Frost Fairy
- F3C0CC
≈ Azalea Flower
- DDCFA3
≈ Summer Solstice
对比度与无障碍
Ag
Fail白底
WCAG 1.51:1 · APCA Lc 24
Ag
AAA黑底
WCAG 13.86:1 · APCA Lc 79
最佳文字颜色: #000000
WCAG 13.86:1 (AAA) · APCA Lc 79
Contrast pairs
代码片段
CSS
:root {
--sparkling-mint: #a4ddd3;
--sparkling-mint-rgb: 164 221 211;
--sparkling-mint-oklch: oklch(0.856 0.06 182.9);
}
.element {
color: var(--sparkling-mint);
background-color: hsl(169 46% 75%);
border-color: oklch(0.856 0.06 182.9);
}Tailwind CSS v4
@theme {
--color-sparkling-mint: #a4ddd3;
--color-sparkling-mint-50: #e3fbf7;
--color-sparkling-mint-100: #d3efea;
--color-sparkling-mint-200: #b9ddd7;
--color-sparkling-mint-300: #95c2bb;
--color-sparkling-mint-400: #76aaa2;
--color-sparkling-mint-500: #56938a;
--color-sparkling-mint-600: #497d74;
--color-sparkling-mint-700: #3a645d;
--color-sparkling-mint-800: #2a4943;
--color-sparkling-mint-900: #1c332f;
--color-sparkling-mint-950: #0c1f1b;
}SCSS
$sparkling-mint: #a4ddd3;
$sparkling-mint-rgb: 164, 221, 211;
$sparkling-mint-light: mix(#fff, $sparkling-mint, 20%);
$sparkling-mint-dark: mix(#000, $sparkling-mint, 20%);
.element {
color: $sparkling-mint;
box-shadow: 0 0 0 2px rgba($sparkling-mint, 0.35);
}