最接近的命名颜色 · #A0CAE2
#A0CAE2
最接近的命名颜色: Vive le Vent
#A0CAE2（rgb(160 202 226)、hsl(202 53% 76%)、oklch(0.817 0.056 233.4)）最接近命名颜色 Vive le Vent。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#A0CAE2
oklch(0.817 0.056 233.4)
颜色转换
- HEX
- #a0cae2
- RGB
- rgb(160 202 226)
- HSL
- hsl(202 53% 76%)
- HWB
- hwb(202 63% 11%)
- OKLCH
- oklch(0.817 0.056 233.4)
- OKLab
- oklab(0.817 -0.033 -0.045)
- CIE Lab
- lab(78.91 -10.21 -16.74)
- LCH
- lch(78.91 19.61 238.6)
- CMYK
- cmyk(29% 11% 0% 11%)
浅色调 · 深色调 · 灰色调
浅色调
- AACFE5
- B3D5E8
- BDDAEB
- C6DFEE
- D0E4F1
- D9EAF4
- E2EFF6
- ECF4F9
- F5FAFC
深色调
- 8BAFC4
- 7695A8
- 617C8C
- 4E6471
- 3B4D57
- 29373E
- 192227
- 090F12
- 010203
灰色调
- 9DC2D8
- 9ABBCE
- 97B3C4
- 94ACBA
- 91A4B0
- 8D9DA6
- 8A969D
- 878E93
- 838789
配色和谐
互补色 +180°
- A0CAE2
Vive le Vent
- E1BAA2
≈ Warming Peach
类似色 -30° +30°
- A0CAE2
Vive le Vent
- 99CED3
≈ Peppermint Twist
- B1C4E8
≈ Promise Keeping
三角配色 +120° +240°
- A0CAE2
Vive le Vent
- E1B5C6
≈ Mental Floss
- C3C89E
≈ Watercress Pesto
分裂互补色 +150° +210°
- A0CAE2
Vive le Vent
- E5B6B2
≈ Pink Dust
- D5C19A
≈ Dakota Trail
四角配色 +90° +180° +270°
- A0CAE2
Vive le Vent
- D6B8D8
≈ Lilac Haze
- E1BAA2
≈ Warming Peach
- AECDAC
≈ Spinach Dip
对比度与无障碍
Ag
Fail白底
WCAG 1.74:1 · APCA Lc 32
Ag
AAA黑底
WCAG 12.04:1 · APCA Lc 71
最佳文字颜色: #000000
WCAG 12.04:1 (AAA) · APCA Lc 71
Contrast pairs
代码片段
CSS
:root {
--vive-le-vent: #a0cae2;
--vive-le-vent-rgb: 160 202 226;
--vive-le-vent-oklch: oklch(0.817 0.056 233.4);
}
.element {
color: var(--vive-le-vent);
background-color: hsl(202 53% 76%);
border-color: oklch(0.817 0.056 233.4);
}Tailwind CSS v4
@theme {
--color-vive-le-vent: #a0cae2;
--color-vive-le-vent-50: #e7f8ff;
--color-vive-le-vent-100: #d7ebf8;
--color-vive-le-vent-200: #bed9e9;
--color-vive-le-vent-300: #9dbdd0;
--color-vive-le-vent-400: #7ea5bb;
--color-vive-le-vent-500: #608da6;
--color-vive-le-vent-600: #52778c;
--color-vive-le-vent-700: #415f70;
--color-vive-le-vent-800: #2e4652;
--color-vive-le-vent-900: #1f3039;
--color-vive-le-vent-950: #0f1d24;
}SCSS
$vive-le-vent: #a0cae2;
$vive-le-vent-rgb: 160, 202, 226;
$vive-le-vent-light: mix(#fff, $vive-le-vent, 20%);
$vive-le-vent-dark: mix(#000, $vive-le-vent, 20%);
.element {
color: $vive-le-vent;
box-shadow: 0 0 0 2px rgba($vive-le-vent, 0.35);
}