命名颜色 · #ABCCC3
Baby Aqua
Baby Aqua 即 #ABCCC3：rgb(171 204 195)、hsl(164 24% 74%)、oklch(0.818 0.037 177)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Baby Aqua color name →
#ABCCC3
oklch(0.818 0.037 177)
颜色转换
- HEX
- #abccc3
- RGB
- rgb(171 204 195)
- HSL
- hsl(164 24% 74%)
- HWB
- hwb(164 67% 20%)
- OKLCH
- oklch(0.818 0.037 177)
- OKLab
- oklab(0.818 -0.037 0.002)
- CIE Lab
- lab(79.42 -12.77 0.63)
- LCH
- lch(79.42 12.79 177.2)
- CMYK
- cmyk(16% 0% 4% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- B3D1C9
- BCD6CF
- C4DBD5
- CCE0DB
- D5E5E1
- DDEAE7
- E6F0ED
- EEF5F3
- F7FAF9
深色调
- 94B1A9
- 7E9790
- 687E78
- 546560
- 404E4A
- 2D3734
- 1B2220
- 0B0F0E
- 010202
灰色调
- A7C4BC
- A2BCB5
- 9EB5AE
- 9AADA8
- 96A5A1
- 919E9A
- 8D9694
- 898F8D
- 848786
配色和谐
互补色 +180°
- ABCCC3
Baby Aqua
- D9BAC4
≈ Hosanna
类似色 -30° +30°
- ABCCC3
Baby Aqua
- B4CBB6
≈ Aqua Dream
- A8CBD0
≈ Sky Chase
三角配色 +120° +240°
- ABCCC3
Baby Aqua
- C6BFDA
≈ Purple Dragon
- D7BEAD
≈ Elusive Dawn
分裂互补色 +150° +210°
- ABCCC3
Baby Aqua
- D1BCD0
≈ Tamed Beauty
- DBBBB7
≈ Rose Yoghurt
四角配色 +90° +180° +270°
- ABCCC3
Baby Aqua
- B9C4DD
≈ Etherium Blue
- D9BAC4
≈ Hosanna
- CEC3A9
≈ Threaded Loom
对比度与无障碍
Ag
Fail白底
WCAG 1.72:1 · APCA Lc 31
Ag
AAA黑底
WCAG 12.15:1 · APCA Lc 72
最佳文字颜色: #000000
WCAG 12.15:1 (AAA) · APCA Lc 72
Contrast pairs
代码片段
CSS
:root {
--baby-aqua: #abccc3;
--baby-aqua-rgb: 171 204 195;
--baby-aqua-oklch: oklch(0.818 0.037 177);
}
.element {
color: var(--baby-aqua);
background-color: hsl(164 24% 74%);
border-color: oklch(0.818 0.037 177);
}Tailwind CSS v4
@theme {
--color-baby-aqua: #abccc3;
--color-baby-aqua-50: #eaf9f5;
--color-baby-aqua-100: #dbece8;
--color-baby-aqua-200: #c4dad4;
--color-baby-aqua-300: #a4beb8;
--color-baby-aqua-400: #88a69e;
--color-baby-aqua-500: #6c8f86;
--color-baby-aqua-600: #5c7971;
--color-baby-aqua-700: #49615a;
--color-baby-aqua-800: #354742;
--color-baby-aqua-900: #24312d;
--color-baby-aqua-950: #131d1a;
}SCSS
$baby-aqua: #abccc3;
$baby-aqua-rgb: 171, 204, 195;
$baby-aqua-light: mix(#fff, $baby-aqua, 20%);
$baby-aqua-dark: mix(#000, $baby-aqua, 20%);
.element {
color: $baby-aqua;
box-shadow: 0 0 0 2px rgba($baby-aqua, 0.35);
}