🎨 AI Brand Colors

🎨 配色方案
👁 实时预览
♿ 对比度
📦 导出
📋 历史
🎨

输入品牌信息，点击生成按钮
AI 将为你创建完整的品牌配色系统

👁

生成配色方案后，这里将展示模拟网站预览

♿

生成配色方案后查看无障碍对比度检查结果

📦

生成配色方案后可导出多种格式

.history-panel{position:fixed;top:0;right:-380px;width:360px;height:100vh;background:var(--bg2);border-left:1px solid var(--border);padding:20px;overflow-y:auto;transition:right .3s;z-index:200;box-shadow:-4px 0 20px rgba(0,0,0,.1)} .history-panel.open{right:0} .history-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s} .history-overlay.open{opacity:1;pointer-events:auto} .history-item:hover{background:var(--bg3)} body.dark-mode{--bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--text:#f1f5f9;--text2:#94a3b8;--text3:#64748b;--border:#475569;--shadow:0 1px 3px rgba(0,0,0,.3)} body.dark-mode .app-header{background:rgba(30,41,59,.9)} body.dark-mode .preview-mock{background:#1e293b;border-color:#475569} body.dark-mode input,body.dark-mode textarea,body.dark-mode select{background:#334155;border-color:#475569;color:#f1f5f9} body.dark-mode .chip{background:#334155;border-color:#475569;color:#94a3b8} body.dark-mode .chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}

🎨 AI Brand Colors

🎨

AI 品牌配色系统生成器

输入品牌信息，AI 将为你生成完整的品牌视觉配色系统，包含主色、辅色、强调色、中性色和语义色。

📋 配色历史