命名颜色 · #7FBA9E
Froggy Pond
Froggy Pond 即 #7FBA9E：rgb(127 186 158)、hsl(152 30% 61%)、oklch(0.74 0.074 163.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Froggy Pond color name →
#7FBA9E
oklch(0.74 0.074 163.4)
颜色转换
- HEX
- #7fba9e
- RGB
- rgb(127 186 158)
- HSL
- hsl(152 30% 61%)
- HWB
- hwb(152 50% 27%)
- OKLCH
- oklch(0.74 0.074 163.4)
- OKLab
- oklab(0.74 -0.071 0.021)
- CIE Lab
- lab(70.87 -24.49 7.86)
- LCH
- lch(70.87 25.72 162.2)
- CMYK
- cmyk(32% 0% 15% 27%)
浅色调 · 深色调 · 灰色调
浅色调
- 8CC1A7
- 99C8B1
- A6CFBA
- B3D5C4
- BFDCCE
- CCE3D7
- D9EAE1
- E5F1EB
- F2F8F5
深色调
- 6EA189
- 5D8974
- 4C7260
- 3C5C4D
- 2D463A
- 1F3229
- 111E18
- 060D09
- 010201
灰色调
- 80B49B
- 80AE98
- 81A895
- 81A392
- 819D8F
- 81978C
- 819189
- 818B86
- 818683
配色和谐
互补色 +180°
- 7FBA9E
Froggy Pond
- CD99B7
≈ Morning Glory Pink
类似色 -30° +30°
- 7FBA9E
Froggy Pond
- 99B586
≈ Mistletoe Kiss
- 70BAB8
≈ Earth Eclipse
三角配色 +120° +240°
- 7FBA9E
Froggy Pond
- A4A5D9
≈ Sorbet Ice Mauve
- D39C86
≈ Dusty Coral
分裂互补色 +150° +210°
- 7FBA9E
Froggy Pond
- BC9ECC
≈ Turnip Crown
- D5989D
≈ Tobermory
四角配色 +90° +180° +270°
- 7FBA9E
Froggy Pond
- 8AAED9
≈ Boy Blue
- CD99B7
≈ Morning Glory Pink
- C7A477
≈ Outback
对比度与无障碍
Ag
Fail白底
WCAG 2.22:1 · APCA Lc 44
Ag
AAA黑底
WCAG 9.41:1 · APCA Lc 58
最佳文字颜色: #000000
WCAG 9.41:1 (AAA) · APCA Lc 58
Contrast pairs
代码片段
CSS
:root {
--froggy-pond: #7fba9e;
--froggy-pond-rgb: 127 186 158;
--froggy-pond-oklch: oklch(0.74 0.074 163.4);
}
.element {
color: var(--froggy-pond);
background-color: hsl(152 30% 61%);
border-color: oklch(0.74 0.074 163.4);
}Tailwind CSS v4
@theme {
--color-froggy-pond: #7fba9e;
--color-froggy-pond-50: #e3fcf0;
--color-froggy-pond-100: #d2f0e2;
--color-froggy-pond-200: #b8dfcd;
--color-froggy-pond-300: #94c4ae;
--color-froggy-pond-400: #75ad92;
--color-froggy-pond-500: #559678;
--color-froggy-pond-600: #487f66;
--color-froggy-pond-700: #3a6552;
--color-froggy-pond-800: #2a4a3a;
--color-froggy-pond-900: #1c3428;
--color-froggy-pond-950: #0c1f16;
}SCSS
$froggy-pond: #7fba9e;
$froggy-pond-rgb: 127, 186, 158;
$froggy-pond-light: mix(#fff, $froggy-pond, 20%);
$froggy-pond-dark: mix(#000, $froggy-pond, 20%);
.element {
color: $froggy-pond;
box-shadow: 0 0 0 2px rgba($froggy-pond, 0.35);
}