6.7 KiB
6.7 KiB
PicStack 配色方案说明
🎨 主题概述
主题名称: 紫色渐变系 (Purple Gradient Theme) 设计理念: 创意、现代、优雅 适用场景: 图片管理、创作工具、设计平台
🌈 核心配色
主色系 (Primary Colors)
深紫色 (Primary): #5B21B6 /* 深紫色 - 主按钮、主要交互（高对比度）*/
中深紫 (Secondary): #6D28D9 /* 中深紫 - 悬停状态、链接 */
中紫色 (Tertiary): #7C3AED /* 中紫色 - 信息提示、次要交互 */
浅紫色 (Light): #8B5CF6 /* 浅紫色 - 装饰元素 */
粉紫色 (Accent): #A78BFA /* 粉紫色 - 高亮、渐变 */
超深紫 (Active): #4C1D95 /* 超深紫 - 按钮激活状态 */
使用场景:
- 主按钮：#5B21B6（深紫）- 确保白色文字清晰可读
- 按钮悬停：#6D28D9（中深紫）
- 链接文字：#6D28D9（中深紫）
- Switch开关：#5B21B6（深紫）
- Slider滑块：#5B21B6（深紫）
- 选中状态：#5B21B6（深紫）
- 进度条：#5B21B6（深紫）
- Icon 图标：根据场景使用不同深度
辅助色系 (Secondary Colors)
翡翠绿 (Success): #10B981 /* 成功状态、上传完成 */
琥珀色 (Warning): #F59E0B /* 警告提示、空间不足 */
红色 (Error): #EF4444 /* 错误状态、上传失败 */
粉色 (Highlight): #EC4899 /* 强调、渐变终点 */
背景色系 (Background Colors)
基础背景: #FAFAF9 /* 页面最外层 */
容器背景: #FFFFFF /* 卡片、弹窗 */
布局背景: #F5F3FF /* 侧边栏、Header */
文本色系 (Text Colors)
主文本: #1F2937 /* 标题、重要文字 */
副文本: #4B5563 /* 描述、说明文字 */
弱文本: #9CA3AF /* 次要信息 */
禁用文本: #D1D5DB /* 禁用状态 */
边框色系 (Border Colors)
常规边框: #E5E7EB
浅边框: #F3F4F6
激活边框: #7C3AED /* 输入框聚焦 */
悬停边框: #A78BFA
🎭 渐变方案
主渐变 (Primary Gradient)
background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
用途: Logo、按钮、装饰元素
紫蓝渐变 (Purple-Blue Gradient)
background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
用途: 次要装饰、背景板
紫粉渐变 (Purple-Pink Gradient)
background: linear-gradient(120deg, #A78BFA 0%, #F472B6 100%);
用途: 悬停效果、高亮区域
成功渐变 (Success Gradient)
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
用途: 成功状态、完成标识
📊 组件配色示例
统计卡片 (Statistics Cards)
总文件数: 左边框 #7C3AED 数值 #7C3AED
已用空间: 左边框 #10B981 数值 #10B981
上传流量: 左边框 #8B5CF6 数值 #8B5CF6
月增长: 左边框 #EC4899 数值 #EC4899
进度条 (Progress Bar)
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)
默认背景: #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 ❌
- 避免过度使用渐变
- 不要混用不同色系
- 文字不要使用浅紫色（对比度不足）
- 避免大面积深紫色背景
🎨 扩展色板
按深浅排序的完整紫色调色板（从深到浅）：
超深紫: #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）