命名颜色 · #2AAA45
Vitalize
Vitalize 即 #2AAA45：rgb(42 170 69)、hsl(133 60% 42%)、oklch(0.649 0.178 146.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Vitalize color name →
#2AAA45
oklch(0.649 0.178 146.4)
颜色转换
- HEX
- #2aaa45
- RGB
- rgb(42 170 69)
- HSL
- hsl(133 60% 42%)
- HWB
- hwb(133 16% 33%)
- OKLCH
- oklch(0.649 0.178 146.4)
- OKLab
- oklab(0.649 -0.148 0.099)
- CIE Lab
- lab(61.39 -51.34 40.85)
- LCH
- lch(61.39 65.6 141.5)
- CMYK
- cmyk(75% 0% 59% 33%)
浅色调 · 深色调 · 灰色调
浅色调
- 4AB359
- 62BC6C
- 78C47F
- 8CCD91
- A0D6A3
- B3DEB6
- C6E6C8
- D9EFDA
- ECF7EC
深色调
- 23933B
- 1C7D31
- 166827
- 10531E
- 0A3F15
- 052D0C
- 021B05
- 010B02
- 000100
灰色调
- 3BA64D
- 48A254
- 529E5B
- 5B9A61
- 639667
- 6A926C
- 708E72
- 768977
- 7B857B
配色和谐
互补色 +180°
- 2AAA45
Vitalize
- C561C7
≈ Purple Urn Orchid
类似色 -30° +30°
- 2AAA45
Vitalize
- 8A9900
≈ BioShock
- 00A68C
≈ Brilliant Turquoise
三角配色 +120° +240°
- 2AAA45
Vitalize
- 5C86FA
≈ Skinny Jeans
- E75951
≈ Reductant
分裂互补色 +150° +210°
- 2AAA45
Vitalize
- 9B72ED
≈ Forgotten Purple
- DF5791
≈ Carmine Rose
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 3.02:1 · APCA Lc 57
Ag
AA黑底
WCAG 6.93:1 · APCA Lc 45
最佳文字颜色: #000000
WCAG 6.93:1 (AA) · APCA Lc 45
Contrast pairs
代码片段
CSS
:root {
--vitalize: #2aaa45;
--vitalize-rgb: 42 170 69;
--vitalize-oklch: oklch(0.649 0.178 146.4);
}
.element {
color: var(--vitalize);
background-color: hsl(133 60% 42%);
border-color: oklch(0.649 0.178 146.4);
}Tailwind CSS v4
@theme {
--color-vitalize: #2aaa45;
--color-vitalize-50: #d3ffd9;
--color-vitalize-100: #bff9c7;
--color-vitalize-200: #9eeaaa;
--color-vitalize-300: #71d083;
--color-vitalize-400: #48b95a;
--color-vitalize-500: #00a330;
--color-vitalize-600: #008a2b;
--color-vitalize-700: #006f22;
--color-vitalize-800: #085112;
--color-vitalize-900: #06390c;
--color-vitalize-950: #002301;
}SCSS
$vitalize: #2aaa45;
$vitalize-rgb: 42, 170, 69;
$vitalize-light: mix(#fff, $vitalize, 20%);
$vitalize-dark: mix(#000, $vitalize, 20%);
.element {
color: $vitalize;
box-shadow: 0 0 0 2px rgba($vitalize, 0.35);
}