# 设计风格配色参考目录

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

## 目录

1. [日系动画风格](#日系动画风格)
2. [科技/未来风格](#科技未来风格)
3. [自然/有机风格](#自然有机风格)
4. [复古/怀旧风格](#复古怀旧风格)
5. [极简主义风格](#极简主义风格)
6. [艺术设计流派](#艺术设计流派)
7. [品牌/商业风格](#品牌商业风格)
8. [tweakcn 社区风格参考](#tweakcn-社区风格参考)
9. [OKLCH 快速参考](#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 变量格式通常为：
```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` 粉玫瑰