tansci/.claude/skills/fa-theme-customizer/references/design-styles.md

设计风格配色参考目录

收录 20+ 种专业设计风格，每种风格提供核心配色建议（OKLCH 格式）。

目录

1. 日系动画风格
2. 科技/未来风格
3. 自然/有机风格
4. 复古/怀旧风格
5. 极简主义风格
6. 艺术设计流派
7. 品牌/商业风格
8. tweakcn 社区风格参考
9. OKLCH 快速参考

---

日系动画风格

吉卜力（Ghibli）

宫崎骏作品的自然温暖色调，大地色系与天空蓝的结合。

变量	明色 L C H	暗色 L C H	说明
background	0.97 0.008 85	0.18 0.012 85	米白/深棕
primary	0.62 0.12 145	0.55 0.10 145	森林绿
secondary	0.88 0.06 85	0.28 0.06 85	暖米色
accent	0.75 0.10 85	0.35 0.08 85	大地棕
muted	0.92 0.04 85	0.25 0.04 85	浅米色

灵感：《龙猫》草绿、《千与千寻》暖橙、《哈尔的移动城堡》天蓝

新海诚（Makoto Shinkai）

高饱和度的天空蓝与城市光晕，强烈的光影对比。

变量	明色 L C H	暗色 L C H	说明
background	0.97 0.005 240	0.12 0.015 240	冷白/深夜蓝
primary	0.58 0.22 240	0.52 0.20 240	天空蓝
accent	0.75 0.15 55	0.65 0.18 55	黄昏橙
muted	0.92 0.03 240	0.22 0.03 240	淡蓝灰

灵感：《你的名字》黄昏渐变、《天气之子》雨后天空

---

科技/未来风格

赛博朋克（Cyberpunk）

霓虹粉紫与深黑的强烈对比，高饱和度荧光色。

变量	明色 L C H	暗色 L C H	说明
background	0.95 0.005 300	0.08 0.01 300	浅紫白/极深黑
primary	0.65 0.28 330	0.72 0.30 330	霓虹粉
secondary	0.60 0.25 280	0.55 0.22 280	电子紫
accent	0.75 0.25 195	0.70 0.28 195	青色荧光
border	0.85 0.08 300	0.25 0.08 300	紫色边框

灵感：《银翼杀手 2049》、《赛博朋克 2077》

终端/黑客（Terminal）

经典绿色终端风格，深黑背景配荧光绿。

变量	明色 L C H	暗色 L C H	说明
background	0.96 0.01 145	0.08 0.01 145	浅绿白/终端黑
primary	0.65 0.22 145	0.72 0.25 145	荧光绿
foreground	0.15 0.01 145	0.90 0.15 145	深绿/亮绿
muted	0.88 0.04 145	0.18 0.04 145	暗绿

深空（Deep Space）

NASA 风格的深蓝黑与星云紫，科技感十足。

变量	明色 L C H	暗色 L C H	说明
background	0.96 0.008 250	0.10 0.015 250	冷白/深空蓝
primary	0.55 0.20 260	0.60 0.22 260	星云蓝
accent	0.65 0.18 300	0.60 0.20 300	星云紫
secondary	0.88 0.05 250	0.20 0.05 250	深蓝灰

---

自然/有机风格

莫兰迪（Morandi）

低饱和度的灰调色彩，优雅克制，源自意大利画家乔治·莫兰迪。

变量	明色 L C H	暗色 L C H	说明
background	0.95 0.008 60	0.20 0.008 60	灰米白/深灰棕
primary	0.62 0.06 180	0.55 0.05 180	灰蓝绿
secondary	0.85 0.04 60	0.30 0.04 60	灰米色
accent	0.72 0.05 30	0.40 0.04 30	灰玫瑰
muted	0.90 0.02 60	0.25 0.02 60	浅灰

特点：所有颜色饱和度（C值）控制在 0.02~0.08 之间

北欧极简（Scandinavian）

白桦木色调，干净的白色与自然木色，受北欧设计影响。

变量	明色 L C H	暗色 L C H	说明
background	0.98 0.005 80	0.16 0.008 80	纯白/深木色
primary	0.45 0.08 80	0.55 0.06 80	深木棕
secondary	0.92 0.03 80	0.26 0.03 80	浅木色
accent	0.70 0.12 145	0.55 0.10 145	苔藓绿

日式侘寂（Wabi-Sabi）

不完美之美，枯山水的灰褐色调，禅意十足。

变量	明色 L C H	暗色 L C H	说明
background	0.94 0.01 70	0.18 0.01 70	宣纸白/墨色
primary	0.40 0.05 70	0.50 0.04 70	枯叶棕
accent	0.65 0.04 145	0.45 0.03 145	苔绿
border	0.82 0.03 70	0.28 0.03 70	淡墨色

---

复古/怀旧风格

蒸汽朋克（Steampunk）

维多利亚时代的铜色与皮革棕，工业齿轮美学。

变量	明色 L C H	暗色 L C H	说明
background	0.92 0.02 70	0.16 0.02 70	羊皮纸/深棕
primary	0.62 0.12 55	0.58 0.14 55	铜金色
secondary	0.80 0.06 70	0.28 0.06 70	皮革棕
accent	0.55 0.08 200	0.50 0.10 200	铜绿

洛可可（Rococo）

18世纪法国宫廷风格，粉彩色调，精致华丽。

变量	明色 L C H	暗色 L C H	说明
background	0.97 0.01 330	0.18 0.01 330	玫瑰白/深玫瑰
primary	0.72 0.12 330	0.62 0.10 330	粉玫瑰
secondary	0.90 0.05 280	0.28 0.05 280	淡薰衣草
accent	0.80 0.08 55	0.45 0.08 55	香槟金

复古美式（Retro Americana）

50-70年代美国风格，暖橙与奶油色。

变量	明色 L C H	暗色 L C H	说明
background	0.96 0.02 80	0.18 0.02 80	奶油色/深棕
primary	0.68 0.18 45	0.62 0.16 45	复古橙
secondary	0.88 0.06 80	0.28 0.06 80	奶油黄
accent	0.55 0.12 25	0.50 0.10 25	砖红

---

极简主义风格

包豪斯（Bauhaus）

功能主义美学，原色（红黄蓝）与黑白灰的几何构成。

变量	明色 L C H	暗色 L C H	说明
background	1 0 0	0.14 0 0	纯白/纯黑
primary	0.55 0.25 260	0.60 0.22 260	包豪斯蓝
secondary	0.90 0 0	0.25 0 0	浅灰/深灰
accent	0.65 0.25 25	0.60 0.22 25	包豪斯红

瑞士国际主义（Swiss International）

网格系统，Helvetica 精神，黑白红三色。

变量	明色 L C H	暗色 L C H	说明
background	1 0 0	0.12 0 0	纯白/近黑
primary	0.50 0.25 25	0.55 0.22 25	瑞士红
foreground	0.10 0 0	0.95 0 0	近黑/近白
muted	0.92 0 0	0.22 0 0	浅灰/深灰

---

艺术设计流派

孟菲斯（Memphis）

80年代意大利设计运动，高饱和度几何图案，大胆撞色。

变量	明色 L C H	暗色 L C H	说明
background	0.97 0.01 300	0.15 0.01 300	浅紫白/深紫
primary	0.70 0.25 330	0.65 0.22 330	孟菲斯粉
secondary	0.85 0.08 300	0.30 0.08 300	薰衣草
accent	0.75 0.22 85	0.70 0.20 85	柠檬黄

新艺术运动（Art Nouveau）

有机曲线，自然植物纹样，金色与绿色。

变量	明色 L C H	暗色 L C H	说明
background	0.96 0.01 80	0.16 0.01 80	象牙白/深橄榄
primary	0.55 0.12 145	0.50 0.10 145	橄榄绿
accent	0.72 0.15 75	0.65 0.12 75	金色
secondary	0.88 0.04 80	0.26 0.04 80	米色

波普艺术（Pop Art）

安迪·沃霍尔风格，高对比度，鲜艳原色。

变量	明色 L C H	暗色 L C H	说明
background	1 0 0	0.10 0 0	纯白/纯黑
primary	0.72 0.28 25	0.68 0.25 25	波普红
secondary	0.88 0.20 85	0.35 0.15 85	波普黄
accent	0.60 0.25 240	0.55 0.22 240	波普蓝

---

品牌/商业风格

科技蓝（Tech Blue）

企业级科技感，参考 IBM、Microsoft 风格。

变量	明色 L C H	暗色 L C H	说明
background	0.98 0.003 240	0.13 0.005 240	冷白/深蓝黑
primary	0.55 0.20 250	0.60 0.18 250	科技蓝
secondary	0.92 0.02 240	0.22 0.02 240	浅蓝灰
accent	0.65 0.15 200	0.58 0.12 200	青蓝

金融绿（Finance Green）

稳健专业，参考彭博、路透风格。

变量	明色 L C H	暗色 L C H	说明
background	0.97 0.005 145	0.12 0.008 145	冷白/深绿黑
primary	0.52 0.18 145	0.58 0.16 145	金融绿
secondary	0.90 0.03 145	0.22 0.03 145	浅绿灰
accent	0.65 0.12 85	0.60 0.10 85	金色点缀

奢华黑金（Luxury）

高端品牌风格，深黑配金色，参考 Chanel、Rolex。

变量	明色 L C H	暗色 L C H	说明
background	0.96 0.005 75	0.10 0.005 75	象牙白/近黑
primary	0.68 0.12 75	0.72 0.14 75	金色
foreground	0.12 0.005 75	0.92 0.005 75	近黑/近白
border	0.80 0.06 75	0.25 0.06 75	金色边框

---

tweakcn 社区风格参考

tweakcn（https://tweakcn.com/community）是 shadcn/ui 的主题社区，提供大量社区贡献的配色方案。

如何使用社区主题

1. 访问 https://tweakcn.com/community 浏览社区主题
2. 找到喜欢的主题，点击查看其 CSS 变量
3. 社区主题使用标准 shadcn CSS 变量格式，可直接转换

转换说明

社区主题的 CSS 变量格式通常为：

:root {
  --background: oklch(1 0 0);
  --primary: oklch(0.623 0.214 259.815);
}

转换到框架格式时，去掉 oklch() 包裹，只保留三个数值，再补充框架专属的 --g-* 变量。

知名社区主题风格

• Catppuccin — 柔和粉彩，有 Latte/Frappé/Macchiato/Mocha 四个变体
• Dracula — 经典暗色，紫色系
• Nord — 北极极光，冷蓝色系
• Solarized — 护眼配色，暖黄底色
• Gruvbox — 复古暖色，棕黄系
• Tokyo Night — 深蓝紫夜晚城市风格
• One Dark — Atom 编辑器经典暗色主题
• Everforest — 森林绿色系，护眼舒适

---

OKLCH 快速参考

亮度（L）

• 1.0 纯白 / 0.97~0.99 明色背景 / 0.50~0.70 主色常用范围 / 0.10~0.18 暗色背景 / 0.0 纯黑

饱和度（C）

• 0 无彩色 / 0.01~0.05 极低（莫兰迪）/ 0.15~0.22 中等（大多数主题）/ 0.25+ 高饱和（赛博朋克）

色相（H）

• 0~30 红 / 30~60 橙棕 / 60~90 黄 / 90~150 绿 / 150~210 青 / 210~270 蓝 / 270~330 紫 / 330~360 粉玫瑰