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
夜幕背景上流淌的极光色彩，绿紫蓝交织的梦幻渐变。适合创意展示、科技品牌、活动页面和概念型产品。
配色使用建议
限制色相数量
整页色相控制在 2~3 种，其余层次交给明度与饱和度变化。颜色越多越难协调，克制才有高级感。
选择色轮位置
互补色（对面）对比最强，类似色（相邻）最和谐，三角配色最均衡。根据品牌调性选择。
深色 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。
🎨 配色方法论
60-30-10 法则
60% 背景基调色 + 30% 辅助色（卡片、侧栏、分割线）+ 10% 强调色（按钮、链接、徽章）。强调色越克制越有力量，比例失衡是页面显"花"的首要原因。
色彩情绪对照
冷色（蓝/青/紫）传递科技、信任、冷静，适合金融科技与 B 端产品；暖色（红/橙/黄）传递热情、紧迫、食欲，适合电商促销与餐饮；绿色系联想健康、自然与财务增长。
从品牌色推导色板
以品牌色为基准生成 9 级明度阶梯（50→900）覆盖背景/悬停/边框；在色轮对侧取互补色做点缀（占比不超过 10%）；再配一组去饱和灰阶承载正文与弱文本。
行业联想参考
医疗健康用蓝绿传递洁净安心，儿童教育用明快多彩，奢侈品牌用黑白金表达克制，环保农业用大地色系。先定情绪基调，再选色相与饱和度。
♿ 无障碍色彩实践
WCAG 对比度标准
AA 级要求正文对比度不低于 4.5:1，18px 以上大字与粗体不低于 3:1；AAA 级分别提升到 7:1 与 4.5:1。品牌渐变上的白字务必实测，不要凭感觉。
色盲友好设计
约 8% 男性存在红绿色觉障碍。不要单靠颜色传达信息：错误/成功状态同时配图标与文字；用蓝橙对比替代红绿对比；图表辅以形状或纹理区分系列。
对比度检查工具
WebAIM Contrast Checker 网页快查、DevTools 取色器自带对比度实时提示与修复建议、Figma 插件 Stark 可在设计稿阶段完成校验。
🌗 主题与变量
语义色命名
用角色而非颜色值命名：primary / success / warning / danger / info 加 bg / surface / border / text / muted。换主题时只覆盖变量，组件样式零改动。
暗色主题配色注意
背景用深蓝灰（如 #0f172a）而非纯黑，减少边缘闪烁；品牌主色适度提亮并降饱和，避免暗底上刺眼；正文用 #e2e8f0 而非纯白；暗色下阴影几乎失效，改用边框与表面色分层。
亮暗双主题变量模板
:root {
--color-primary: #2563eb;
--color-success: #16a34a;
--color-warning: #d97706;
--color-danger: #dc2626;
--color-bg: #f8fafc;
--color-text: #1e293b;
}
[data-theme="dark"] {
--color-primary: #60a5fa; /* 提亮 + 降饱和 */
--color-success: #4ade80;
--color-warning: #fbbf24;
--color-danger: #f87171;
--color-bg: #0f172a; /* 深蓝灰代替纯黑 */
--color-text: #e2e8f0;
}🧪 配色实操流程
拿到一个新项目不必凭感觉铺颜色，按这五步走，从零到一套可交付的双主题配色。
Step 1 · 定主色
从品牌色或产品情绪出发只选一个色相作为主色，先克制再扩展——一上来铺多个彩色是页面显"花"的根源。
Step 2 · 生成明度阶梯
以主色为基准生成 50→900 九档明度：50-100 做背景与悬停底色，400-500 做按钮与链接，700-900 做深色文本与按压态。
Step 3 · 选中性灰阶
灰阶可掺一点主色色相（蓝灰显科技、暖灰显温和），按背景 / 表面 / 边框 / 弱文本分 3-5 档；中性色承载 90% 以上页面面积。
Step 4 · 定语义色四件套
success / warning / danger / info 独立于主色定义，不复用品牌色表达全部状态；四件套在亮暗主题下各配一版。
Step 5 · 双主题对比度验证
亮暗两套主题分别实测：正文 ≥ 4.5:1、大字号 ≥ 3:1；重点检查主色按钮上的白字与灰底弱文本，不过关就调整明度而非换色相。
🌈 数据可视化配色
顺序色板：单色渐变
表示"从低到高"的量级用同一色相浅→深渐变，热力图与分级统计图首选；不要用彩虹多色系，其明度顺序无规律会误导读数。
发散色板：正负对比
盈亏、升温降温等有正负语义的数据，用两端深、中间浅的双色渐变，中点对齐 0 值基准线，一眼分清方向。
分类色板：≤ 7 色
并列类别超过 7 色肉眼就难以辨认，更多类别要么合并为"其他"，要么改用分组加形状区分，别硬堆颜色。
色盲安全：蓝橙系
用蓝橙对比替代红绿对比（红绿色觉障碍约占男性 8%），再辅以形状、纹理或直接标注数值，不单靠颜色传达信息。
强调色：只给焦点
图表高亮只留给要讲的那条线、那根柱，其余系列全部置灰——配色本身也是叙事，全都是重点等于没有重点。