60-30-10 法则
60% 背景/基础色，30% 次级色，10% 强调色。技术博客建议强调色只用于按钮、链接、焦点和徽章。
DESIGN · 设计 / 配色 / 灵感
色彩搭配推荐
色彩是设计的灵魂。精选 12 套经过实战检验的色彩搭配方案，从赛博朋克到日式和风，为你的下一个项目找到完美的配色灵感。
12套配色方案
60个色值
4.5:1无障碍对比度
01
深空蓝 Deep Space
科技感#0f172a
#1e3a8a
#38bdf8
#0ea5e9
#020617
深邃夜空般的深蓝基调搭配亮蓝点缀，营造出强烈的科技感和专业感。适合 SaaS 平台、数据仪表盘和技术博客。
02
午夜紫 Midnight Violet
神秘感#1a1a2e
#16213e
#0f3460
#e94560
#533483
暗紫色与绯红的碰撞，神秘而富有张力。适合创意作品展示、艺术类网站和品牌 Landing Page。
03
极简白 Minimal White
简洁#f8f9fa
#ffffff
#2563eb
#64748b
#1e293b
干净简洁的白底蓝强调色方案，阅读体验极佳。适合文档站点、新闻门户和内容型应用。
04
黑客绿 Hacker Green
极客#1b1b1b
#0d2818
#00ff88
#00cc6a
#003d1a
经典的终端绿色调，致敬黑客文化。适合开发者工具、CLI 产品、技术社区和极客文化网站。
05
琥珀黄昏 Amber Dusk
温暖#1c1917
#451a03
#f59e0b
#d97706
#fbbf24
暖色调的琥珀和深棕搭配，营造黄昏般的温暖氛围。适合餐饮、生活方式、摄影和创意工作室。
06
海洋之心 Ocean Heart
清新#0f2b3d
#164e63
#06b6d4
#22d3ee
#0891b2
从深蓝到碧绿的海洋渐变，清新而深邃。适合旅游、环保、健康和户外运动类网站。
07
玫瑰烈焰 Rose Flame
热烈#2d0a1e
#881337
#f43f5e
#fb7185
#e11d48
深酒红到玫瑰红的渐变，似烈焰燃烧。适合时尚、美妆、情人节专题和品牌促销页面。
08
森林秘境 Forest Realm
自然#0f1f0f
#14532d
#22c55e
#4ade80
#166534
深林绿搭配亮绿色点缀，充满生机的自然色调。适合环保、农业、园艺和冥想类应用。
09
赛博朋克 Cyberpunk
未来感#0d0221
#ff2a6d
#05d9e8
#ffce00
#7700ff
霓虹紫、电光蓝与亮红的赛博朋克经典组合。适合游戏、科技活动、音乐节和潮流品牌。
10
日式和风 Japanese Wabi-Sabi
侘寂#fefae0
#faedcd
#bc6c25
#606c38
#283618
米白、陶土棕与橄榄绿的温润组合，体现侘寂美学的质朴与自然。适合手工、茶道、住宿和生活方式品牌。
11
莫兰迪色 Morandi Tones
高级灰#8a7f7e
#a68a7c
#d4a373
#ccd5ae
#fefae0
低饱和度的灰褐、陶土和米色系，温柔耐看的高级感。适合家居、室内设计、艺术策展和个人品牌。
12
极光渐变 Aurora Gradient
梦幻#0c1220
#1a365d
#5d9743
#a78bfa
#38bdf8
夜幕背景上流淌的极光色彩，绿紫蓝交织的梦幻渐变。适合创意展示、科技品牌、活动页面和概念型产品。
配色使用建议
60-30-10 法则
主色 60%、辅助色 30%、强调色 10%。这是最经典的颜色分配比例，让配色有层次不乱。
选择色轮位置
互补色（对面）对比最强，类似色（相邻）最和谐，三角配色最均衡。根据品牌调性选择。
深色 vs 浅色
深色背景减少视觉疲劳，适合沉浸式体验。浅色背景阅读性好，适合内容密集型应用。
无障碍配色
确保文字与背景的对比度 ≥ 4.5:1（AA 标准），使用 WebAIM Contrast Checker 检测。
从配色到真实 UI 落地
好看的色板只是开始，真正落地要考虑文本对比度、状态色、深浅主题、品牌延展和组件一致性。
Primary
组件预览卡片
用主色强调按钮和关键状态，用低饱和背景承载内容，避免大面积高亮造成疲劳。
Warning
提示状态
警告色适合少量出现，和错误色区分开，避免用户误判严重程度。
Info
信息标签
蓝绿色在技术网站中适合表达稳定、可信、清晰的系统反馈。
深色主题规则
不要用纯黑纯白；背景控制在 #0b1220 附近，正文用 #cbd5e1，弱文本用 #94a3b8。
无障碍对比
正文对比度至少 4.5:1，大字号至少 3:1。低对比渐变文字不要用于关键内容。
品牌色延展
从一个主色生成 hover、active、soft background、border 和 glow，保证视觉统一。
通用 CSS 变量模板
:root {
--color-primary: #5d9743;
--color-primary-hover: #6a9f52;
--color-primary-soft: rgba(93, 151, 67, .12);
--color-bg: #0c1220;
--color-card: rgba(255,255,255,.04);
--color-text: #f1f5f9;
--color-muted: #94a3b8;
}推荐做法
- 先确定背景和正文色，再选强调色。
- 每套配色都定义 hover、active、disabled 状态。
- 图表色板要考虑色盲用户。
避免踩坑
- 不要大面积使用高饱和霓虹色。
- 不要只靠 hover 展示关键信息，移动端没有 hover。
- 不要用低对比灰色承载正文。
对比度与语义色 Token
正文文本
深色背景正文建议使用 #e2e8f0 / #cbd5e1，弱文本不要低于 #94a3b8。
状态色
成功、警告、错误、信息应独立定义，不要复用品牌主色表达所有状态。
组件 Token
建议分为 primary、surface、border、text、muted、danger、warning、success。