20种UI风格配色方案

1. 现代简约 (Modern Minimalist)

风格描述：干净、整洁、注重留白、功能至上、无过多装饰，通常搭配无衬线字体。

主色 (#3B82F6)

辅助色 (#D1E1F9)

背景色 (#F8FAFC)

文本色 (#1F2937)

强调色 (#60A5FA)

成功色 (#10B981)

警告色 (#F59E0B)

错误色 (#EF4444)

组件风格偏好:

轻度圆角 (rounded-md), 微弱阴影 (shadow-sm/md), 扁平化按钮, 简约卡片式布局。

2. 商务专业 (Business Professional)

风格描述：稳重、可靠、权威感、注重细节，常使用深色调与对比色突出重点。

主色 (#1E3A8A)

辅助色 (#BFDBFE)

背景色 (#F9FAFB)

文本色 (#111827)

强调色 (#4B5563)

成功色 (#059669)

警告色 (#D97706)

错误色 (#DC2626)

组件风格偏好:

轻微圆角 (rounded-sm), 适中阴影 (shadow-md), 边框强调, 结构清晰的卡片。

3. 活力创意 (Vibrant Creative)

风格描述：充满活力、年轻化、大胆用色、注重视觉冲击力，常使用渐变和不规则形状。

主色 (渐变)

辅助色 (#FECACA)

背景色 (#FFFFFF)

文本色 (#1F2937)

强调色 (#EC4899)

成功色 (#16A34A)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

大圆角 (rounded-xl/2xl), 明显阴影 (shadow-lg), 按钮和背景使用渐变, 图片裁剪和布局灵活。

4. 暗色主题 (Dark Theme)

风格描述：低对比度、减少眼睛疲劳、科技感、沉浸式体验。

主色 (#6366F1)

辅助色 (#4F46E5)

背景色 (#1F2937)

文本色 (#D1D5DB)

强调色 (#A78BFA)

成功色 (#34D399)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

圆角 (rounded-md), 轻微内阴影/外发光效果 (模拟), 强调边框, 扁平化或微拟物化。

5. 柔和复古 (Soft Vintage)

风格描述：温馨、怀旧、手绘感、低饱和度、柔和的色彩过渡。

主色 (#8B5CF6)

辅助色 (#FBCFE8)

背景色 (#FFFBEB)

文本色 (#4B5563)

强调色 (#FCD34D)

成功色 (#22C55E)

警告色 (#FB923C)

错误色 (#EF4444)

组件风格偏好:

柔和圆角 (rounded-lg), 浅色阴影 (shadow-md), 纹理背景 (模拟), 按钮略带手绘感或边框。

6. 科技未来 (Tech Futuristic)

风格描述：高科技、几何、数字感、冷色调、注重光影和动态效果。

主色 (#00F0FF)

辅助色 (#4D4DFF)

背景色 (#0F172A)

文本色 (#E0F2F7)

强调色 (#6D28D9)

成功色 (#10B981)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

尖锐或极小圆角 (rounded-sm/none), 霓虹发光效果 (模拟), 玻璃模糊效果 (模拟), 几何图形、线条和半透明元素。

7. 优雅古典 (Elegant Classic)

风格描述：精致、奢华、注重细节、常使用衬线字体和金/银色点缀。

主色 (#8B4513)

辅助色 (#D3B995)

背景色 (#FDFBF8)

文本色 (#333333)

强调色 (#D4AF37)

成功色 (#0E9F6E)

警告色 (#DAA520)

错误色 (#B22222)

组件风格偏好:

精致边框, 细腻阴影, 少量金色/银色点缀, 传统卡片式布局。

8. 清新自然 (Fresh & Organic)

风格描述：环保、健康、绿色、注重留白和自然元素。

主色 (#34D399)

辅助色 (#D1FAE5)

背景色 (#F0FDF4)

文本色 (#2F4F4F)

强调色 (#6EE7B7)

成功色 (#10B981)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

圆角 (rounded-full/xl), 轻柔阴影, 有机形状 (模拟), 大量留白。

9. 扁平化 (Flat Design)

风格描述：无阴影、无渐变、无纹理，纯色块、简洁图标，注重可用性。

主色 (#F44336)

辅助色 (#FFCDD2)

背景色 (#FFFFFF)

文本色 (#212121)

强调色 (#2196F3)

成功色 (#4CAF50)

警告色 (#FFC107)

错误色 (#F44336)

组件风格偏好:

直角或轻微圆角 (rounded-sm), 无阴影, 纯色块按钮, 强调图标和文字对比。

10. 拟物化 (Modern Skeuomorphism)

风格描述：通过内外阴影模拟按钮按下感，轻柔渐变和深度感，提升触觉反馈。

主色 (#3B82F6)

辅助色 (#D1E1F9)

背景色 (#F8FAFC)

文本色 (#1F2937)

强调色 (#60A5FA)

成功色 (#10B981)

警告色 (#F59E0B)

错误色 (#EF4444)

组件风格偏好:

中等圆角 (rounded-lg), 多层内外阴影 (neumorphism), 柔和渐变, 3D 感按钮。

11. 高雅柔和 (Elegant Pastel)

风格描述：低饱和度、温暖、平和、女性化、强调和谐与精致。

主色 (#FBBF24)

辅助色 (#FDE68A)

背景色 (#FFFDF7)

文本色 (#555555)

强调色 (#FCA5A5)

成功色 (#84CC16)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

柔和圆角 (rounded-lg), 轻微阴影, 少量精致图标, 简洁优雅卡片。

12. 工业粗犷 (Industrial Grunge)

风格描述：粗糙、金属感、复古工业风、强对比度、纹理。

主色 (#4B5563)

辅助色 (#D1D5DB)

背景色 (#E5E7EB)

文本色 (#1F2937)

强调色 (#EF4444)

成功色 (#22C55E)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

直角或小圆角 (rounded-sm), 强调边框, 粗糙纹理 (模拟), 按钮有明显按压感。

13. 极简主义 (Extreme Minimalism)

风格描述：极致的留白、仅保留必要元素、黑白灰主色调、强调内容本身。

主色 (#1F2937)

辅助色 (#D1D5DB)

背景色 (#FFFFFF)

文本色 (#111827)

强调色 (#9CA3AF)

成功色 (#10B981)

警告色 (#F59E0B)

错误色 (#EF4444)

组件风格偏好:

直角或极小圆角, 无阴影或极淡阴影, 纯文本按钮, 仅用色彩区分状态。

14. 明快活泼 (Bright & Playful)

风格描述：高饱和度、多种鲜艳色彩搭配、卡通感、趣味性。

主色 (#FF6347)

辅助色 (#FFDAB9)

背景色 (#FFFFFF)

文本色 (#333333)

强调色 (#FFD700)

成功色 (#32CD32)

警告色 (#FFA500)

错误色 (#DC143C)

组件风格偏好:

大圆角 (rounded-xl/full), 活泼阴影, 撞色按钮, 几何图形或不规则形状。

15. 奢华深邃 (Luxurious Deep)

风格描述：深色背景、金色/银色点缀、高贵、神秘、强调品质。

主色 (#5D264A)

辅助色 (#B17D94)

背景色 (#1A1A1A)

文本色 (#F8F8F8)

强调色 (#FFD700)

成功色 (#3CB371)

警告色 (#FF8C00)

错误色 (#8B0000)

组件风格偏好:

小圆角 (rounded-md), 强烈阴影或发光效果, 金色/银色边框或文字, 复杂的背景纹理 (模拟)。

16. 报刊杂志 (Editorial Magazine)

风格描述：内容驱动、多列布局、图片与文字融合、强调可读性与美观排版。

主色 (#0F172A)

辅助色 (#F1F5F9)

背景色 (#FFFFFF)

文本色 (#1F2937)

强调色 (#DC2626)

成功色 (#10B981)

警告色 (#F59E0B)

错误色 (#EF4444)

组件风格偏好:

直角或极小圆角, 少量阴影, 强调排版网格, 结合大图和小字内容。

17. 蒸汽朋克 (Steampunk)

风格描述：维多利亚时代科幻、机械、黄铜、皮革、齿轮、浓郁的复古工业感。

主色 (#5C4033)

辅助色 (#B8860B)

背景色 (#F5DEB3)

文本色 (#2F4F4F)

强调色 (#DAA520)

成功色 (#3CB371)

警告色 (#FFD700)

错误色 (#A52A2A)

组件风格偏好:

金属质感边框 (模拟), 齿轮/机械纹理背景 (模拟), 按钮具有老式开关感, 棕色和黄铜色调。

18. 赛博朋克 (Cyberpunk)

风格描述：霓虹灯、黑暗都市、数据流、高科技低生活、强烈的对比色。

主色 (#C026D3)

辅助色 (#3B82F6)

背景色 (#000000)

文本色 (#E2E8F0)

强调色 (#00F0FF)

成功色 (#10B981)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

尖锐直角, 霓虹发光边框 (模拟), 玻璃模糊效果 (模拟), 几何线条, 透明度。

19. 怀旧像素 (Retro Pixel)

风格描述：80年代像素游戏风格、粗糙边缘、有限色板、童年回忆。

主色 (#008080)

辅助色 (#FFD700)

背景色 (#C0C0C0)

文本色 (#000000)

强调色 (#FF00FF)

成功色 (#00FF00)

警告色 (#FFFF00)

错误色 (#FF0000)

组件风格偏好:

直角, 像素化边框和图形 (模拟), 按钮有明显按压感 (8位游戏风格), 有限的色彩。

20. 孟菲斯 (Memphis Design)

风格描述：大胆的几何形状、鲜艳的色彩、重复图案、无视传统设计规则。

主色 (#F87171)

辅助色 (#93C5FD)

背景色 (#FDF2F8)

文本色 (#1F2937)

强调色 (#FBBD23)

成功色 (#34D399)

警告色 (#FBBF24)

错误色 (#EF4444)

组件风格偏好:

不规则形状 (模拟), 鲜艳撞色, 波点/线条/几何图案背景 (模拟), 按钮突出。

20 种 UI 风格配色方案

1. 现代简约 (Modern Minimalist)

推荐排版体系:

组件风格偏好:

2. 商务专业 (Business Professional)

推荐排版体系:

组件风格偏好:

3. 活力创意 (Vibrant Creative)

推荐排版体系:

组件风格偏好:

4. 暗色主题 (Dark Theme)

推荐排版体系:

组件风格偏好:

5. 柔和复古 (Soft Vintage)

推荐排版体系:

组件风格偏好:

6. 科技未来 (Tech Futuristic)

推荐排版体系:

组件风格偏好:

7. 优雅古典 (Elegant Classic)

推荐排版体系:

组件风格偏好:

8. 清新自然 (Fresh & Organic)

推荐排版体系:

组件风格偏好:

9. 扁平化 (Flat Design)

推荐排版体系:

组件风格偏好:

10. 拟物化 (Modern Skeuomorphism)

推荐排版体系:

组件风格偏好:

11. 高雅柔和 (Elegant Pastel)

推荐排版体系:

组件风格偏好:

12. 工业粗犷 (Industrial Grunge)

推荐排版体系:

组件风格偏好:

13. 极简主义 (Extreme Minimalism)

推荐排版体系:

组件风格偏好:

14. 明快活泼 (Bright & Playful)

推荐排版体系:

组件风格偏好:

15. 奢华深邃 (Luxurious Deep)

推荐排版体系:

组件风格偏好:

16. 报刊杂志 (Editorial Magazine)

推荐排版体系:

组件风格偏好:

17. 蒸汽朋克 (Steampunk)

推荐排版体系:

组件风格偏好:

18. 赛博朋克 (Cyberpunk)

推荐排版体系:

组件风格偏好:

19. 怀旧像素 (Retro Pixel)

推荐排版体系:

组件风格偏好:

20. 孟菲斯 (Memphis Design)

推荐排版体系:

组件风格偏好:

目录导航

预览结果：