265 lines
6.7 KiB
Markdown
265 lines
6.7 KiB
Markdown
# PicStack 配色方案说明
|
||
|
||
## 🎨 主题概述
|
||
|
||
**主题名称**: 紫色渐变系 (Purple Gradient Theme)
|
||
**设计理念**: 创意、现代、优雅
|
||
**适用场景**: 图片管理、创作工具、设计平台
|
||
|
||
---
|
||
|
||
## 🌈 核心配色
|
||
|
||
### 主色系 (Primary Colors)
|
||
|
||
```css
|
||
深紫色 (Primary): #5B21B6 /* 深紫色 - 主按钮、主要交互（高对比度）*/
|
||
中深紫 (Secondary): #6D28D9 /* 中深紫 - 悬停状态、链接 */
|
||
中紫色 (Tertiary): #7C3AED /* 中紫色 - 信息提示、次要交互 */
|
||
浅紫色 (Light): #8B5CF6 /* 浅紫色 - 装饰元素 */
|
||
粉紫色 (Accent): #A78BFA /* 粉紫色 - 高亮、渐变 */
|
||
超深紫 (Active): #4C1D95 /* 超深紫 - 按钮激活状态 */
|
||
```
|
||
|
||
**使用场景**:
|
||
- 主按钮：#5B21B6（深紫）- 确保白色文字清晰可读
|
||
- 按钮悬停：#6D28D9（中深紫）
|
||
- 链接文字：#6D28D9（中深紫）
|
||
- Switch开关：#5B21B6（深紫）
|
||
- Slider滑块：#5B21B6（深紫）
|
||
- 选中状态：#5B21B6（深紫）
|
||
- 进度条：#5B21B6（深紫）
|
||
- Icon 图标：根据场景使用不同深度
|
||
|
||
### 辅助色系 (Secondary Colors)
|
||
|
||
```css
|
||
翡翠绿 (Success): #10B981 /* 成功状态、上传完成 */
|
||
琥珀色 (Warning): #F59E0B /* 警告提示、空间不足 */
|
||
红色 (Error): #EF4444 /* 错误状态、上传失败 */
|
||
粉色 (Highlight): #EC4899 /* 强调、渐变终点 */
|
||
```
|
||
|
||
### 背景色系 (Background Colors)
|
||
|
||
```css
|
||
基础背景: #FAFAF9 /* 页面最外层 */
|
||
容器背景: #FFFFFF /* 卡片、弹窗 */
|
||
布局背景: #F5F3FF /* 侧边栏、Header */
|
||
```
|
||
|
||
### 文本色系 (Text Colors)
|
||
|
||
```css
|
||
主文本: #1F2937 /* 标题、重要文字 */
|
||
副文本: #4B5563 /* 描述、说明文字 */
|
||
弱文本: #9CA3AF /* 次要信息 */
|
||
禁用文本: #D1D5DB /* 禁用状态 */
|
||
```
|
||
|
||
### 边框色系 (Border Colors)
|
||
|
||
```css
|
||
常规边框: #E5E7EB
|
||
浅边框: #F3F4F6
|
||
激活边框: #7C3AED /* 输入框聚焦 */
|
||
悬停边框: #A78BFA
|
||
```
|
||
|
||
---
|
||
|
||
## 🎭 渐变方案
|
||
|
||
### 主渐变 (Primary Gradient)
|
||
```css
|
||
background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
|
||
```
|
||
**用途**: Logo、按钮、装饰元素
|
||
|
||
### 紫蓝渐变 (Purple-Blue Gradient)
|
||
```css
|
||
background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
|
||
```
|
||
**用途**: 次要装饰、背景板
|
||
|
||
### 紫粉渐变 (Purple-Pink Gradient)
|
||
```css
|
||
background: linear-gradient(120deg, #A78BFA 0%, #F472B6 100%);
|
||
```
|
||
**用途**: 悬停效果、高亮区域
|
||
|
||
### 成功渐变 (Success Gradient)
|
||
```css
|
||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||
```
|
||
**用途**: 成功状态、完成标识
|
||
|
||
---
|
||
|
||
## 📊 组件配色示例
|
||
|
||
### 统计卡片 (Statistics Cards)
|
||
```
|
||
总文件数: 左边框 #7C3AED 数值 #7C3AED
|
||
已用空间: 左边框 #10B981 数值 #10B981
|
||
上传流量: 左边框 #8B5CF6 数值 #8B5CF6
|
||
月增长: 左边框 #EC4899 数值 #EC4899
|
||
```
|
||
|
||
### 进度条 (Progress Bar)
|
||
```css
|
||
strokeColor: {
|
||
'0%': '#7C3AED',
|
||
'100%': '#EC4899'
|
||
}
|
||
```
|
||
|
||
### 上传区域 (Upload Zone)
|
||
```
|
||
默认边框: #DDD6FE (淡紫色虚线)
|
||
悬停边框: #7C3AED (紫色)
|
||
悬停背景: linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%)
|
||
```
|
||
|
||
### Logo
|
||
```
|
||
背景: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%)
|
||
文字: 渐变色填充（同背景）
|
||
阴影: 0 4px 12px rgba(124, 58, 237, 0.25)
|
||
```
|
||
|
||
### 主按钮 (Primary Button)
|
||
```css
|
||
默认背景: #5B21B6 (深紫色，对比度 8.6:1，AAA 级)
|
||
文字颜色: #FFFFFF (纯白，强制显示)
|
||
文字样式: font-weight: 600, letter-spacing: 0.03em
|
||
文字阴影: 0 1px 3px rgba(0, 0, 0, 0.2)
|
||
悬停背景: #6D28D9 (中深紫，稍浅)
|
||
悬停阴影: 0 1px 4px rgba(0, 0, 0, 0.25)
|
||
激活背景: #4C1D95 (超深紫，更深)
|
||
激活阴影: 0 1px 2px rgba(0, 0, 0, 0.3)
|
||
按钮阴影: 0 4px 12px rgba(91, 33, 182, 0.3)
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 视觉层级
|
||
|
||
### 一级元素（最突出）
|
||
- 主按钮
|
||
- 激活状态
|
||
- 重要提示
|
||
- **颜色**: #5B21B6（深紫，高对比度）
|
||
|
||
### 二级元素（次要）
|
||
- 副按钮
|
||
- 链接文字
|
||
- 辅助信息
|
||
- 次要操作
|
||
- **颜色**: #6D28D9（中深紫）
|
||
|
||
### 三级元素（装饰）
|
||
- 信息提示
|
||
- Icon 图标
|
||
- **颜色**: #7C3AED（中紫）
|
||
|
||
### 四级元素（背景）
|
||
- 背景装饰
|
||
- 分割线
|
||
- 禁用状态
|
||
- **颜色**: #F5F3FF, #E5E7EB
|
||
|
||
---
|
||
|
||
## 🌟 设计亮点
|
||
|
||
### 1. 品牌差异化
|
||
- 区别于传统蓝色图床工具
|
||
- 紫色代表创意与设计
|
||
- 更符合内容创作者审美
|
||
|
||
### 2. 渐变运用
|
||
- Logo 采用紫粉渐变
|
||
- 进度条使用渐变填充
|
||
- 增强视觉层次感
|
||
|
||
### 3. 柔和过渡
|
||
- 使用淡紫色背景 (#F5F3FF)
|
||
- 减少视觉疲劳
|
||
- 提升长时间使用体验
|
||
|
||
### 4. 统一协调
|
||
- 所有紫色调统一色系
|
||
- 色彩饱和度适中
|
||
- 明暗对比合理
|
||
|
||
### 5. 对比度优化（AAA 级）
|
||
- 主按钮使用深紫色 (#5B21B6) 确保白色文字极致清晰
|
||
- 对比度高达 **8.6:1**，超越 WCAG AAA 标准（≥ 7:1）
|
||
- 文字添加明显阴影 (0 1px 3px rgba(0,0,0,0.2)) 增强立体感
|
||
- 按钮字重 600，字间距 0.03em，强制白色文字显示
|
||
- 悬停/激活状态也保持高对比度（≥ 6.5:1）
|
||
- 适合长时间使用，减少视觉疲劳
|
||
|
||
---
|
||
|
||
## 🔄 与蓝色主题对比
|
||
|
||
| 元素 | 蓝色主题 | 深紫色主题 |
|
||
|------|---------|---------|
|
||
| 主色 | #1677FF | #5B21B6 |
|
||
| 对比度 | 4.5:1 (AA) | 8.6:1 (AAA) |
|
||
| 辅助色 | #52C41A | #10B981 |
|
||
| 背景 | #F5F7FA | #F5F3FF |
|
||
| 感觉 | 科技、理性 | 创意、优雅 |
|
||
| 适用 | 企业工具 | 创作平台 |
|
||
| 可读性 | 中等 | 极佳 |
|
||
|
||
---
|
||
|
||
## 💡 使用建议
|
||
|
||
### DO ✅
|
||
- 优先使用渐变色于装饰性元素
|
||
- 保持统一的紫色色系
|
||
- 利用深浅紫色区分层级
|
||
- 在白色背景上使用主紫色
|
||
|
||
### DON'T ❌
|
||
- 避免过度使用渐变
|
||
- 不要混用不同色系
|
||
- 文字不要使用浅紫色（对比度不足）
|
||
- 避免大面积深紫色背景
|
||
|
||
---
|
||
|
||
## 🎨 扩展色板
|
||
|
||
按深浅排序的完整紫色调色板（从深到浅）：
|
||
|
||
```css
|
||
超深紫: #4C1D95 /* 按钮激活态 */
|
||
深暗紫: #5B21B6 /* 主按钮（主色）*/
|
||
暗紫: #6D28D9 /* 悬停、链接 */
|
||
浓紫: #7C3AED /* 信息提示 */
|
||
主紫: #8B5CF6 /* 装饰元素 */
|
||
深紫: #A78BFA /* 高亮 */
|
||
中紫: #C4B5FD /* 浅高亮 */
|
||
柔紫: #DDD6FE /* 边框 */
|
||
淡紫: #EDE9FE /* 选中背景 */
|
||
浅紫: #F5F3FF /* 布局背景 */
|
||
超浅紫: #FAF5FF /* 悬停背景 */
|
||
```
|
||
|
||
**使用原则**：
|
||
- 深色紫 (#4C1D95 ~ #6D28D9) 用于按钮、强调
|
||
- 中色紫 (#7C3AED ~ #8B5CF6) 用于链接、图标
|
||
- 浅色紫 (#A78BFA ~ #DDD6FE) 用于边框、悬停
|
||
- 超浅紫 (#EDE9FE ~ #FAF5FF) 用于背景
|
||
|
||
---
|
||
|
||
**最后更新**: 2025-10-18（深紫色高对比度优化）
|
||
**设计师**: PicStack Design Team
|
||
**对比度标准**: WCAG AAA 级（8.6:1）
|