命名颜色 · #ABE2D6
Capri Water Blue
Capri Water Blue 即 #ABE2D6：rgb(171 226 214)、hsl(167 49% 78%)、oklch(0.872 0.059 179.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Capri Water Blue color name →
#ABE2D6
oklch(0.872 0.059 179.9)
颜色转换
- HEX
- #abe2d6
- RGB
- rgb(171 226 214)
- HSL
- hsl(167 49% 78%)
- HWB
- hwb(167 67% 11%)
- OKLCH
- oklch(0.872 0.059 179.9)
- OKLab
- oklab(0.872 -0.059 0)
- CIE Lab
- lab(85.84 -20.13 -0.15)
- LCH
- lch(85.84 20.13 180.4)
- CMYK
- cmyk(24% 0% 5% 11%)
浅色调 · 深色调 · 灰色调
浅色调
- B4E5DA
- BCE8DE
- C5EBE2
- CDEEE6
- D6F1EA
- DEF4EE
- E6F6F3
- EFF9F7
- F7FCFB
深色调
- 94C4BA
- 7EA89E
- 688C84
- 54716A
- 405752
- 2D3E3B
- 1B2725
- 0B1210
- 010302
灰色调
- A7D8CD
- A3CEC4
- 9FC4BB
- 9BBAB3
- 96B0AA
- 92A6A1
- 8E9C99
- 899391
- 858988
配色和谐
互补色 +180°
- ABE2D6
Capri Water Blue
- F7C5D3
≈ Sullivan’s Heart
类似色 -30° +30°
- ABE2D6
Capri Water Blue
- BAE0C1
≈ Lattice Work
- A8E0EA
≈ Quiet Nook
三角配色 +120° +240°
- ABE2D6
Capri Water Blue
- DACDF6
≈ Pale Lavender
- F3CCAF
≈ Cosy Coverlet
分裂互补色 +150° +210°
- ABE2D6
Capri Water Blue
- ECC7E7
≈ Venetian Rose
- F9C7BE
≈ Dress Up
四角配色 +90° +180° +270°
- ABE2D6
Capri Water Blue
- C5D4FC
≈ Pale Phthalo Blue
- F7C5D3
≈ Sullivan’s Heart
- E4D4A9
≈ Bakelite
对比度与无障碍
Ag
Fail白底
WCAG 1.44:1 · APCA Lc 21
Ag
AAA黑底
WCAG 14.58:1 · APCA Lc 82
最佳文字颜色: #000000
WCAG 14.58:1 (AAA) · APCA Lc 82
Contrast pairs
代码片段
CSS
:root {
--capri-water-blue: #abe2d6;
--capri-water-blue-rgb: 171 226 214;
--capri-water-blue-oklch: oklch(0.872 0.059 179.9);
}
.element {
color: var(--capri-water-blue);
background-color: hsl(167 49% 78%);
border-color: oklch(0.872 0.059 179.9);
}Tailwind CSS v4
@theme {
--color-capri-water-blue: #abe2d6;
--color-capri-water-blue-50: #e4fbf6;
--color-capri-water-blue-100: #d4efe9;
--color-capri-water-blue-200: #baddd6;
--color-capri-water-blue-300: #97c2b9;
--color-capri-water-blue-400: #78aaa0;
--color-capri-water-blue-500: #589387;
--color-capri-water-blue-600: #4b7d73;
--color-capri-water-blue-700: #3c645c;
--color-capri-water-blue-800: #2b4942;
--color-capri-water-blue-900: #1d332e;
--color-capri-water-blue-950: #0d1e1b;
}SCSS
$capri-water-blue: #abe2d6;
$capri-water-blue-rgb: 171, 226, 214;
$capri-water-blue-light: mix(#fff, $capri-water-blue, 20%);
$capri-water-blue-dark: mix(#000, $capri-water-blue, 20%);
.element {
color: $capri-water-blue;
box-shadow: 0 0 0 2px rgba($capri-water-blue, 0.35);
}