复制色值
HEX / RGB / CMYK 一键复制给研发。
HEX
#F0EEE9
RGB
rgb(240, 238, 233)
CMYK
0, 1, 3, 6
搭配方案
单色、类似色、互补色、三色组，直接复制使用。
Minimal Editorial · 极简编辑风
适合：品牌官网、作品集、杂志排版、极简 UI
#F0EEE9
1
#1F2937
2
#9CA3AF
3
#435070
4
#C8A96A
5
Warm Cozy · 奶油摩卡
适合：生活方式品牌、咖啡/烘焙、家居电商
#F0EEE9
1
#6B4F3A
2
#A58273
3
#888F56
4
#2D1E17
5
Modern Contrast · 冷静高级
适合：科技产品、B2B、强调对比的 UI
#F0EEE9
1
#111827
2
#3B5B7A
3
#D1D5DB
4
#D94F4F
5
Coastal Airy · 海岸清爽
适合：旅行、香氛、婚礼/活动物料
#F0EEE9
1
#A7D7C5
2
#1B3A57
3
#D9C6A5
4
#E58B7B
5
Japandi · 侘寂日式
适合：家居、家具、空间视觉、品牌手册
#F0EEE9
1
#B7A99A
2
#8B6F5A
3
#888F56
4
#2B2B2B
5
Luxury Night · 轻奢夜色
适合：美妆、珠宝、酒类（或任何“高端感”视觉）
#F0EEE9
1
#724983
2
#C48F7A
3
#2F2F35
4
#D4C0CF
5
Citrus Pop · 清新柑橘
适合：夏季活动、快消、电商促销主图
#F0EEE9
1
#E7C547
2
#7FAF3B
3
#539381
4
#2B2B2B
5
Neutral Scale · 纯净中性色阶
适合：设计系统底盘、PPT 主题、统一全站质感
#FFFFFF
1
#F0EEE9
2
#E5E7EB
3
#A3A3A3
4
#374151
5
导出
复制 CSS 变量或 Tailwind 配置。
#F0EEE9
CSS Variables
:root {
--year-base: #F0EEE9;
--year-base-contrast: #111827;
--year-accent-1: #1F2937;
--year-accent-2: #9CA3AF;
--year-accent-3: #435070;
--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 #9CA3AF
电商主图
New Drop · #F0EEE9-20%
Primary CTA
Secondary
使用建议
Summary
轻盈安定的白色，兼顾科技感与自然气息。
Notes
用作留白背景，字体保持炭黑。结构可用深蓝或柔和墨绿，点缀荧光色提升未来感。
Tips
- 标签: ui
- 标签: branding
- 标签: ecommerce
应用资源
Speed up screens with ready-made UI kits, icons, and design tokens.
UI kit & icons