复制色值
HEX / RGB / CMYK 一键复制给研发。
HEX
#A7DCA2
RGB
rgb(167, 220, 162)
CMYK
24, 0, 26, 14
搭配方案
单色、类似色、互补色、三色组，直接复制使用。
Monochrome Depth
Light and dark steps around the hero color.
#5BBD51
1
#85CE7E
2
#A7DCA2
3
#CBEAC8
4
#E3F4E1
5
Analogous Flow
Neighbors on the color wheel for a soft gradient story.
#B4D48C
1
#B5DCA3
2
#A7DCA2
3
#A3DCAB
4
#B9E4C9
5
Complementary Contrast
Opposites that add clarity and focus.
#A7DCA2
1
#CD8CD4
2
#E4C0E7
3
#7FBE79
4
#E6F0E5
5
Triadic Balance
Three evenly spaced hues for versatile layouts.
#A7DCA2
1
#A3A8DC
2
#DCA3A8
3
#91CA8C
4
#DAEDD9
5
Split Complementary
Balanced contrast with two supporting accents.
#A7DCA2
1
#BAA3DC
2
#DCA3C4
3
#75BF6E
4
#E4F3E3
5
导出
复制 CSS 变量或 Tailwind 配置。
#A7DCA2
CSS Variables
:root {
--year-base: #A7DCA2;
--year-base-contrast: #1F2937;
--year-accent-1: #85CE7E;
--year-accent-2: #A7DCA2;
--year-accent-3: #CBEAC8;
--year-surface: #f8fafc;
}Tailwind Config
theme: {
extend: {
colors: {
primary: 'var(--year-base)',
accent: 'var(--year-accent-1)',
surface: 'var(--year-surface)',
},
},
},场景预览
UI、海报、电商示例。
UI 界面
海报 / 社交
Launch Campaign
Design with #A7DCA2
电商主图
New Drop · #A7DCA2-20%
Primary CTA
Secondary
使用建议
Summary
清新富氧的薄荷绿，融合科技感与自然感。
Notes
配白、银、浅灰营造清爽科技感；用珊瑚或海军蓝做强调。适合界面底色、运动风与美妆包装。
Tips
- 标签: future
- 标签: wellbeing
- 标签: ui
应用资源
Speed up screens with ready-made UI kits, icons, and design tokens.
UI kit & icons