复制色值
HEX / RGB / CMYK 一键复制给研发。
HEX
#F5DF4D
RGB
rgb(245, 223, 77)
CMYK
3, 1, 78, 0
搭配方案
单色、类似色、互补色、三色组，直接复制使用。
Monochrome Depth
Light and dark steps around the hero color.
#C6AD0C
1
#F2D61C
2
#F5DF4D
3
#F7E77D
4
#FBF2B7
5
Analogous Flow
Neighbors on the color wheel for a soft gradient story.
#F37E30
1
#F5B74D
2
#F5DF4D
3
#E3F54D
4
#C7F66A
5
Complementary Contrast
Opposites that add clarity and focus.
#F5DF4D
1
#3049F3
2
#7384F7
3
#E0C61A
4
#F1E8AC
5
Triadic Balance
Three evenly spaced hues for versatile layouts.
#F5DF4D
1
#4DF5DF
2
#DF4DF5
3
#E9D12F
4
#F4E795
5
Split Complementary
Balanced contrast with two supporting accents.
#F5DF4D
1
#4DB7F5
2
#8B4DF5
3
#DBC114
4
#F7ECA6
5
导出
复制 CSS 变量或 Tailwind 配置。
#F5DF4D
CSS Variables
:root {
--year-base: #F5DF4D;
--year-base-contrast: #111827;
--year-accent-1: #F2D61C;
--year-accent-2: #F5DF4D;
--year-accent-3: #F7E77D;
--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 #F5DF4D
电商主图
New Drop · #F5DF4D-20%
Primary CTA
Secondary
使用建议
Summary
明快又友好的亮黄，与终极灰成对出现，传递坚韧与希望。
Notes
把它当强调色搭配灰、炭黑或海军蓝。界面中尽量用深色文字，避免大面积亮黄造成眩光。与有质感的材质和醒目的排版组合效果更好。
Tips
- 标签: optimism
- 标签: branding
- 标签: packaging
应用资源
Speed up screens with ready-made UI kits, icons, and design tokens.
UI kit & icons