命名颜色 · #6CC1BB
Tropic Tide
Tropic Tide 即 #6CC1BB：rgb(108 193 187)、hsl(176 41% 59%)、oklch(0.756 0.083 189.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Tropic Tide color name →
#6CC1BB
oklch(0.756 0.083 189.6)
颜色转换
- HEX
- #6cc1bb
- RGB
- rgb(108 193 187)
- HSL
- hsl(176 41% 59%)
- HWB
- hwb(176 42% 24%)
- OKLCH
- oklch(0.756 0.083 189.6)
- OKLab
- oklab(0.756 -0.082 -0.014)
- CIE Lab
- lab(72.61 -28.07 -5.46)
- LCH
- lch(72.61 28.6 191)
- CMYK
- cmyk(44% 0% 3% 24%)
浅色调 · 深色调 · 灰色调
浅色调
- 7DC7C2
- 8CCDC8
- 9BD4CF
- AADAD6
- B8E0DD
- C7E6E3
- D5EDEA
- E3F3F1
- F1F9F8
深色调
- 5DA7A2
- 4E8F8A
- 407773
- 325F5C
- 254946
- 193432
- 0D201F
- 040E0D
- 000202
灰色调
- 70BAB5
- 73B4AF
- 76ADA9
- 78A7A3
- 7AA09D
- 7C9A97
- 7E9391
- 7F8D8B
- 7F8686
配色和谐
互补色 +180°
- 6CC1BB
Tropic Tide
- DF9AA4
≈ Cherry Ice
类似色 -30° +30°
- 6CC1BB
Tropic Tide
- 80C09D
≈ Willow Hedge
- 6FBDD4
≈ Cologne
三角配色 +120° +240°
- 6CC1BB
Tropic Tide
- C0A1D8
≈ Enchanted Lavender
- D2A775
≈ Mulled Spice
分裂互补色 +150° +210°
- 6CC1BB
Tropic Tide
- D49BC1
≈ Sweet Perfume
- DE9E88
≈ Chinese Ibis Brown
四角配色 +90° +180° +270°
- 6CC1BB
Tropic Tide
- A4AAE4
≈ Maximum Blue Purple
- DF9AA4
≈ Cherry Ice
- BCB172
≈ Misty Moss
对比度与无障碍
Ag
Fail白底
WCAG 2.10:1 · APCA Lc 41
Ag
AAA黑底
WCAG 9.98:1 · APCA Lc 61
最佳文字颜色: #000000
WCAG 9.98:1 (AAA) · APCA Lc 61
Contrast pairs
代码片段
CSS
:root {
--tropic-tide: #6cc1bb;
--tropic-tide-rgb: 108 193 187;
--tropic-tide-oklch: oklch(0.756 0.083 189.6);
}
.element {
color: var(--tropic-tide);
background-color: hsl(176 41% 59%);
border-color: oklch(0.756 0.083 189.6);
}Tailwind CSS v4
@theme {
--color-tropic-tide: #6cc1bb;
--color-tropic-tide-50: #dbfdfb;
--color-tropic-tide-100: #c9f1ef;
--color-tropic-tide-200: #ace0dd;
--color-tropic-tide-300: #84c5c2;
--color-tropic-tide-400: #5faea9;
--color-tropic-tide-500: #339892;
--color-tropic-tide-600: #2d807b;
--color-tropic-tide-700: #246763;
--color-tropic-tide-800: #194c47;
--color-tropic-tide-900: #103531;
--color-tropic-tide-950: #02201d;
}SCSS
$tropic-tide: #6cc1bb;
$tropic-tide-rgb: 108, 193, 187;
$tropic-tide-light: mix(#fff, $tropic-tide, 20%);
$tropic-tide-dark: mix(#000, $tropic-tide, 20%);
.element {
color: $tropic-tide;
box-shadow: 0 0 0 2px rgba($tropic-tide, 0.35);
}