xuewuerduo
f468d532b1
包含以下模块： - antdv-next-admin: Vue 3 + TypeScript + Ant Design Vue 管理后台 - 设备/许可证/配件/耗材 CRUD 管理页面 - 基础数据管理 (分类/位置/制造商/型号/供应商) - 业务管理 (故障报修/盘点/资产分配/资产申请/交易记录) - 下拉选项改造 (ID输入框 → 搜索下拉选择) - 资产状态字典化 (接入sys_dict系统) - 界面文案优化 (设备→资产, 在库/在用/维修中/已报废) - 修复 console 警告 (popupClassName, 重复组件注册) - our-itam: Java Spring Boot + magic-api 后端服务 - fantastic-admin: 前端底层框架 (pnpm monorepo) - ciyo-itasset: CIYO 资产模块 - magic-script-skill: Claude Code skill 定义 - .claude: 对话历史记录 Co-Authored-By: Claude Code <noreply@anthropic.com>
293 lines
11 KiB
Markdown
293 lines
11 KiB
Markdown
# 设计风格配色参考目录
|
||
|
||
收录 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` 粉玫瑰
|